Java：实现饼图旋转角度（附带源码）

最新推荐文章于 2025-05-12 00:15:00 发布
最新推荐文章于 2025-05-12 00:15:00 发布
阅读量2.3k 收藏 32
点赞数 55
分类专栏： Java 实战项目 文章标签： java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61840987/article/details/147874288
版权

一、项目介绍

1.1 背景

在现代数据可视化领域，饼图（Pie Chart）因其直观展示各部分占整体比例而被广泛采用。为了增强互动性和吸引力，常会赋予饼图 旋转 动画：自动、平滑地旋转，让用户从不同角度重点查看扇区。旋转角度可以突出数据变化、引导观看顺序、提升界面动感。然而，要在 Java Swing/Java2D 环境下实现一个既平滑又可交互的饼图旋转，需要深入掌握以下难点：

  • 角度映射：将时间或帧数映射到旋转角度，并与饼图扇区正确对齐。

  • 绘制顺序：在旋转过程中，正确处理扇区的绘制顺序，避免前后扇区遮挡错乱。

  • 动画驱动：使用 javax.swing.Timer 或高精度定时器控制旋转流畅度。

  • 交互响应：支持暂停/继续、方向切换、速率调节及拖拽控制。

1.2 目标

本文将从零开始，手把手实现一个 Java2D Swing 版 的 可旋转饼图组件，重点在于：

  1. 自动旋转：按设定速率平滑且连续地旋转。

  2. 角度控制：可随时获取与设置当前旋转角度，实现“瞬时跳转”或动画过渡。

  3. 方向切换：顺时针或逆时针旋转可动态切换。

  4. 拖拽控制：鼠标拖拽实时控制饼图角度，打断/恢复自动旋转。

  5. 完整封装：提供易用 API，支持在任意 Swing 界面中嵌入。

二、相关技术与知识

要实现以上功能，需要掌握和理解以下技术要点。

2.1 Java2D 绘图基础

  • Graphics2D：Java2D 的核心渲染上下文，支持抗锯齿、变换、复合等。

  • 形状构造：Arc2D 绘制扇形，Path2D 构造侧面形状。

  • 抗锯齿：通过 RenderingHint.KEY_ANTIALIASING 提升绘图质量。

  • 透明度：使用 AlphaComposite 控制半透明效果。

2.2 动画驱动

  • Swing Timer：javax.swing.Timer 在事件分发线程（EDT）触发周期性事件，安全刷图。

  • 帧率与速率：根据延迟（delay）和每分钟旋转度数（RPM）计算每帧增量角度 delta = rpm * 360° / (60_000ms / delay)。

  • 平滑度：选择合适的 delay（例如 16ms≈60FPS 或 40ms≈25FPS）平衡流畅度与性能。

2.3 深度排序

虽然我们演示的是 2D 饼图，但若添加 3D 侧面 或 阴影，则需要 深度排序：在每帧根据扇区当前中心角度的正余弦值判断其“前后”关系，先画远处扇区再画近处扇区，保证遮挡效果自然。

2.4 交互处理

  • 鼠标拖拽：MouseListener + MouseMotionListener 捕获按下、拖拽、释放事件，实时映射拖动距离到角度偏移。

  • 暂停/恢复：拖拽开始时停止自动旋转，释放时可继续。

  • 方向切换与速率调节：通过暴露 API 允许调用者动态更改 rpm 与 clockwise 标志。

三、实现思路

结合上述技术栈，我们将按以下思路实现：

  1. 数据模型

    • 定义内部 PieSlice 类：保存扇区 value、color、label、startAngle、arcAngle。

    • totalValue 累加所有扇区数值。

    • computeAngles() 方法按比例分配角度。

  2. 组件封装

    • 继承 JPanel，命名为 RotatingPieChartPanel，暴露 API：

      • addSlice(value, color, label)

      • setRotateSpeed(rpm)

      • setClockwise(boolean)

      • start() / stop()

      • setAngle(double) / getAngle() 实现“瞬时跳转”。

  3. 动画与绘制

    • 在构造器中创建 Timer(animationDelay, e->{ advanceOffset(); repaint(); })。

    • advanceOffset() 根据 rpm 与 clockwise 计算 angleOffset。

    • paintComponent() 中调用 drawPie()，分三步：阴影 → 侧面（需深度排序） → 顶面。

  4. 交互

    • 添加 MouseAdapter：

      • mousePressed 开始拖拽，记录初始 angleOffset 与鼠标点；

      • mouseDragged 根据水平方向位移映射到增量角度，更新 angleOffset 并 repaint()；

      • mouseReleased 结束拖拽，重启动画。

  5. 深度排序

    • 在绘制侧面时，先复制扇区列表，按每个扇区 中心角度 的正弦值（或余弦值）排序；

    • depthKey = Math.sin(Math.toRadians(startAngle + arcAngle/2 + angleOffset))，值大者后绘制。

