使用拉斐尔的半圆答案

【问题标题】：Half circle using raphael使用拉斐尔的半圆
【发布时间】：2011-09-16 16:30:18
【问题描述】：

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

【问题讨论】：

【解决方案1】：

我建议查看 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"});

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

【讨论】：

【解决方案2】：

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

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

有关 SVG 路径的更多信息，请参阅 this link。

【讨论】：