javascript - raphael.js - 将饼图转换为圆环图

Question

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

http://raphaeljs.com/pie.html

但我想将饼图转换为圆环图(所有切片中间有一个洞)。目前，每个切片都是使用以下代码创建的:

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

一 block 馅饼的制作方法是这样的:

1. move to the center of the circle (cx,cy): "M", cx, cy
2. draw a line until the edge, where the arc will start (x1,y1): "L", x1, y1
3. draw an arc based on some mathematical calculations: "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2
4. draw a line back to the middle of the circle: in this case "z" is used; it means move to origin(cx,cy)

切片(路径)准备就绪。

为了创建 donut ，您需要修改路径的组成方式。您需要有一条由 2 条弧(内部和外部)和 2 条线组成的路径才能完成。

因此，首先您需要根据位于 donut 中间的假想空心圆的半径(半径为 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 > 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 > 180), 1, xx1, yy1 ) .现在你有了一 block donut 。

The fiddle is here.

**更新的 fiddle 链接