简易环形进度条实现，三种方案对比

公司最近新项目有一个展现数据操作进度的需求，由于公司内使用的UI库只有线性进度条而没有环形进度条，所以只得手写一个封装组件，尝试了多种方案后比较一下优劣。

1.利用普通HTML+CSS绘制

这种方案的原理是两个半圆进行旋转和覆盖，当进度不大于50%时，左侧半圆进行顺时针旋转；大于50%时，右侧半圆顺时针旋转，只需控制旋转的角度与进度相关即可。

具体可参照【css】手把手教你实现 css 环形进度条 - 知乎 (zhihu.com)；

缺陷：由于进度条分为两部分，两个部分之间会出现一条不很明显的缝，影响美观，故没有采纳。

2.利用canvas

对于canvas来说，使用arc()方法画一个圆环是非常方便的，也是我一开始采用的方案。原理即利用arc方法和save方法绘制两个重合的圆环。

代码：

import './index.scss';
import * as React from 'react';interface IRingProgressOwnProps {progress: number;size: number;tracksColor?: string | undefined;thumbColor?: string | undefined;lineWidth?: number | undefined;children?: React.ReactNode;
}export const RingProgress = (props: IRingProgressOwnProps) => {let canvas: null | HTMLCanvasElement;const canvasEl = React.useRef(null);React.useEffect(() => {canvas = canvasEl.current;const ctx = canvas!.getContext('2d');ctx!.clearRect(0, 0, canvas!.offsetWidth, canvas!.offsetWidth);drawTracksRing(ctx);drawThumbRing(ctx, props.progress);}, []);const drawTracksRing = (ctx: CanvasRenderingContext2D | null): void => {ctx?.save();ctx?.beginPath();ctx!.strokeStyle = props.tr

简易环形进度条实现，三种方案对比相关推荐

组态王怎么做进度条_三种方法制作进度条效果
进度条可以说出现在我们生活的方方面面,游戏.视频加载会碰到它,刷新会碰到它,就连网络不顺畅时也会碰到它.进度条不仅仅只是作为信息载入时的标志,还可以运用到片头开场,让观众对接下来的视频内容产生好奇和期 ...
深度相机（三）--三种方案对比
from:https://blog.csdn.net/app_12062011/article/details/52511701 RGBD方案对比: 关键技术规格: 1.检测范围: 2.检测精度: 3 ...
深度相机---（4）三种方案对比
原文:http://blog.csdn.net/app_12062011/article/details/52511701 RGBD方案对比: 关键技术规格: 1.检测范围: 2.检测精度: 3.检测 ...
【计算机视觉】深度相机（三）--三种方案对比
原文:http://blog.csdn.net/app_12062011/article/details/52511701 RGBD方案对比: 关键技术规格: 1.检测范围: 2.检测精度: 3.检测 ...
前端学习（2081）：三种方案对比es5没有闭包
[Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
使用css3制作一个简易的环形进度条
话不多说,直接上代码: css: section{width:2rem;height:2rem;position: relative;margin:2rem;} .wrap,.circle,.perc ...
js svg语音波动动画_SVG实现环形进度条的原理
之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制.具体效果如下 ...
Android花样loading进度条（四）-渐变色环形进度条
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条,包括水平.圆形.环形.圆弧形.不规则形状等. 本篇我们对配文字环形进度条稍加变换,将圆环颜色改为渐变色的形式,使得进 ...
iOS通过CAShapeLayer和UIBezierPath画环形进度条
UIBezierPath可以绘制矢量路径,而CAShapeLayer是Layer的子类,可以在屏幕进行绘制,本文主要思想是:CAShapeLayer按照UIBezierPath的矢量路径进行绘制. 效 ...

简易环形进度条实现，三种方案对比

1.利用普通HTML+CSS绘制

2.利用canvas

简易环形进度条实现，三种方案对比相关推荐

最新文章

热门文章