使用拉斐尔的半圆 [英] Half circle using raphael

问题描述

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

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%?

推荐答案

我建议查看 this 背后的代码 拉斐尔主页上的示例.修改它以满足您的需要应该很容易.

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

所以，50% 的切片将是

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.

这篇关于使用拉斐尔的半圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！