This is a static demonstration of the circular thumb dragger I'm trying to create in Angular. It uses the rinkle-dashoffset="-260" setting to position the thumb/dragger near the end of the circular path behind the thumb, as can be seen -260 Negative Offset Press Expected to work.
<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>
When I use the same code in this Angular Stackblitz, rinkle-dashoffset="-260" works differently.
This is a live dragger demo. If you try to drag your thumb, the drag will "speed up" and push your thumb further and further away. Note that the value corresponding to the offset calculation and the degree represented by the click or drag are recorded.
https://stackblitz.com/edit/angular-ptzvsm?file=src/main.ts
Any ideas on why this is done?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The problem with the circular thumb dragger in the provided Angular Stackblitz is caused by an incorrect calculation of the stroke-dashoffset value. To fix this, you can use the Stroke-dasharray value to determine the length of the circular path and update the Stroke-dashoffset
based on how far your thumb moves around the circle.