使用raphael的半圈

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

当然,这是使用学位 - 你可能想要包装它,以便你可以使用百分比.