Question

我正在尝试使用位于此处的raphael.js示例：

但我想将饼图转换为圆环图（在所有切片的中间有一个洞）。目前，正在使用以下代码创建每个切片：

function sector(cx, cy, r, startAngle, endAngle, params) {
        //console.log(params.fill);
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }

我如何修改它以便从整个饼中移除一个固定半径的孔？我在这里看到这篇文章，这有所帮助，但我不知道如何或在何处将其应用于我的代码：

How to achieve 'donut holes' with paths in Raphael

Answer 1

如何创建一个饼图的方式如下：

移动到圆圈的中心（cx，cy）：“M”，cx，cy

画一条直到弧线开始的边缘（x1，y1）：“L”，x1，y1

根据一些数学计算绘制弧线：“A”，r，r，0，+（endAngle - startAngle＆gt; 180），0，x2，y2

画一条线回到圆圈的中间：在这种情况下使用“z”;它意味着移动到原点（cx，cy）

并且切片（路径）准备就绪。

要创建甜甜圈，您需要修改路径的组成方式。你需要有一个由2个弧（内部和外部）和2个线组成的路径来完成它。

首先，您需要找到路径的起点，基于将在圆环中间的假想空圆的半径（半径 rin ）。让我们调用这一点的坐标xx1和yy1：

xx1 = cx + rin * Math.cos(-startAngle * rad)
yy1 = cy + rin * Math.sin(-startAngle * rad)

您从这一点开始构建路径（“M”，xx1，yy1 ）; http://jsfiddle.net/EuMQ5/425/

下一步是将线条绘制到圆的边缘（“L”，x1，y1 ）。从那里你将不得不绘制外弧（“A”，r，r，0，+（endAngle - startAngle＆gt; 180），0，x2，y2 ）然后再一行到内弧的另一边（“L”，xx2，yy2 ）。获取xx2和yy2的值：

xx2 = cx + rin * Math.cos(-endAngle * rad)
yy2 = cy + rin * Math.sin(-endAngle * rad)

最后一步是通过绘制内弧（“A”，rin，rin，0，+（endAngle - startAngle＆gt; 180），1，xx1，yy1 来完成路径）。现在你有一块甜甜圈。

The fiddle is here.

**更新了小提琴链接

Answer 2

为什么不在饼图的中心画圆圈？

paper.add([
    {
        type: "circle",
        cx: 250,
        cy: 250,
        r: 150,
        fill: "#ffffff"
    },
]);

raphael.js - 将饼图转换为甜甜圈图

2 个答案: