简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
在 Angular 中创建圆形 SVG 温度拖动器？
P粉135799949
P粉135799949 2024-04-03 09:33:29
0
1
385

这是我尝试在 Angular 中创建的圆形拇指拖动器的静态演示。它使用 rinkle-dashoffset="-260" 设置将拇指/拖动器定位在靠近拇指后面的圆形路径的末端，可以看出 -260 负偏移按预期工作。

    <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>

当我在此 Angular Stackblitz 中使用相同的代码时，rinkle-dashoffset="-260" 的工作方式不同。

这是一个实时拖动器演示。如果您尝试拖动拇指，拖动会“加速”并将拇指推得越来越远。请注意，会记录与偏移计算相对应的值以及单击或拖动所代表的度数。

https://stackblitz.com/edit/angular-ptzvsm?file=src/main.ts

关于为什么这样做有什么想法吗？

P粉135799949
P粉135799949

全部回复(1)
P粉176151589
P粉1761515892024-04-04 00:57:57 1 楼

所提供的 Angular Stackblitz 中的圆形拇指拖动器的问题是由对描边-dashoffset 值的错误计算引起的。要解决此问题，您可以使用Stroke-dasharray值来确定圆形路径的长度，并根据拇指绕圆移动的距离更新Stroke-dashoffset

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！