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.rect(0, 0, 90, 8).attr({fill: '#fff', 'stroke-width': '0'}), [90, 4]);

        g.arrow(r.path('M 15,20 0,10 15,0 z').attr({fill: '#fff', 'stroke-width': '0'}).translate(0, 90), [0, 20]);



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

ここでプレビューできますhttp://jsfiddle.net/creativestudio/VH3fR/10/

4

1 に答える 1

3

作業中のフィドル（クイックフィックス）を参照してください：http：//jsfiddle.net/VH3fR/13/

これが最善の解決策かどうかはわかりません。パスを作成して変換する代わりに、必要な位置に直接パスを作成しました。

この動作の理由は、moveメソッドのソースコードを見ると、ポインターを取得し、ポインターの回転に変換メソッドを適用します。これにより、呼び出したtranslateメソッドがオーバーライドされます。

代替ソリューション

http://jsfiddle.net/VH3fR/14/

ここでは、長方形を削除し、パスを使用して直接矢印を作成しました。

于 2012-09-28T09:13:43.780 に答える