【十】环形进度条组件

关于专题【vue开发音乐App】

本篇介绍底部快捷控件的环形进度条的实现方法：通过svg绘制两个环，线条模糊的环作为背景、线条明亮的环根据传入的百分比绘制相应长度（即进度）。该组件同样属于基础组件，在src/base/progress-circle/目录下新建progress-circle.vue：

样式部分

<style lang="stylus" rel="stylesheet/stylus">
  // variable.styl传送门：https://blog.wy310.cn/2020/01/11/vue-build-basic-style-structure/
  @import "~common/stylus/variable"

  .progress-circle
    position: relative
    circle
      stroke-width: 8px
      transform-origin: center
      &.progress-bg
        transform: scale(0.9)
        stroke: $color-theme-d
      &.progress-bar
        transform: scale(0.9) rotate(-90deg)
        stroke: $color-theme
</style>

• 这里先贴出样式代码，circle统一设置了描边宽度为8px（这里的8px会根据后面介绍的svg的宽高动态变化，不是绝对的8像素长度，而是8%），背景圆的描边颜色为$color-theme-d（rgba(255, 205, 49, 0.5)），进度圆的描边颜色为$color-theme（#ffcd32），另外，还让进度圆环逆时针旋转90度，以让它的起始点在最高处（旋转之前起始点在最右侧），以实现歌曲环形进度条以顶部为起点顺时针旋转的业务需求。

DOM部分

<template>
  <div class="progress-circle">
    <svg :width="length" :height="length" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <!--背景圆环：线条模糊-->
      <circle class="progress-bg" r="50" cx="50" cy="50" fill="transparent"></circle>
      <!--进度圆环：线条明亮-->
      <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dasharray" :stroke-dashoffset="dashoffset"></circle>
    </svg>
  </div>
</template>

• svg标签的viewBox的四个参数分别表示：最小横坐标值、最小纵坐标值、宽度、高度。前面两个参数，个人觉得除非对svg的内部做整体偏移，否则一般都是“0, 0”，即svg的左上角（为起点）；后面两个参数，我们暂时把它们理解成比例或者等份，“100, 100”代表宽和高都设置成100等份，注意它们的单位不是px，为什么这么说呢？因为我们发现，svg标签上还又两个属性：width和height，它们的单位才是px（length变量将在后面的代码中被赋予80），也是真正决定svg宽高的属性（即svg真实宽高其实是length个像素的长度，也就是80px），那么viewBox后两个参数中的一份就表示length / 100个像素的长度（length为50，一份就等于0.5px；为80，就是0.8px；为100，就是1px……）。所以一般为了方便计算，我们都会设置一个整数值，如100（等份），而不会是一个不能被任何数整除的质数，如123（等份）；
• circle标签的r、cx、cy分别表示半径、圆心横坐标、圆心纵坐标。它们的单位也都不是px，而是和viewBox一样（以及之后的stroke-dasharray、stroke-dashoffset单位也是如此）。100等份中的50份，表示该圆的圆心就在svg的中心，它的半径就是svg边长的一半，也就是说该圆是svg正方形的内切圆；
• stroke-dasharray的数值我们设置成该圆的周长，也就是2πr，即Math.PI * 100，现在这个浅黄色的背景圆环就能显示出来了；
• stroke-dashoffset稍微有点不一样，举几个测试例子帮助大家理解：上面提到该圆的周长约等于314，那么我们把stroke-dashoffset先后设置成0、100、200、314之后看看效果（如下图），似乎与我们的预期相反：0是满的，314却是空的……所以，我们发现使用314 - x倒是符合需求，于是引出下面的js部分。

JS部分

<script>
  export default {
    name: 'progress-circle',
    data () {
      return {
        dasharray: Math.PI * 100
      }
    },
    props: {
      // svg边长
      length: {
        type: Number,
        default: 80
      },
      percent: {
        type: Number,
        default: 0
      }
    },
    computed: {
      dashoffset () {
        return (1 - this.percent) * this.dasharray
      }
    }
  }
</script>

• 对外暴露一个百分比props：percent（0到1的小数），调用组件时需要传入一个小数，就像这样：<progress-circle :percent="percent"></progress-circle>；
• 传入百分比，计算属性dashoffset函数会计算出该persent对应的进度偏移量，然后赋值到DOM上的stroke-dashoffset，完成进度条渲染。