這是我嘗試在 Angular 中創建的圓形拇指拖曳器的靜態演示。它使用rinkle-dashoffset="-260" 設定將拇指/拖曳器定位在靠近拇指後面的圓形路徑的末端，可以看出-260 負偏移按預期工作。
<body style="width: 200px; height: 200px;">
<svg
(mousedown)="onMouseDown($event)"
#svgRoot
id="svgclick"
version="1.1"
viewBox="0 0 79.375 79.375"
xmlns="http://www.w3.org/2000/svg"
>
<path
transform="rotate(90)"
d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6"
fill="none"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="10.583"
/>
<path
#thumb
transform="rotate(90)"
d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke="#F66"
stroke-width="18"
pathlength="270"
stroke-dasharray="0 270"
stroke-dashoffset="-260"
id="thumb"
/>
</svg>
</body>
當我在此 Angular Stackblitz 中使用相同的程式碼時，rinkle-dashoffset="-260" 的工作方式不同。
這是一個即時拖曳器演示。如果您嘗試拖曳拇指，拖曳會「加速」並將拇指推得越來越遠。請注意，會記錄與偏移計算相對應的值以及按一下或拖曳所代表的度數。
https://stackblitz.com/edit/angular-ptzvsm?file=src/main.ts
關於為什麼這樣做有什麼想法嗎？
所提供的 Angular Stackblitz 中的圓形拇指拖曳器的問題是由對描邊-dashoffset 值的錯誤計算引起的。要解決此問題，您可以使用Stroke-dasharray值來確定圓形路徑的長度，並根據拇指繞圓移動的距離更新Stroke-dashoffset
#