四、完整实现代码

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.util.*;
import java.util.List;

/**
 * RotatingPieChartPanel：可自动/手动旋转且正确排序的饼图组件
 */
public class RotatingPieChartPanel extends JPanel {

    /** 内部扇区模型 */
    private static class PieSlice {
        double value;          // 扇区数值
        Color color;           // 扇区颜色
        String label;          // 扇区标签
        double startAngle;     // 起始角度（度）
        double arcAngle;       // 扇区角度（度）
        boolean highlighted;   // 是否高亮

        PieSlice(double value, Color color, String label) {
            this.value = value;
            this.color = color;
            this.label = label;
            this.highlighted = false;
        }
    }

    private final List<PieSlice> slices = new ArrayList<>();
    private double totalValue = 0.0;

    // 旋转控制
    private double angleOffset = 0.0;  // 当前偏移角度
    private double rpm = 1.0;          // 每分钟度数
    private boolean clockwise = true;  // 旋转方向
    private Timer animationTimer;      // 用于自动旋转

    // 3D 效果深度（像素）
    private double depth = 50.0;

    // 拖拽交互状态
    private boolean dragging = false;
    private double dragStartOffset;
    private Point dragStartPoint;

    public RotatingPieChartPanel() {
        setBackground(Color.WHITE);
        setPreferredSize(new Dimension(600, 400));
        initInteraction();
    }

    /** 初始化鼠标交互：拖拽控制 */
    private void initInteraction() {
        MouseAdapter ma = new MouseAdapter() {
            @Override
            public void mousePressed(MouseEvent e) {
                // 停止自动旋转，进入拖拽状态
                stop();
                dragging = true;
                dragStartOffset = angleOffset;
                dragStartPoint = e.getPoint();
            }

            @Override
            public void mouseDragged(MouseEvent e) {
                if (!dragging) return;
                Point pt = e.getPoint();
                double dx = pt.x - dragStartPoint.x;
                // 每像素对应 0.5 度
                angleOffset = dragStartOffset + dx * 0.5;
                repaint();
            }

            @Override
            public void mouseReleased(MouseEvent e) {
                dragging = false;
                start(); // 恢复自动旋转
            }
        };
        addMouseListener(ma);
        addMouseMotionListener(ma);
    }

    /** 添加扇区 */
    public void addSlice(double value, Color color, String label) {
        slices.add(new PieSlice(value, color, label));
        totalValue += value;
        computeAngles();
        repaint();
    }

    /** 重新计算扇区角度 */
    private void computeAngles() {
        double angle = 0.0;
        for (PieSlice s : slices) {
            s.startAngle = angle;
            s.arcAngle = s.value / totalValue * 360.0;
            angle += s.arcAngle;
        }
    }

    /** 设置旋转速率（RPM） */
    public void setRotateSpeed(double rpm) {
        this.rpm = rpm;
        if (animationTimer != null && animationTimer.isRunning()) {
            stop();
            start();
        }
    }

    /** 设置旋转方向 */
    public void setClockwise(boolean cw) {
        this.clockwise = cw;
    }

    /** 设置 3D 深度 */
    public void setDepth(double depth) {
        this.depth = depth;
        repaint();
    }

    /** 启动自动旋转 */
    public void start() {
        if (animationTimer != null && animationTimer.isRunning()) return;
        int delay = 40; // 25 FPS
        double deltaDeg = rpm * 360.0 / (60_000.0 / delay);
        animationTimer = new Timer(delay, e -> {
            angleOffset += (clockwise ? -deltaDeg : deltaDeg);
            repaint();
        });
        animationTimer.start();
    }

    /** 停止自动旋转 */
    public void stop() {
        if (animationTimer != null) {
            animationTimer.stop();
            animationTimer = null;
        }
    }

