Question

如何填充给定圈子的各个部分？

var paper = Raphael(0, 0, 500, 500);

function NGon(x, y, N, side, angle) {
    paper.circle(x, y, 3).attr("fill", "black");

    var path = [],
        c, temp_x, temp_y, theta;

    for (c = 0; c <= N; c += 1) {
        theta = (c + 0.5) / N * 2 * Math.PI;
        temp_x = x + Math.cos(theta) * side;
        temp_y = y + Math.sin(theta) * side;
        path.push(["M",x,y])
        path.push(["L",temp_x,temp_y])
    }
    return path;
}

paper.path(NGon(50, 50, 8, 20));
paper.circle(50,50,20)

see fiddle。

Answer 1

也许像

circ = paper.circle(50,50,20);
poly = paper.path(NGon(50, 50, 5, 20));
circ.attr("fill", "#f00");
poly.attr("fill","#fff");

这具有在多边形和圆形之间着色部分的效果。

Answer 2

使用具有相同x和y半径的svg路径线类型A“椭圆弧”。

您可以根据需要填充尽可能多的零件。

"A rX rY x-axis-rotation large-arc-flag sweep-flag x y"

为X和Y赋予相同的半径，将x轴旋转和大弧标志保持为0，将扫描标志保持为1，非常重要的是最终点必须是假想的完整圆的一部分。它将绘制一个完美的圆弧。

http://jsfiddle.net/crockz/d0xL6590/

更改小提琴上的部件数量，看它是否正常工作。

如何填充给定圆的各个部分？

2 个答案: