Javascript 使用Raphael JS，部分填充一个圆

我试图用颜色填充圆的一部分。例如，有一个2/3红色和1/3空的圆

Raphael JS文档帮助不大。最好的方法是什么

下图显示了一些示例：

var paper = new Raphael(document.getElementById('shape_container'), 400, 100);
var circle = paper.circle(50, 50, 30);
circle.attr (
        {
            fill: '#F00'
        }
    );

用上面的代码，我可以画一个充满红色的圆圈。。

---

我找不到任何方法来填充2/3的红色。

欢迎，阿尔佩伦。我相信你真正想要的是一条弧线而不是一个圆。看看这个：

function arcpath( canvas, x, y, r, ratio )
{
    if ( ratio >= 1.0 ) return canvas.circle( x, y, r );
    var degrees = 360 * ratio;  //  we use this to determine whether to use the large-sweep-flag or not
    var radians = ( Math.PI * 2 * ratio ) - Math.PI / 2;    //  this is actually the angle of the terminal point on the circle's circumference -- up is Math.PI / 2, so we need to subtract that out.
    var pathparts = 
    [
        "M" + x + "," + y,
        "v" + ( 0 - r ),
        "A" + r + "," + r + " " + degrees + " " + ( degrees >= 180 ? "1" : "0" ) + " 1 " + ( x + ( r * Math.cos( radians ) ) ) + "," + ( y + ( r * Math.sin( radians ) ) ),
        "z"
    ];

    return canvas.path( pathparts );
}

var partial_circle = arcpath( canvas, 250, 350, 100, 0.75 ).attr( { fill: mapit_red, stroke: mapit_black } );

---

arcpath函数中的几何结构相当简单（尽管我必须查找参考，这显然是不明显的）。我确信这可以得到实质性的优化，但这是功能性的第一步。

我为此编写了一个RaphaelJS自定义属性。它可以设置动画，因此您可以控制切片的旋转/大小，并创建甜甜圈或部分甜甜圈形状

paper.customAttributes.filledArc = function(e,t,n,r,i,s){var o=360;if(o==i){i-=.001}i+=s;var u=(90-s)*Math.PI/180,a=e+n*Math.cos(u),f=t-n*Math.sin(u),l=e+(n-r)*Math.cos(u),c=t-(n-r)*Math.sin(u);var h=(90-i)*Math.PI/180,p=e+n*Math.cos(h),d=t-n*Math.sin(h),v=e+(n-r)*Math.cos(h),m=t-(n-r)*Math.sin(h);return{path:[["M",l,c],["L",a,f],["A",n,n,0,+(i>180+s),1,p,d],["L",v,m],["A",n-r,n-r,1,+(i>180+s),0,l,c]]}}

然后：

paper.path().attr( {
    filledArc: [x,y,radius,width,degrees,rotation]
    fill: mapit_red,
    stroke: mapit_black
} );

---

嗨，欢迎来到SO！请试着阅读我们的文章。这个问题有点不完整。你到底试过什么？为什么你不能做你想做的？我试图添加一个截图，但它不让我，因为我是一个新成员。无论如何，我可以画矩形或圆形，我可以用我想要的颜色填充它们。但问题是我想填充一个形状的特定百分比，比如说3/8。我也是拉斐尔的新手，我试着阅读拉斐尔的参考文献，但我仍然不知道如何做到这一点。。我希望我的问题现在更清楚了。好的，我把你的问题编辑得更清楚一点。您仍然应该附加一些代码来向我们展示您的尝试；感谢您的编辑，我添加了一些示例和一段代码。看起来您可以使用图表插件。你试过了吗？文档是垃圾，很难理解，但除此之外，用纯拉斐尔获得你想要的东西将是很困难的。