    /** 获取当前角度 */
    public double getAngle() {
        return angleOffset;
    }

    /** 直接设置角度（瞬时跳转） */
    public void setAngle(double angle) {
        this.angleOffset = angle % 360.0;
        repaint();
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        renderPie((Graphics2D) g);
    }

    /** 绘制饼图：阴影 → 侧面（深度排序） → 顶面 */
    private void renderPie(Graphics2D g2) {
        // 抗锯齿
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);

        int w = getWidth(), h = getHeight();
        double cx = w / 2.0, cy = h / 2.0 - depth / 2.0;
        double r = Math.min(w, h - depth) / 2.0 - 20.0;

        // 1. 绘制阴影
        drawShadow(g2, cx, cy, r);

        // 2. 深度排序并绘制侧面
        List<PieSlice> sorted = new ArrayList<>(slices);
        sorted.sort(Comparator.comparingDouble(this::depthKey));
        for (PieSlice s : sorted) {
            drawSide(g2, cx, cy, r, s);
        }

        // 3. 绘制顶面
        for (PieSlice s : sorted) {
            drawTop(g2, cx, cy, r, s);
        }
    }

    /** 计算深度排序 key：扇区中心角度的 sin 值 */
    private double depthKey(PieSlice s) {
        double mid = s.startAngle + s.arcAngle / 2.0 + angleOffset;
        return Math.sin(Math.toRadians(mid));
    }

    /** 绘制底部阴影 */
    private void drawShadow(Graphics2D g2,
                            double cx, double cy, double r) {
        Ellipse2D shadow = new Ellipse2D.Double(
            cx - r, cy + depth - r / 3.0 * 2, 2 * r, r / 2.0
        );
        Composite old = g2.getComposite();
        g2.setComposite(AlphaComposite.getInstance(
            AlphaComposite.SRC_OVER, 0.3f
        ));
        g2.setColor(Color.BLACK);
        g2.fill(shadow);
        g2.setComposite(old);
    }

    /** 绘制扇区侧面 */
    private void drawSide(Graphics2D g2,
                          double cx, double cy, double r, PieSlice s) {
        double sa = Math.toRadians(s.startAngle + angleOffset);
        double ea = Math.toRadians(s.startAngle + s.arcAngle + angleOffset);

        Point2D p1 = new Point2D.Double(
            cx + r * Math.cos(sa), cy + r * Math.sin(sa)
        );
        Point2D p2 = new Point2D.Double(
            cx + r * Math.cos(ea), cy + r * Math.sin(ea)
        );
        Point2D p3 = new Point2D.Double(p2.getX(), p2.getY() + depth);
        Point2D p4 = new Point2D.Double(p1.getX(), p1.getY() + depth);

        Path2D side = new Path2D.Double();
        side.moveTo(p1.getX(), p1.getY());
        side.lineTo(p4.getX(), p4.getY());
        side.lineTo(p3.getX(), p3.getY());
        side.lineTo(p2.getX(), p2.getY());
        side.closePath();

        g2.setColor(s.color.darker());
        g2.fill(side);
        if (s.highlighted) {
            g2.setColor(Color.WHITE);
            g2.setStroke(new BasicStroke(2));
            g2.draw(side);
        }
    }

    /** 绘制扇区顶面 */
    private void drawTop(Graphics2D g2,
                         double cx, double cy, double r, PieSlice s) {
        Arc2D top = new Arc2D.Double(
            cx - r, cy - r, 2 * r, 2 * r,
            s.startAngle + angleOffset,
            s.arcAngle, Arc2D.PIE
        );
        g2.setColor(s.color);
        g2.fill(top);
        if (s.highlighted) {
            g2.setColor(Color.WHITE);
            g2.setStroke(new BasicStroke(2));
            g2.draw(top);
        }
    }

    // 可扩展：添加高亮与提示功能
}

/**
 * DemoMain：演示 RotatingPieChartPanel 用法
 */
class DemoMain {
    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            RotatingPieChartPanel pie = new RotatingPieChartPanel();
            pie.addSlice(30, Color.RED,   "红");
            pie.addSlice(20, Color.BLUE,  "蓝");
            pie.addSlice(40, Color.GREEN, "绿");
            pie.addSlice(10, Color.ORANGE,"橙");
            pie.setDepth(60);
            pie.setRotateSpeed(2.5);
            pie.setClockwise(false);
            pie.start();

