使用拉斐尔半圆

Question

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

Answer 1

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

这个函数特别是你正在寻找的

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

，这与度数一起工作 - 你可能想要将它包装起来，以便你可以使用百分比。

Answer 2

您必须使用 path() 并使用 SVG 的路径语法指定它。以下是创建闭合四分之一圆（左上象限）的示例：

var arcPath = paper2.path("M200,200 v-150 a150,150 0 0,0 -150,150 z");
arcPath.attr("fill", "red");

请参阅此链接< /a> 有关 SVG 路径的更多信息。