react实现svg实线、虚线、方形进度条

一年前刚到新公司就接到可视化大屏项目，一看Ui，“头很方”！因为查了现有的一些图标库，没有直接可以拿来用的。以下是UI的一小小部分：

而如今从无到有，写出react-super-progress圆形进度通用组件，能写出虚线、实线、方形、圆形、渐变色、饼图等各种进度，也算是一种进步吧；下面是各类实现效果截图：

github地址：https://github.com/lvzhiyi/react-super-progress；

详细文档地址：http://120.78.184.181/progress-docs/#/elements/components/Progress；

npm:    npm install react-super-progress -S

 

 下面进入正题，分享出实现原理与组件实现步骤：

一、首先要掌握几个重要的api

   svg 基础知识、重点掌握属性 strokeDasharray、基本元件（原型、矩形）、defs预定义属性

 

二、圆形进度实现

   1、基本流程

       ----> 利用svg基础元件circle我们能画出圆形

       ---->  图形颜色填充为空白（fiill: none）

　　 ---->  利用svg边框属性storke可以画出代边框的圆形，storke-width控制边框宽度，也就是原型厚度

       ----> 重点：利用strokeDasharray属性控制圆圈进度

　　前三步相对简单没有过多逻辑，这里不再赘述；

 

      这里重点解释一下第四步：在没有strokeDasharray属性的时候，边框默认是实线且不可控制进度；strokeDasharray属性接收任意数量字符串数字为属性，用来表示边框虚线的构成形式，奇数位表示虚线的实体部分，偶数位表示虚线空白部分。举例说明：

　　strokeDasharray="10 20 30 20" 对应效果   ------>  

　　而对应的我们使用 strokeDasharray="当前进度对应周长 圆形总周长"算法来实现对进度的控制，也就是第一个参数通过当前进度乘以对应周长控制实体虚线部分，总周长来控制空白部分（也可以用剩余百分比控制（1 - 进度值），这里为了便于计算，效果是一样的）；距离说明：

　　比如当前进度75%，圆形周长为c：

　　对应的 ----> strokeDasharray = "(75 / 100 * c)  (c)" ----> 

　　从而实现对圆圈进度的控制！方形进度同理。饼图按照 半径（r）/ 宽度（width）1:4的比例提供参数值即可实现。

 

二、虚线进度的实现

　　虚线进度与实现进度实现的原理大不相同，与strokeDasharray毫无关系，原理也相对简单：将方形元件旋转渲染至某个角度即可。

　　　　　　 ----> 

　　主要使用了transform属性 ----> transform=" rotate( 90,  50 50) " ----> 第一个属性值90代表旋转角度，后面一对属性值（50， 50）代表旋转的圆心位置；

 

二、关于渐变色

　　1、普通进度圈的渐变色是根据svg预定义属性defs创建渐变色块，在圆圈内使用stroke属性引用 ----> stroke="#colors"

　　2、虚线进度因为是由不同元件旋转渲染而成，所以通过渐变值分割成对应数量的渐变值数值，应用在每一个元件上；分割对应的渐变值相对复杂一些，感兴趣的可参见源码分析。

 

 

 

 

 

  

转载于:https://www.cnblogs.com/lvzhiyiboke/p/10241287.html