Buat penyeret suhu SVG bulat dalam Angular?
Ini ialah demonstrasi statik penyeret ibu jari bulat yang saya cuba buat dalam Angular. Ia berfungsi seperti yang diharapkan menggunakan rinkle-dashoffset="-260" 设置将拇指/拖动器定位在靠近拇指后面的圆形路径的末端，可以看出 -260 offset negatif.
<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>
Apabila saya menggunakan kod yang sama dalam Angular Stackblitz ini, rinkle-dashoffset="-260" berfungsi secara berbeza.
Ini ialah demo penyeret secara langsung. Jika anda cuba menyeret ibu jari anda, seretan akan "mempercepatkan" dan menolak ibu jari anda semakin jauh. Ambil perhatian bahawa nilai yang sepadan dengan pengiraan offset dan darjah yang diwakili oleh klik atau seretan direkodkan.
https://stackblitz.com/edit/angular-ptzvsm?file=src%2Fmain.ts
Ada idea tentang mengapa ini dilakukan?
