vue制作圆形进度条

效果图

代码

html结构

<div ref="cir" class="circle">
    <svg viewBox="0 0 1040 1040">
      <path style="fill:none;stroke:#d4d4d4;stroke-width:40px" d="M 520 520 m 0 -500 a 500 500 0 1 1 0 1000 a 500 500 0 1 1 0 -1000">path>
      <path style="fill:none;stroke:#00adff;stroke-width:40px;stroke-linecap: round;stroke-dasharray: 0px, 3140px;" d="M 520 520 m 0 -500 a 500 500 0 1 1 0 1000 a 500 500 0 1 1 0 -1000" >path>
    svg>
 	<div class="progressText">时间流逝:{
    {progress}}%div>
div>

在这里我们通过ref进行后续的DOM操作

viewBox属性

svg标签viewBox属性：指定一个给定的一组图形伸展以适应特定的容器元素，用来限定svg画布大小
第一个参数：最小X位置
第二个参数：最小Y位置
第三个参数：svg画布的宽度
第四个参数：svg画布的高度
前两个参数一般都为 0 0

不允许宽度和高度为负值，当width或height的值，小于或等于0的情况下，这个元素将不会被渲染出来

path元素

path元素是用来定义形状的通用元素,所有的基本形状都可以用path元素来创建

这里用了path的d属性来创建圆形进度条
d属性:该属性定义了一个路径,其中包含了一系列路径描述.

这些路径由下面这些指令组成:

Moveto

Moveto:该属性就相当于提起笔,然后确定落笔点,该属性作图不会和上一个点产生线段连接
语法:
M x,y:x,y在这里是绝对坐标,分别代表水平坐标和垂直坐标
m dx,dy:在这里dx和dy是相对于当前点的距离,分别是向右和向下的距离

Lineto

Lineto:该指令将绘制一条直线段.这个直线从当前位置移到指定位置

语法:
L x,y:x,y在这里是绝对坐标
l dx,dy:在这里dx和dy是相对于当前点的距离,分别是向右和向下的距离
还有H,V,分别指定水平和垂直移动,它们的语法和L相同，它们的小写版本是相对距离，大写是绝对位置

Curveto

Curveto:指定一个贝塞尔曲线,有两种类型的贝塞尔曲线:立方曲线和二次方曲线

二次方贝塞尔曲线:

• 语法:
  Q cx,cy x,y:cx和cy都是控制点的绝对坐标
  q dcx,dcy dx,dy:dcx和dcy分别是控制点在x和y方向上的距离

立方贝塞尔曲线:与二次方贝塞尔曲线不同的是,它需要考虑两个控制点

• 语法:
  C cx,cy c2x,c2y x,y:cx,c2x是初始点的控制点的绝对坐标, cy,c2y是结束点的控制点的绝对坐标
  c dcx,dcy dc2x,dc2y dx,dy:dcx,dcy和dc2x,dc2y都是相对于初始点,而不是相对于结束点。dx和dy分别是向右和向下的距离
  T 和 S命令:能够连缀平滑的贝塞尔曲线,语法比别的curveto命令简单,因为它假定第一个控制点是从,前一个控制点关于前一个点的反射, 或者说,如果没有前一个控制点的话,它实际上就是前一个点
  T x,y 和 t dx,dy:分别对应于绝对坐标和相对距离,用来创建二次方贝塞尔曲线
  S cx,cy x,y 和 s dcx,dcy dx,dy:用来创建立方贝塞尔曲线.在这里cx和dcx指定第二个控制点

所有的贝塞尔曲线命令可以制作出一个多边贝塞尔图形,先初始化命令,然后多次指定所有的参数,就可以制作出一个多边形贝塞尔图形

Arcto

Arcto: 绘制一个椭圆弧曲线路径

• 语法:
  A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y:
  rx和ry分别是x和y方向的半径,而largeArcFlag的值要么是0(画小弧)要么是1(画大弧)
  xAxisRotate支持改变x轴相对于当前引用框架的方向
  SweepFlag也要么是0要么是1,用来确定弧方向是顺时针(1)还是逆时针(0)
  x,y是目的地的坐标

ClosePath

ColsePath:在当前路径,从当前点到第一个点简单画一条直线,这是最简单的命令,而且不带有任何参数,它沿着到开始点的最短的线性路径,如果别的路径落在这路上,将可能路径相交
语法: Z 和 z,两种写法作用都一样

fill属性

fill:用于填充SVG形状轮廓内的形状的颜色
其中还有fill-opacity,fill-rule,等属性

stroke属性

stroke:用于填充给定图形元素的外轮廓的颜色.默认值是none
stroke-width:用于定义笔触宽度(画笔的粗细)
stroke-linecap:这个属性有三个值:

• butt:线条两端截断
• square:线条两边留出距离截断
• round:线条末端圆形

stroke-linejoin:该属性定义如何在形状两条线之间的连接被渲染
该属性有三个值:

• miter:斜面连接
• round:圆弧状连接
  
• bevel:平整连接
  

stroke-dasharray:该属性用于绘制虚线
我们这里定义了stroke-dasharray: 0px, 3140px;,虚线宽度为0像素,虚线之间的间隔为3140px像素

vue逻辑代码:

data(){
     
	return{
     
		progress:0.1,//定义默认进度条百分比
		cir:'',//用于获取DOM
		paths:'', //用于获取子元素
	}
},
mounted(){
     
	this.cir = this.$refs.cir 
	this.paths = this.cir.children[0].children //得到SVG的子元素
	this.computedTime()
},
methods:{
     
	computedTime(){
     
		let date = new Date()//得到当前时间
		let nextYear = new Date('2022-1-1').getTime()//得到下一年一月一号的时间戳
		let thisYear = new Date('2021-1-1').getTime() //得到今年的时间戳
		let days = (nextYear - thisYear)/100 
		let num = (date.getTime() - thisYear)/days
		num = num.toFixed(4) //保留计算结果的4位小数
		this.progress = num
		let sum = 3104*this.progress/100 //计算进度条的长度
		this.paths[1].style.strokeDasharray = `${
       sum},3104` //设置进度条长度
	}
}

以上就是本次的圆形进度条的全部代码了,喜欢的话可以点个赞,谢谢