简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Buat penyeret suhu SVG bulat dalam Angular?
P粉135799949
P粉135799949 2024-04-03 09:33:29
0
1
390

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?

P粉135799949
P粉135799949

membalas semua(1)
P粉176151589
P粉1761515892024-04-04 00:57:57 Tingkat 1

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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！