これは、Angular で作成しようとしている円形の親指ドラッガーの静的なデモンストレーションです。 -260 ネガティブ オフセット プレスでわかるように、rinkle-dashoffset="-260" 設定を使用して、親指の後ろの円形パスの終点近くに親指/ドラッガーを配置します。機能することが期待されます。
リーリー
この Angular Stackblitz で同じコードを使用すると、rinkle-dashoffset="-260" の動作が異なります。
これはドラッガーのライブデモです。親指をドラッグしようとすると、ドラッグの速度が「速く」なり、親指がどんどん遠ざかっていきます。なお、オフセット計算に対応する値と、クリックまたはドラッグによって表される度合いが記録される。
https://stackblitz.com/edit/angular-ptzvsm?file=src/main.ts
なぜこれが行われるのかについて何かアイデアはありますか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
提供されている Angular Stackblitz の円形サム ドラッガーの問題は、ストローク ダッシュ オフセット値の誤った計算が原因で発生します。これを修正するには、Stroke-dasharray 値を使用して円形パスの長さを決定し、親指が円の周りを移動する距離に基づいて Stroke-dashoffset
を更新します。