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);
    }

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

如何在拉斐尔的路径上实现"甜甜圈洞"

Answer 1

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

1. 移动到圆心(cx,cy):"M",cx,cy
2. 画一条直到边缘,弧将开始(x1,y1):"L",x1,y1
3. 基于一些数学计算绘制弧:"A",r,r,0,+(endAngle - startAngle> 180),0,x2,y2
4. 画一条线回到圆圈的中间:在这种情况下使用"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> 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)来完成路径.现在你有一块甜甜圈.

小提琴在这里.

**更新小提琴链接