            JFrame f = new JFrame("可旋转饼图示例");
            f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            f.add(pie);
            f.pack();
            f.setLocationRelativeTo(null);
            f.setVisible(true);
        });
    }
}

五、方法级功能解读

  1. addSlice(value, color, label)

    • 创建 PieSlice 对象，累加 totalValue，调用 computeAngles() 重新计算所有扇区的角度分布。

  2. computeAngles()

    • 遍历 slices 列表，按比例 (value / totalValue) * 360° 分配各扇区 arcAngle，并依次累加 startAngle。

  3. start() / stop()

    • 使用 javax.swing.Timer：delay = 40ms，每次 actionPerformed 中计算增量

double deltaDeg = rpm * 360.0 / (60_000.0 / delay);
angleOffset += clockwise ? -deltaDeg : deltaDeg;

 

    • 调用 repaint() 刷新组件。

  2. paintComponent(...)

    • 先 super.paintComponent(g) 清除背景，然后调用 renderPie(g2)：

      • 启用抗锯齿

      • 计算中心 (cx,cy) 与半径 r

      • 调用 drawShadow、drawSide（深度排序）和 drawTop

  3. depthKey(PieSlice s)

    • 计算扇区中心角度：s.startAngle + s.arcAngle/2 + angleOffset

    • 取正弦值作为深度排序依据（越大越“前”），并对列表排序，保证先画“后面”的侧面，再画“前面”的侧面与顶面。

  4. drawShadow

    • 底部绘制半透明黑色椭圆，使用 AlphaComposite 设为 0.3f。

  5. drawSide

    • 计算扇区边缘两点 (p1, p2)，并向下延伸 depth 得到底部两点 (p4, p3)；

    • 构造 Path2D 四边形填充较暗颜色；

  6. drawTop

    • 使用 Arc2D.PIE 绘制扇形顶面；

  7. 拖拽交互

    • mousePressed 中停止自动旋转并记录初始状态；

    • mouseDragged 根据水平位移映射到增量角度更新 angleOffset；

    • mouseReleased 中恢复自动旋转。

六、项目总结与扩展思考

6.1 核心收获

  • 深入理解 Java2D 在复杂动态图形中的应用技巧；

  • 掌握 旋转动画 与 帧率控制 的实现；

  • 学会使用 深度排序 解决旋转遮挡问题；

  • 熟悉 拖拽交互 在图形组件中的集成。

6.2 性能优化建议

  1. Shape 缓存：对每个扇区在固定角度步长下预生成 Path2D 与 Arc2D，避免每帧大量对象创建。

  2. 离屏缓冲：使用 BufferedImage 或 VolatileImage 离屏渲染静态部分（阴影、侧面基础形状），只动态绘制旋转部分。

  3. OpenGL 加速：设置系统属性 -Dsun.java2d.opengl=true 启用硬件加速。

6.3 扩展功能

  • 渐变与纹理：为扇面添加渐变填充或贴图。

  • 多层饼图/环形图：支持环形（Donut）或嵌套饼图。

  • 标签与引导线：在旋转中动态显示标签，引导线可选显示。

  • JavaFX 版本：基于 JavaFX Canvas 或 3D API 实现更高性能和光照效果。

