主页 / 问题 / 1602451
Accepted
peirw
Asked:2024-12-15 03:30:35 +0000 UTC2024-12-15 03:30:35 +0000 UTC

根据VUE传输的值逐步填充圆弧

  • 772

我不确定如何根据变量的值来实现填充向量。有一个圆形向量，需要根据“{{characters[i].mainLVL }}”的值填充红色。在VUE中我写了 - mailLVL: 0;我将非常感谢任何可以提供帮助的人！如果有的话，这是界面的一部分。下面是如何填写的屏幕截图

<div class="vectorlevel" width="100%" height="100%">
                <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 60C0 93.1371 26.8629 120 60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60ZM111 60C111 88.1665 88.1665 111 60 111C31.8335 111 9 88.1665 9 60C9 31.8335 31.8335 9 60 9C88.1665 9 111 31.8335 111 60Z" fill="#191A1E" fill-opacity="0.7"/>
                    <text x="50%"
                          y="50%"
                          text-anchor="middle"
                          font-style="normal"
                          font-family="Gilroy"
                          font-weight="700"
                          line-height="36"
                          font-size="30"
                          fill="white">
                        {{ characters[i].mainLVL }}
                    </text>
                    <text 
                          x="50%" 
                          y="65%"  
                          text-anchor="middle" 
                          font-style="normal"
                          font-family="Gilroy"
                          font-weight= "600"
                          line-height="21"
                          font-size="18" 
                          fill="rgba(255, 255, 255, 0.3)">
                          Уровень
                    </text>
                </svg>
            </div>


VUE JS:    var characterInfo = new Vue({
el: "#characterInfo",
data: {
    show: false,
    mainLVL: 0,

database: mainLVL: {
            type: DataTypes.INTEGER(11),
            defaultValue: 0,
            allowNull: false,

应该用红色填充

javascript

2 个回答

  1. 填充现有路径的动画是不可能的，因为该形状具有双路径
    ，请参见下图：

    在此输入图像描述

    • 要实现动画，需要删除一个轮廓；最好删除外轮廓。参见红色箭头

    。

    在此输入图像描述

    现在您需要将文件保存为 *.svg 格式

    代码：

    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"  style="background:#1D1F25">
  <path d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" style="stroke:#BE1018;stroke-width:8"/>
  </svg>

    • 要执行轮廓填充动画，您需要知道最大长度。这是使用 JS 方法完成的： getTotalLength()

    let path = document.querySelector(".shape");
let length = path.getTotalLength();
console.log(length);
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"  style="background:#1D1F25">
  <path class="shape" d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" style="stroke:#BE1018;stroke-width:8"/>
  </svg>

    路径长度：320.48773193359375 ~ 320.5 像素

    该值将用于路径填充动画

    代码：

    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"  style="background:#1D1F25">
    
  <path class="shape" stroke-dashoffset="320.5" stroke-dasharray="320.5" transform="rotate(-90 60 60)" d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" style="stroke:#BE1018;stroke-width:8">
   <animate attributeName="stroke-dashoffset"  dur="7s" values="320.5;0"  repeatCount="indefinite" />
  </path> 
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="22"  >Уровень </text>
  
  </svg>

    • 0
  2. Best Answer

    您需要根据玩家的级别并设置最大值来实现填充本身。

    整个圆的长度 = 320px
    假设我们有 8 个游戏关卡，那么一个扇形（关卡）的长度
    为 320 / 8 = 40

    为了根据玩家的等级填充圆圈，我们将使用

    stroke-dasharray= dash space，其中
    dash 是笔划间隙的长度，是空格

    在 处stroke-dasharray= 40 320，圆的第一个扇区将被填充，它对应于第一层。

    <svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />

 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="40 280" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
    <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 1 </text>
  
  </svg>

    Level2
    笔划-dasharray="80 240"

    <svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />

 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="80 240" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
   
 
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 2 </text>
  
  </svg>

    Level3
    笔划-dasharray="120 200"

    <svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />

 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="120 200" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
   
 
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 3 </text>
  
  </svg>

    Level4
    笔画-dasharray="160 160"

    <svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="160 160" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 4 </text>
  
  </svg>

    5级
    行程-dasharray =“200 120”

    <svg xmlns="http://www.w3.org/2000/svg"  width="240" height="240" viewBox="0 0 120 120"  >
    
  <path class="trace" transform="rotate(-90 60 60)" fill="#1A1B20" stroke="grey" stroke-width="6" stroke-dashoffset="0" stroke-dasharray="320" 
    d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
 <path class="level" transform="rotate(-90 60 60)" fill="#1A1B20" stroke-dashoffset="320"
    stroke-dasharray="200 120" stroke="#BE1018" stroke-width="6"
     d="M111 60A51 51 0 1 1 9 60a51 51 0 0 1 102 0z" />
 
   <text x="50%" y="50%" stroke="white" text-anchor="middle" font-family="Gilroy" font-weight= "600" font-size="18"  >Уровень 5 </text>
  
  </svg>

    • 0

相关问题