Half circle using raphael

问题

I'm very new to using raphael js library and I'm trying to figure it all out. I'm trying to create a chart based on percentages where 100% would be a full circle. The circle part I have figured out, but how would I go about changing it to show a half-circle for 50% or a quarter of a circle for 25%?

回答1:

I recommend looking at the code behind this example on the Raphael home page. It should be easy enough to modify it to suit your needs.

This function in particular is what you're looking for

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

so, a 50% slice would be

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

Of course, this is working with degrees - you may want to wrap it so that you can use percentages.

回答2:

You have to use path() and specify it using SVG's path syntax. Here is an example of creating a closed quarter-circle (upper left quadrant):

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

See this link for more on SVG Paths.

来源：https://stackoverflow.com/questions/7447777/half-circle-using-raphael

标签

raphael