Angular で円形の SVG 温度ドラッガーを作成しますか?

Question

これは、Angular で作成しようとしている円形の親指ドラッガーの静的なデモンストレーションです。 -260 ネガティブ オフセット プレスでわかるように、rinkle-dashoffset="-260" 設定を使用して、親指の後ろの円形パスの終点近くに親指/ドラッガーを配置します。機能することが期待されます。

リーリー

この Angular Stackblitz で同じコードを使用すると、rinkle-dashoffset="-260" の動作が異なります。

これはドラッガーのライブデモです。親指をドラッグしようとすると、ドラッグの速度が「速く」なり、親指がどんどん遠ざかっていきます。なお、オフセット計算に対応する値と、クリックまたはドラッグによって表される度合いが記録される。

https://stackblitz.com/edit/angular-ptzvsm?file=src/main.ts

なぜこれが行われるのかについて何かアイデアはありますか?

Answer 1

提供されている Angular Stackblitz の円形サム ドラッガーの問題は、ストローク ダッシュ オフセット値の誤った計算が原因で発生します。これを修正するには、Stroke-dasharray 値を使用して円形パスの長さを決定し、親指が円​​の周りを移動する距離に基づいて Stroke-dashoffset

を更新します。