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?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Isu dengan penyeret ibu jari bulat dalam Angular Stackblitz disebabkan oleh pengiraan nilai set pemuka lejang yang salah. Untuk membetulkannya, anda boleh menggunakan nilai Stroke-dasharray untuk menentukan panjang laluan bulatan dan mengemas kini Stroke-dashoffset berdasarkan sejauh mana ibu jari anda bergerak mengelilingi bulatan