在业务需求中,遇到了上述开发需求环的进度栏。如上所示,在实际开发中,环进度栏也更为常见。将更多使用组件库。
最初旨在使用边界拉迪迪斯,将有两个问题
1.圆的切口是圆形的
2.不是整个圆圈
这不是很合适。
然后我搜索并在SVG标签中找到了圆
SVG标签,SVG标签和几个图形基本上都使用了其他图形
步骤1:首先创建一个SVG画布,绘制一个简单的圆圈。
步骤2:两个圆圈,底部圆圈,外面的渐变颜色
步骤3:使用圆属性
strokelinecap =“圆形” //切割表面为圆形
strokedasharray =“ 400,134” //实现空白
strokedashoffset =“ -134” //差分位置差距
因为这是一个固定的百分比,所以我不知道如何通过CSS,我想动作。然后我的代码是为每个百分比编写的。
那我不这么认为。
https://mobile.ant.design/zh/components/progress-circle
Antd-Mobile CircleProgress
看亮点。不要看其他人。
通过CSS的百分比直接发现CSS的百分比,并通过计算进行计算。
然后敲了几个演示进行比较。DEMO1是我自己的第一版Demo2,Antd-Mobile的源代码,Demo3是最终版本
计算不是很聪明,有些组合不清楚吗?
颜色梯度也可能需要通过进度的特定值,然后是梯度来计算。
原始:https://juejin.cn/post/7095676605271375908