2

raphael jsを使用してポインターパスにパス矢印を追加する方法は? 運が悪いので追加しようとしました。

これはジャバスクリプトです

<script type="text/javascript">

    $(function(){
        var r = Raphael("gauge_bg2", 200, 200);
        var g = r.gauge(0, 180);


        g.bg(r.circle(100, 100, 100).attr({fill:'#193442','stroke-width': '0'}), [100, 100]);

        g.pointer(r.rect(0, 0, 100, 10).attr({fill: '#fff', 'stroke-width': '0'}), [100, 5]);

//      g.Arrowshape(r.triangle(300, 0, 100).attr({fill:'#193442','stroke-width': '0'}), [100, 100]);

        setInterval(function(){
            var percent = Math.floor(Math.random()*100);
            g.move(percent);
        }, 3000);
    });

</script>

http://jsfiddle.net/creativestudio/VH3fR/3/を作成しました

4

2 に答える 2

3

2 つのオプションがあります。1 つは、Raphael.Set を使用してポインター パスと矢印を結合することです。もう 1 つは、ポインターの rect() をより一般的な path() に置き換えて、そこに矢印を描画することです。矢印のコードは次のようになります。 

    paper.path("M{0},{1}L{2},{3}L{4},{5}M{2},{3}L{4},{6}", a.x, a.y, b.x, b.y, b.x - length, b.y - width, b.y + width);

ここでa、 とbは始点と終点でありlength、 とwidthは矢頭を表します。これは「塗りつぶす」のではなく「なでる」必要があることに注意してください。ただし、実線の矢印も簡単に作成できます。

于 2012-09-27T09:40:20.527 に答える
0

できました、これが更新されたスクリプトです。

    $(function(){
        var r = Raphael("gauge", 200, 200);
        var g = r.gauge(0, 180);

        g.bg(r.circle(100, 100, 100).attr({fill:'','stroke-width': '0'}), [100, 100]);

        g.pointer(r.path('M 80,96 15,96 15,90 0,100 15,110 15,104 80,104 100,104 100,96 z').attr({fill: '#fff', 'stroke-width': '0'}).transform(""), [0, 0]);

        setInterval(function(){
            var percent = Math.floor(Math.random()*100);
            g.move(percent);
        }, 3000);
    });

更新された jsFiddle は次のとおりですhttp://jsfiddle.net/creativestudio/VH3fR/11/

于 2012-09-27T21:33:15.420 に答える