Angular에서 원형 SVG 온도 드래거를 만드시겠습니까?

Question

이것은 제가 Angular에서 만들려고 하는 원형 썸 드래거의 정적 데모입니다. rinkle-dashoffset="-260" 设置将拇指/拖动器定位在靠近拇指后面的圆形路径的末端，可以看出 -260 음수 오프셋을 사용하면 예상대로 작동합니다.

으아아아

이 Angular Stackblitz에서 동일한 코드를 사용하면 rinkle-dashoffset="-260" 다르게 작동합니다.

이것은 라이브 드래거 데모입니다. 엄지손가락을 드래그하려고 하면 드래그 속도가 빨라지고 엄지손가락이 점점 더 멀어지게 됩니다. 오프셋 계산에 해당하는 값과 클릭 또는 드래그로 표시되는 정도가 기록됩니다.

https://stackblitz.com/edit/angular-ptzvsm?file=src%2Fmain.ts

이 작업이 수행되는 이유에 대한 아이디어가 있습니까?

Answer 1

Angular Stackblitz의 원형 썸 드래거 문제는 스트로크-대시 오프셋 값의 잘못된 계산으로 인해 발생합니다. 이 문제를 해결하려면 Stroke-dasharray 값을 사용하여 원형 경로의 길이를 결정하고 엄지손가락이 원 주위에서 움직이는 거리에 따라 Stroke-dashoffset을 업데이트할 수 있습니다