Java：实现饼图旋转角度（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-15 94
Java：实现饼图旋转角度（附完整源码）
piebuttons:以饼图形式创建按钮并实现其 onClick 操作
06-19
【piebuttons】是一个创新性的项目，它允许开发者创建以饼图形式展现的按钮，并且能够实现这些按钮的点击（onClick）事件操作。这种设计风格为用户界面增添了一种独特而吸引人的元素，使得交互变得更加有趣。 饼状...
Java：实现饼图旋转顺序（附带源码）
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
05-11 898
Java：实现饼图旋转顺序（附带源码）
Java：实现创建3D饼图 （附带源码）
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
05-11 645
Java：实现创建3D饼图 （附带源码）
Java：实现绘制饼图的阴影（附带源码）
最新发布
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
05-12 412
Java：实现绘制饼图的阴影（附带源码）
Java：实现逆时针旋转3D饼图（附带源码）
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
05-11 1518
Java：实现逆时针旋转3D饼图（附带源码）
Java：实现创建3D饼图（附带源码）
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
02-21 957
通过本例，我们可以学到如何在 Java 中模拟 3D 图形的效果，尽管 Graphics2D 是一个 2D 图形绘制类库，但结合透明度、渐变色和图层处理等方法，可以达到接近 3D 的效果。如果需要更加复杂的 3D 图形，可以考虑使用专门的 3D 绘图库。
Java：实现加粗饼图分类边框（附带源码）
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
02-21 255
通过这种方式，可以轻松地为饼图添加加粗的分类边框，从而增强图表的可视化效果。
Java：实现绘制椭圆形饼图（附带源码）
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
05-12 639
Java：实现绘制椭圆形饼图（附带源码）
Java：实现设置3D饼图透明度（附带源码）
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
05-11 917
Java：实现设置3D饼图透明度（附带源码）
Java：实现绘制指定角度的填充扇形（附带源码）
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
03-02 909
Java：实现绘制指定角度的填充扇形（附带源码）
FFCPieChart:iOS 饼图
06-30
iOS 中的饼图。 // self.topPieChart = [[FFCPieChart alloc] initWithFrame:...]; // self.middlePieChart = etc. DataItem *dataItem1 = [[DataItem alloc ] initWithColor: [UIColor redColor ] value: 0.4 ...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，我们将详细讨论这个实现过程中的关键知识点。 1. **Echarts图表库**： Echarts是一个基于SVG/VML/Canvas的高性能、跨...
互联网大厂Java求职面试：电商商品推荐系统中的AI技术应用
在未来等你的专栏
05-11 519
面试官：“回家等通知吧。郑薪苦希望下次见面是在工位上！JVM调优：合理配置堆内存和GC策略能够显著提升系统吞吐量。Spring AI：简化了AI模型的集成流程，适合快速开发。向量数据库：解决了传统SQL无法高效处理语义搜索的问题。
centos 7 安装 java 运行环境
abc
05-09 542
centos 7 安装 java 运行环境。
深入浅出 JDBC 与数据库连接池
2403_87729201的博客
05-10 1033
本文介绍了Java开发中与数据库交互的核心技术——JDBC和数据库连接池。JDBC是Java操作数据库的标准API，通过注册驱动、获取连接、执行SQL语句等步骤实现数据库操作。文章详细讲解了JDBC的基础开发步骤，并提供了查询操作的代码示例。此外，文章还介绍了如何通过工具类和配置文件简化JDBC操作，以及JDBC事务管理的概念和操作。最后，文章探讨了数据库连接池的作用和优势，介绍了常见的开源连接池如DBCP、C3P0和Druid，并提供了使用Druid连接池的配置和工具类代码。
DoubleAccumulator源码解析与应用
六月的尾巴
05-09 295
DoubleAccumulator是Java并发包中的一个类，用于在多线程环境下高效地累加双精度浮点数。它通过动态扩展内部变量集来减少线程争用，适用于频繁更新但读取较少的场景。DoubleAccumulator的核心方法包括accumulate用于更新值，get用于获取当前值，以及reset用于重置值。该类不保证线程间的累积顺序，因此不适用于需要数值稳定性的场景。应用示例展示了如何在多线程环境中使用DoubleAccumulator进行并发累加操作，最终获取累加结果。
Java中类初始化和类加载的过程、双亲委派机制
2503_91854778的博客
05-08 1979
初始化之后，我们要对对象头进行设置，我们需要在对象头当中设置（当前对象属于哪个类），另外，根据虚拟机当前运行状态的不同，如是否启用偏向锁等，对象头会有不同的设置方式。类加载检查完之后，我们要在jvm的堆里面为对象分配内存，新生代，一般在新生代的Eden园区，随着GC不断洗礼剩下的会逐步转移。构造函数，即class文件中的方法还没有执行，所有的字段都还为零，对象需要的其他资源和状态信息还没有按照预定的意图构造好。在类加载过程时，现委托父级检查依次向上，当父级无法完成加载时候，当前类才开始加载。
gradle3.5的安装以及配置环境变量
lx2632730145的博客
05-09 419
本文简要介绍了如何下载和配置Gradle 3.5版本。首先，用户需下载Gradle 3.5并解压。接着，配置环境变量，设置变量名为GRADLE_HOME，变量值为bin路径。在Windows 11系统中，需在Path环境变量中添加%GRADLE_HOME%\bin。最后，通过命令提示符输入gradle -v，若能显示版本号，则表明Gradle配置成功。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值