RaphaëlJSとSVGを使用してセクタパスのサイズを変更するよりエレガントな方法はありますか？

Question

私はほとんど経験していない初めてRaphaëlを使用しています。私は本当にこの2つに精通している人が私を助けてくれる人が必要です。

私は動的セクタを持つ円グラフを作成しました。セクターは、丸いボタンをドラッグしてサイズを変更することができます。 this fiddleを参照してください。唯一必要なブラウザであるChromeとSafariでテストしました。

円グラフはまだ完成していません。 セクタが重複する可能性があります。今はこれを無視してください。

セクタの開始角度が終了角度より大きい場合、私は問題に直面しました。これは、終了角度が0/360°マークを超えた場合です。これを解決するために、私はパスローテーション - パラメータを利用しました。背中の角度を移動させながら、終了角度が360になるまで、私はあなたがこの機能にはフィドルでこれを見ることができ、前方のセクターを移動：

function sector_update(cx, cy, r, startAngle, endAngle, sec) { 
    var x1 = cx + r * Math.cos(-startAngle * rad), 
     x2 = cx + r * Math.cos(-endAngle * rad), 
     y1 = cy + r * Math.sin(-startAngle * rad), 
     y2 = cy + r * Math.sin(-endAngle * rad); 


    var rotation = 0; 

    // This is the part that I have the feeling could be improved. 
    // Remove the entire if-clause and let "rotation" equal 0 to see what happens 
    if (startAngle > endAngle) { 
     rotation = endAngle; 
     startAngle = startAngle - endAngle; 
     endAngle = 360; 
    } 

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, rotation, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]); 
} 

それがうまく動作しますが、私は少し懐疑的です。パスを回転させることなくこれを解決できますか？助けや指導に感謝します。

Answer 1

Can this be solved without the rotation of the path?

回答：はい、それができる。パスの回転をまったく変更する必要はありません。私は何かが欠けていない限り、次のコードは、フィドルに持っているものと同じように動作するようです：

function sector_update(cx, cy, r, startAngle, endAngle, sec) { 
    var x1 = cx + r * Math.cos(-startAngle * rad), 
     x2 = cx + r * Math.cos(-endAngle * rad), 
     y1 = cy + r * Math.sin(-startAngle * rad), 
     y2 = cy + r * Math.sin(-endAngle * rad); 

    //notice there is no "roation" variable 
    if (startAngle > endAngle) { 
     startAngle -= endAngle; 
     endAngle = 360; 
    } 

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, 0, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]); 
} 

説明：私の説明のために、私は W3 SpecとRaphael Reference LibraryでSVGの用語を使用します。つまり、cx、cy、およびrotationを使用していますが、それぞれrx,ryおよびx-axis-rotationを使用しています。要するに

、rxはryに等しいときはいつでも、次にx-axis-rotationは無意味です。

this SVGをご覧ください。ブラウザの開発ツールを使用するか、SVGをコンピュータに保存し、ファイルエディタを使用して編集します。具体的には、最後のpath要素を見てください。要素には4つの弧があります。各円弧の値をx-axis-rotationに変更してみてください。 x-axis-rotationの値を更新すると、最初の円弧（rxとryは両方とも "25"です）が変わらないことがわかります。

なぜですか？これは円弧があるためです。どのくらい円を回転させても、それは同じ円になります。たとえば、ガラスが地面に対して水平になるようにガラスを手前に置くと、ガラスの真下を眺めています。あなたの手首でガラスを回転/ひねります。あなたは、あなたが見る円形の形が同じ円形の形をしているのを見ますか？今度はガラスをテーブルの上に普通に置いてください（垂直になり、液体を保持できるようになります）。今度はガラスをこすります。明らかな視点の変化を見ることができます。それは上を向いていましたが、今は平らになっています。それはx-axis-rotationのことです。

おそらくもっと良い例は、前述のSVGファイルで遊んでいるだけです。最後のpath要素のアークでx-axis-rotationを再生します。円弧が回転しています。それはx-axis-rotationのことです。

コードに戻る：円形オブジェクトのみを扱うため、x-axis-rotationは最終出力に違いはありません。 円オブジェクトを扱うのはなので、心配することなく0にハードコードすることができます。本当に必要なのは、正しく行ったアングルを変更することだけです。

パフォーマンス：私はとx-axis-rotation変数を変更することなく、両方のあなたのsector_update機能を時間を計るためにはJavaScriptを使用してみました。結果？パフォーマンスに違いは見られませんでした。大部分の時間はSVGを実際に描くことであり、価値を決定する数学ではありません。実際、JavaScriptで実際に行っているのは、コードを更新してpath要素の値を設定することだけです。その時点で、ブラウザはレンダリングエンジンを引き継ぎ、実際にSVGオブジェクトを描画します。ブラウザごとに異なるレンダリングパフォーマンスがあるので、それはブラウザごとの問題だと思います。しかし、x-axis-rotationの値に影響があるかどうかは私の推測ではありません。 がの場合（ブラウザーが追加の浮動小数点演算を実行する可能性があるため）、圧倒的多数の時間がオブジェクトの描画に費やされ、その値を計算するのではなく、非常に疑わしいです。だから私はそれについて心配しないと言います。

私が何かを見逃してしまったか、何か十分に説明していないかどうか教えてください。