内容简介：今天跟大家分享一下最近根据业务需求开发的一个动态百分比饼图的react组件（今天比较闲）主要思路就是用path椭圆弧指令(A)画扇形，然后根据增量（输入框内的值）来增加或减小扇形的弧度，输入框只是用来演示的，实际上要用到后台接口数据
今天跟大家分享一下最近根据业务需求开发的一个动态百分比饼图的react组件（今天比较闲）
我先是用CSS3做发现做不到这种效果，然后尝试用Canvas，做到一半发现也不合适而且有模糊的问题遂放弃。最后决定用SVG！
主要思路就是用path椭圆弧指令(A)画扇形，然后根据增量（输入框内的值）来增加或减小扇形的弧度，输入框只是用来演示的，实际上要用到后台接口数据
HTML结构如下：
SVG椭圆弧路径指令说明：（来自CSDN）
| 指令 | A (绝对) a (相对) |
|---|---|
| 名称 | elliptical arc 椭圆弧 |
| 参数 | 代码：A rx ry x-axis-rotation large-arc-flag sweep-flag x y rx ry 是椭圆的两个半轴的长度。 x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。 large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。 sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。 x y 是圆弧终点的坐标。 |
| 描述 | 从当前点绘制一段椭圆弧到点 (x, y)，椭圆的大小和方向由 (rx, ry) 和 x-axis-rotation 参数决定， x-axis-rotation 参数表示椭圆整体相对于当前坐标系统的旋转角度。椭圆的中心坐标 (cx, cy) 会自动进行计算从而满足其它参数约束。large-arc-flag 和 sweep-flag 也被用于圆弧的计算与绘制。 |
先不考虑动画效果，只看怎么画一个扇形：（说起来比较麻烦，就在注释上逐行说吧）
其中PI为我在组件前面定义的常量： const PI = 3.1416
上面代码声明的x1，y1，x2，y2代表的是起点和终点弧边的坐标，如图所示：
这样绘制扇形的function就写好了～
接下来就是要让它动起来！还要如丝般顺滑！咋整呢？当然用 requestAnimationFrame 了！如果你还不了解它请移步->MDN传送门
接下来就去调用animationSvg就好了，可以从输入框取到弧度值，或者从后台的数据中获取计算，注意一定要从百分比转化成弧度：
const value = Number((this.input.value / 100) * PI * 2); this.animationSvg(value);复制代码
这样就实现了文章开头GIF的那种效果，总结起来就是：
- 获取到数据，增量或者减量，单位为弧度；
- 执行requestAnimationFrame动画；
- 计算path并渲染在DOM中；
- 重复执行2～3两步直到到达弧度的终点
眼见为实，大家可以去这里看到线上DEMO：传送门
可能代码的实现方式还不是最简洁的，各路大神路过欢迎给出建议～
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
