五分钟学会各种环形进度条
本文将会通过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>
其中的stroke-linecap
属性是设置进度条的进度圆角
这样我们就简单的实现了三种不一样的进度条
最后
最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。
有需要的小伙伴,可以点击下方卡片领取,无偿分享
五分钟学会各种环形进度条相关推荐
- iOS 一分钟学会环形进度条
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低.只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先制作一个不带颜色渐变的进度条 ...
- 仿MIUI音量变化环形进度条实现
Android中使用环形进度条的业务场景事实上蛮多的,比方下载文件的时候使用环形进度条.会给用户眼前一亮的感觉:再比方我大爱的MIUI系统,它的音量进度条就是使用环形进度条,尽显小米"为发烧 ...
- 老滚5初始化python失败_五分钟学会怎么用python做一个简单的贪吃蛇
Pygame 是一组用来开发游戏软件的 Python 程序模块,基于 SDL 库的基础上开发.我们今天将利用它来制作一款大家基本都玩过的小游戏--贪吃蛇. 一.需要导入的包 import pygame ...
- iOS通过CAShapeLayer和UIBezierPath画环形进度条
UIBezierPath可以绘制矢量路径,而CAShapeLayer是Layer的子类,可以在屏幕进行绘制,本文主要思想是:CAShapeLayer按照UIBezierPath的矢量路径进行绘制. 效 ...
- 用svg实现一个环形进度条
svg实现环形进度条需要用到的知识: 1.会使用path的d属性画一个圆环 //用svg的path元素的A命令画圆<pathd="M cx cym 0 -r a r r 0 1 0 0 ...
- js svg语音波动动画_SVG实现环形进度条的原理
之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制.具体效果如下 ...
- canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"><p>抱歉, ...
- 五分钟学会企业的OpenStack(T版)——简介及安装方式
五分钟学会企业的OpenStack(T版)--简介及安装方式 前言 一.OpenStack简介 二.OpenStack安装方式(T版)系列 前言 花了几天写完了OpenStack(T版)的系列文章,希 ...
- [Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
最新文章
- 计算机录入技能考试题,计算机文字录入员高级技能考试试卷
- python3 字符串填充 清除
- Hadoop权威指南pdf
- 第八周项目实践2 建立连串算法库
- [力扣leetcode39]组合总和及回溯法
- Spark:获取dataframe某列最大值
- mysql found row_mysql found_row()使用详解
- Eclipse改动Project的文件夹位置
- 集训8.19最短路径讲解
- 计算机word的函数怎么用,Word公式编辑器怎么使用,教您怎么使用
- aliez歌词_歌曲《aLIEz(TV动画《ALDNOAH.ZERO》ED2)(翻自 mizuki)》完整歌词是什么?谁唱的?...
- JAVA设计模式之策略模式
- android自动循环播放视频,Android编程实现VideoView循环播放功能的方法
- Sqlite锁与事务
- 使用ArchR分析单细胞ATAC-seq数据(第一章)
- 微分方程_e的矩阵指数
- matlab图形黎曼几何,黎曼几何不一致的定理—元数学与元物理学(22)
- shikiryu html5,保举WEB开拓者最佳HTML5和CSS3代码天生器
- 别说理科男不懂撩妹,这个老司机一生只爱两样:物理和18岁的少女
- centos 挂载 cos云存储服务器,centos文件目录挂载docker实现共享操作步骤
热门文章
- 数据结构——dfs/bfs
- 注意-更正並替換:ABLIC Inc.全球首款(*1)“Zero Crossing Latch霍尔IC”将为无刷直流电机的研发和制造带来创新
- 只要15分钟,轻松get费用报销系统
- AI实战圣经《Machine Learning Yearning》第1-52章中英文版pdf分享
- XMind ,滴答清单, Effie 哪个更适合写稿爱好者?
- 12.聚类算法之层次聚类
- python爬取百度贴吧图片库_爬取百度贴吧图片
- 每周一荐:iOS应用iThoughts
- OIP-04109: Error creating temporary file 解决方案
- 索尼软件测试版,索尼(SONY)SGP511CN/B 黑平板电脑软件测试评测-ZOL中关村在线