Il s'agit d'une démonstration statique du curseur de pouce circulaire que j'essaie de créer dans Angular. Cela fonctionne comme prévu en utilisant rinkle-dashoffset="-260" 设置将拇指/拖动器定位在靠近拇指后面的圆形路径的末端，可以看出 -260 décalage négatif.
<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>
Lorsque j'utilise le même code dans cet Angular Stackblitz, rinkle-dashoffset="-260" fonctionne différemment.
Ceci est une démo de dragger en direct. Si vous essayez de faire glisser votre pouce, le déplacement « accélérera » et poussera votre pouce de plus en plus loin. A noter que la valeur correspondant au calcul du décalage et le degré représenté par le clic ou le glisser sont enregistrés.
https://stackblitz.com/edit/angular-ptzvsm?file=src%2Fmain.ts
Des idées sur la raison pour laquelle cela est fait ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le problème avec le curseur de pouce circulaire dans Angular Stackblitz est dû à un calcul incorrect de la valeur du décalage de trait. Pour résoudre ce problème, vous pouvez utiliser la valeur Stroke-dasharray pour déterminer la longueur du chemin circulaire et mettre à jour le Stroke-dashoffset en fonction de la distance parcourue par votre pouce autour du cercle