raphael - 使用拉斐尔的半圆

我对使用 raphael js 库很陌生，我正试图弄清楚这一切。我正在尝试根据百分比创建一个图表，其中 100% 将是一个完整的圆圈。我已经弄清楚了圆部分，但是我将如何更改它以显示 50% 的半圆或 25% 的四分之一圆？

最佳答案

我建议查看 Raphael 主页上 this 示例背后的代码。修改它以满足您的需要应该很容易。

这个功能特别是你正在寻找的

var rad = Math.PI / 180;
function sector(cx, cy, r, startAngle, endAngle, params) {
        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);
}

所以，50% 的切片将是

var fifty = sector(100,100,50,0,180,{"fill":"red"});
var twentyfive = sector(100,100,50,180,270,{"fill":"red"});

当然，这适用于度数 - 您可能希望将其包装起来，以便您可以使用百分比。

关于raphael - 使用拉斐尔的半圆，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7447777/