五分钟学会各种环形进度条

news2024/11/21 0:32:57

本文将会通过svg实现圆形进度条和矩形进度条以及三角形进度条，先放效果图

圆环进度条

首先我们需要两个画两个圆，一个是底色圆，一个是进度圆。

<svg width="200" height="200"><circle fill="none" cx="100" cy="100" r="50" stroke="#EBEDF0" stroke-width="10" /><path fill="none" d="M 100, 50 A 50, 50, 0, 0, 1, 100, 150 A 50, 50, 0, 0, 1, 100, 50" stroke="#50D4AB" stroke-width="10" />
</svg>

现在就画好了两个圆，绘制进度圆的重点就是d属性值 ，M代表起点，A代表画椭圆弧，一次最多只能画半圆，所以要分两次，下面是具体画圆路径的参数解释

命令	参数	-参数解释
A	rx, ry x-axis-rotation, large-arc-flag, sweepflag x, y	从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为X轴和Y轴的半径。x-axis-rotation为x轴旋转度数。large-arc-flag代表优弧还是劣弧（0表示劣弧，1表示优弧）。sweep-flag为弧线方向 0为顺时针 1为逆时针
M	x,y	移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制

既然圆画出来了，怎么让进度圆动起来？

这个时候就有比较重要的两个属性 stroke-dasharray和stroke-dashoffset 关于这两个属性详细解释可以看这个大佬写的链接

stroke-dasharray

stroke-dasharray属性用于创建虚线，就是设置实线和虚线的宽度

比如：stroke-dasharray: 50 20; 效果就是下图

stroke-dasharray 当属性为两个值时，一个表示长度，一个表示间距

这个时候我们可以利用这个属性来实现进度，首先我们需要知道这个圆的周长，然后就可以通过百分比 * 周长去得到相应百分比需要绘制的长度。

周长 = 2* Π * r 这个公式大家都会吧，以示例为准，周长 = 2 * Math.PI * 50，我们将其进度变为25%

const girth = 2 * Math.PI * 50
const dasharray = `${0.25 * girth} ${girth}`
const d = M 100, 50 A 50, 50, 0, 0, 1, 100, 150 A 50, 50, 0, 0, 1, 100, 50

<svg width="200" height="200">
 <circle fill="none" cx="100" cy="100" r="50" stroke="#EBEDF0" stroke-width="10" />
 <path fill="none" :d="d" stroke="#50D4AB" stroke-width="10" :stroke-dasharray="dasharray"/>
</svg>

这样就实现了一个进度为25%的圆环进度条

矩形进度条

老规矩，先画两个矩形，rx代表矩形的圆角，矩形进度条的重点是在周长的计算，以示例为准，因为矩形是带圆角的，所以就不是 2 * (长 + 宽) ，而是需要加上圆角的长度

<svg width="200" height="200"><rect fill="none" x="10" y="10" rx="10" width="100" height="100" stroke="#ebedf0" stroke-width="10" /><rect fill="none" x="10" y="10" rx="10" width="100" height="100" stroke="#50D4AB" stroke-width="10" />
</svg>

矩形的四个圆角拼起来其实就是一个圆，半径就是 rx可以得出周长 = 2 * Math.PI * rx + 4 * (正方形的边长 - 2 * rx)

接下来还是用dasharray属性来实现进度

const circleGirth = 2 * Math.PI * 100 // 圆角的圆的周长
const width = 100 - 2 * 10 // 正方形的边长
const girth = circleGirth + 4 * width // 圆角矩形总周长
const dasharray = `${0.25 * girth} ${girth}`

<svg width="200" height="200"><circle fill="none" cx="100" cy="100" r="50" stroke="#EBEDF0" stroke-width="10" /><path fill="none" stroke="#50D4AB" stroke-width="10" :stroke-dasharray="dasharray"/>
</svg>

圆环进度条会了，矩形不是信手拈来

三角形进度条

三角形进度条是用 polygon 来实现，其中 stroke-linejoin 属性是可以设置圆角，在计算周长的时候就不需要计算圆角，会比较方便，points属性就是三角形三个角的坐标，所以绘制的重点是这三个角的坐标

<svg>
<polygon fill="none" stroke-linejoin="round" points="ax,ay bx,by cx,cy" stroke="#ebedf0" stroke-width="10"/>
</svg>

接下来我们来计算ABC三个角的坐标

以边长100为例，先求三角形的高，因为等边三角形三线合一，高既是底边的中线，也是底边的高线，再根据勾股定理 得出 高² = 边长² - 底边² 即 高 = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2))所以 A点的坐标(0, 高)，B点的坐标(50, 0)，C点的坐标(100, 高)

const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高
const points = `0,${height} 50,0 100,${height}`

<svg><polygon fill="none" stroke-linejoin="round" :points="points" stroke="#50D4AB" stroke-width="10"/>
</svg>

当我们将相应的值带进去的时候，发现有部分被遮挡，其实是因为我们设置了 stroke-width,所以我们只需要将ABC三点的xy坐标都加10就行了

const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高
const points = `10,${height + 10} 60,10 110,${height + 10}`

<svg><polygon fill="none" stroke-linejoin="round" :points="points" stroke="#50D4AB" stroke-width="10"/>
</svg>

三角形实现了，现在只需要计算周长，就可以实现进度百分比，周长 = 3 * 边长,现在以33%为例实现代码

const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高
const points = `10,${height + 10} 60,10 110,${height + 10}`
const dasharray = 100 300
<svg><polygon fill="none" stroke-linejoin="round" :points="points" stroke="#50D4AB" stroke-width="10"/><polygon fill="none" stroke-linejoin="round" :points="points" stroke="#50D4AB" stroke-width="10":stroke-dasharray="dasharray" stroke-linecap="round" />
</svg>