简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Create a circular SVG temperature dragger in Angular?
P粉135799949
P粉135799949 2024-04-03 09:33:29
0
1
392

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?

P粉135799949
P粉135799949

reply all(1)
P粉176151589
P粉1761515892024-04-04 00:57:57 1 floor

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.
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！