简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Créer un curseur de température SVG circulaire dans Angular ?
P粉135799949
P粉135799949 2024-04-03 09:33:29
0
1
386

Il s'agit d'une démonstration statique du curseur de pouce circulaire que j'essaie de créer dans Angular. Cela fonctionne comme prévu en utilisant rinkle-dashoffset="-260" 设置将拇指/拖动器定位在靠近拇指后面的圆形路径的末端，可以看出 -260 décalage négatif. 

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

Lorsque j'utilise le même code dans cet Angular Stackblitz, rinkle-dashoffset="-260" fonctionne différemment.

Ceci est une démo de dragger en direct. Si vous essayez de faire glisser votre pouce, le déplacement « accélérera » et poussera votre pouce de plus en plus loin. A noter que la valeur correspondant au calcul du décalage et le degré représenté par le clic ou le glisser sont enregistrés.

https://stackblitz.com/edit/angular-ptzvsm?file=src%2Fmain.ts

Des idées sur la raison pour laquelle cela est fait ?

P粉135799949
P粉135799949

répondre à tous(1)
P粉176151589
P粉1761515892024-04-04 00:57:57 1 plancher

Le problème avec le curseur de pouce circulaire dans Angular Stackblitz est dû à un calcul incorrect de la valeur du décalage de trait. Pour résoudre ce problème, vous pouvez utiliser la valeur Stroke-dasharray pour déterminer la longueur du chemin circulaire et mettre à jour le Stroke-dashoffset en fonction de la distance parcourue par votre pouce autour du cercle

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！