1

パーセンテージを計算するために justGage (Raphael JS コードを使用) でいくつかのトリックをコーディングしようとしましたが、数式 :( .

ポイントは次のとおりです。svg justGage を歓迎する幅 400px の div があります。マウスクリックに続いて塗りつぶしたいと思います。たとえば、半円の右下をクリックすると、100% 塗りつぶされたかのように塗りつぶされます。左下をクリックして、0%で塗りつぶします。問題は、マウスの位置をキャッチし、それを使用してゲージを更新しようとすることですが、X 軸のみで作業すると円の形状に従っていません。

これが私の基本的な計算です：

    var parentOffset = $(this).offset(); 
    var relX = e.pageX - parentOffset.left;
    g1.refresh(Math.round((relX)/4));

そして、コード全体のテストfiddle .

円の形を実際にたどる公式を知っている人はいますか？

4

2 に答える 2

1

計算に関するドラフトは次のとおりです。 下書き

于 2013-01-21T11:09:12.153 に答える
0

クリックが発生するストリップがあるため、割合を決定するために x 座標に依存することはできません。私が考えることができる最良のオプションは、三角法を使用してクリックと円の中心の間の角度を計算してから、この式 ( (angel/Math.PI)*100) によって範囲 0 ～ 100 に適合させることでした。

以下は、私にとってうまくいったコードスニペットです。

$(function(){
    $("#g1 path").click(function(e){
        var parent = $(this).parent();
        var height = parent.height();
        var width = parent.width();
        var center = {'x': width/2, 'y':(height-60)};
        var angle = Math.atan2(-(e.pageY - center['y']), center['x'] - e.pageX);
        g1.refresh(Math.round((angle/Math.PI)*100));  
    });
})
于 2013-01-21T10:56:25.770 に答える