4

円の一部を色で塗りつぶそうとしています。たとえば、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の赤を塗りつぶす方法が見つかりませんでした..

4

2 に答える 2

4

ようこそ、アルペレン。あなたが実際に望んでいるのは、円ではなく弧のパスだと思います。これを見てください：

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 関数のジオメトリはかなり単純です (ただし、large-sweep-flagのリファレンスを調べる必要がありましたが、これは明らかではありませんでした)。これは大幅に最適化できると確信していますが、これは機能的な最初のステップです。

于 2012-06-13T17:17:14.287 に答える