用初中数学知识撸一个canvas环形进度条
周末好，今天给大家带来一款接地气的环形进度条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下：
我的第一反应还是找现成的组件，市面上很多组件都实现了前3点，独独没找到能画进度圆点的组件，不然稍加定制也能复用。既然没有现成的组件，只有自己用vue + canvas撸一个了。
效果图
先放个效果图，然后再说下具体实现过程，各位看官且听我慢慢道来。
安装与使用
源码地址，欢迎star和提issue。
安装
npm install --save vue-awesome-progress
使用
全局注册
import Vue from 'vue'
import VueAwesomeProgress from "vue-awesome-progress"
Vue.use(VueAwesomeProgress)
局部使用
import VueAwesomeProgress from "vue-awesome-progress"
export default {
components: {
VueAwesomeProgress
},
// 其他代码
}
script标签引入组件
同时也支持直接使用script标签引入哦，满足有这部分需求的朋友。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="path-to/vue-awesome-progress.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
new Vue({
el: "#app",
template: '<vue-awesome-progress :percentage="40"></vue-awesome-progress>'
})
</script>
</body>
</html>
静态展示
任何事都不是一蹴而就的，我们首先来实现一个静态的效果，然后再实现动画效果，甚至是复杂的控制逻辑。
确定画布大小
第一步是确定画布大小。从设计稿我们可以直观地看到，整个环形进度条的最外围是由进度圆点确定的，而进度圆点的圆心在圆环圆周上。
因此我们得出伪代码如下：
// canvasSize: canvas宽度/高度
// outerRadius: 外围半径
// pointRadius: 圆点半径
// pointRadius: 圆环半径
canvasSize = 2 * outerRadius = 2 * (pointRadius + circleRadius)
据此我们可以定义如下组件属性：
props: {
circleRadius: {
type: Number,
default: 40
},
pointRadius: {
type: Number,
default: 6
}
},
computed: {
// 外围半径
outerRadius() {
return this.circleRadius + this.pointRadius
},
// canvas宽/高
canvasSize() {
return 2 * this.outerRadius + 'px'
}
}
那么canvas大小也可以先进行绑定了
<template>
<canvas ref="canvasDemo" :width="canvasSize" :height="canvasSize" />
</template>
获取绘图上下文
getContext('2d')方法返回一个用于在canvas上绘图的环境，支持一系列2d绘图API。
mounted() {
// 在$nextTick初始化画布，不然dom还未渲染好
this.$nextTick(() => {
this.initCanvas()
})
},
methods: {
initCanvas() {
var canvas = this.$refs.canvasDemo;
var ctx = canvas.getContext('2d');
}
}
画底色圆环
完成了上述步骤后，我们就可以着手画各个元素了。我们先画圆环，这时我们还要定义两个属性，分别是圆环线宽circleWidth和圆环颜色circleColor。
circleWidth: {
type: Number,
default: 2
},
circleColor: {
type: String,
default: '#3B77E3'
}
canvas提供的画圆弧的方法是ctx.arc()，需要提供圆心坐标，半径，起止弧度，是否逆时针等参数。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
我们知道，Web网页中的坐标系是这样的，从绝对定位的设置上其实就能看出来（top，left设置正负值会发生什么变化），而且原点(0, 0)是在盒子（比如说canvas）的左上角哦。
对于角度而言，0°是x轴正向，默认是顺时针方向旋转。
圆环的圆心就是canvas的中心，所以x , y 取outerRadius的值就可以了。
ctx.strokeStyle = this.circleColor;
ctx.lineWidth = this.circleWidth;
ctx.beginPath();
ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, 0, this.deg2Arc(360));
ctx.stroke();
注意arc传的是弧度参数，而不是我们常理解的360°这种概念，因此我们需要将我们理解的360°转为弧度。
// deg转弧度
deg2Arc(deg) {
return deg / 180 * Math.PI
}
画文字
调用fillText绘制文字，利用canvas.clientWidth / 2和canvas.clientWidth / 2取得中点坐标，结合控制文字对齐的两个属性textAlign和textBaseline，我们可以将文字绘制在画布中央。文字的值由label属性接收，字体大小由fontSize属性接收，颜色则取的fontColor。
if (this.label) {
ctx.font = `${this.fontSize}px Arial,"Microsoft YaHei"`
ctx.fillStyle = this.fontColor;
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(this.label, canvas.clientWidth / 2, canvas.clientWidth / 2);
}
画进度弧
支持普通颜色和渐变色，withGradient默认为true，代表使用渐变色绘制进度弧，渐变方向我默认给的从上到下。如果希望使用普通颜色，withGradient传false即可，并可以通过lineColor自定义颜色。
if (this.withGradient) {
this.gradient = ctx.createLinearGradient(this.circleRadius, 0, this.circleRadius, this.circleRadius * 2);
this.lineColorStops.forEach(item => {
this.gradient.addColorStop(item.percent, item.color);
});
}
其中lineColorStops是渐变色的颜色偏移断点，由父组件传入，可传入任意个颜色断点，格式如下：
colorStops2: [
{ percent: 0, color: '#FF9933' },
{ percent: 1, color: '#FF4949' }
]
画一条从上到下的进度弧，即270°到90°
ctx.strokeStyle = this.withGradient ? this.gradient : this.lineColor;
ctx.lineWidth = this.lineWidth;
ctx.beginPath();
ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, this.deg2Arc(270), this.deg2Arc(90));
ctx.stroke();
其中lineWidth是弧线的宽度，由父组件传入
lineWidth: {
type: Number,
default: 8
}
画进度圆点
最后我们需要把进度圆点补上，我们先写死一个角度90°，显而易见，圆点坐标为(this.outerRadius, this.outerRadius + this.circleRadius)
画圆点的代码如下：
ctx.fillStyle = this.pointColor;
ctx.beginPath();
ctx.arc(this.outerRadius, this.outerRadius + this.circleRadius, this.pointRadius, 0, this.deg2Arc(360));
ctx.fill();
其中pointRadius是圆点的半径，由父组件传入：
pointRadius: {
type: Number,
default: 6
}
角度自定义
当然，进度条的角度是灵活定义的，包括开始角度，结束角度，都应该由调用者随意给出。因此我们再定义一个属性angleRange，用于接收起止角度。
angleRange: {
type: Array,
default: function() {
return [270, 90]
}
}
有了这个属性，我们就可以随意地画进度弧和圆点了，哈哈哈哈。
老哥，这种圆点坐标怎么求？
噗......看来高兴过早了，最重要的是根据不同角度求得圆点的圆心坐标，这让我顿时犯了难。
经过冷静思考，我脑子里闪过了一个利用正余弦公式求坐标的思路，但前提是坐标系原点如果在圆环外接矩形的左上角才好算。仔细想想，冇问题啦，我先给坐标系平移一下，最后求出来结果，再补个平移差值不就行了嘛。
用初中数学知识撸一个canvas环形进度条的更多相关文章
- canvas环形进度条
<style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
- 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- Canvas实现环形进度条
Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...
- 用svg实现一个环形进度条
svg实现环形进度条需要用到的知识: 1.会使用path的d属性画一个圆环 //用svg的path元素的A命令画圆 <path d=" M cx cy m 0 -r a r r 0 1 ...
- canvas绘制环形进度条
<!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...
- Android简易实战教程--第十七话《自定义彩色环形进度条》
转载请注明出处:http://blog.csdn.net/qq_32059827/article/details/52203533 点击打开链接 在Android初级教程里面,介绍了shape用法 ...
随机推荐
- 品Spring：对@Autowired和@Value注解的处理方法
在Spring中能够完成依赖注入的注解有JavaSE提供的@Resource注解,就是上一篇文章介绍的. 还有JavaEE提供的@javax.inject.Inject注解,这个用的很少,因为一般都不 ...
- web前端之面试：自我介绍
面试官您好, 首先很感谢贵公司的面试邀请, 让我有这个幸运机会能来到这里和您交流 : 接下来我做一个简单的自我介绍: 我的姓名是 XX, 祖籍是XX, 年龄是24, 学校是 XXX, 专业是XXX: ...
- 设计一个A表数据抽取到B表的抽取过程
原题如下: 解题代码如下: table1类: @Data @NoArgsConstructor @AllArgsConstructor public class table1{ private Str ...
- 分享8点超级有用的Python编程建议
我们在用Python进行机器学习建模项目的时候,每个人都会有自己的一套项目文件管理的习惯,我自己也有一套方法,是自己曾经踩过的坑总结出来的,现在在这里分享一下给大家,希望多少有些地方可以给大家借鉴.
- STM32之串口DMA接收不定长数据
STM32之串口DMA接收不定长数据 引言 在使用stm32或者其他单片机的时候,会经常使用到串口通讯,那么如何有效地接收数据呢?假如这段数据是不定长的有如何高效接收呢? 同学A:数据来了就会进入串口 ...
- Jenkins构建Jmeter项目
1.启动jenkins 2.新建自由风格的项目 定时任务 构建操作 安装HTML Publisher插件 构建后操作 最后保存构建,查看报告
- Java学习笔记之基础语法(数组)
数组 数组概述:是具有相同数据类型的数据的集合 数组的定义:数据类型 数组名 [] 数组特点: 1,数组是引用数据类型. 2,数组值用大括号,元素之间用逗号隔开,元素的个数是0-N个 3,数组长度是固 ...
- CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- Cocos2d-x 学习笔记(20) ControlButton
[Cocos2d-x 学习笔记 目录链接] 1. 简介 ControlButton实现了按钮功能,根据触摸的位置和移动的过程可识别9中EventType类型,执行对应的回调函数. 直接继承了Contr ...
- pytest中unicode编码问题（如test_fix.py::Test1::test_s1[\u6d4b\u8bd5-\u6d4b\u8bd5]）
现象: 采用如下方式可将其正确显示为中文 ss = r"test_fix.py::Test1::test_s1[\u6d4b\u8bd5-\u6d4b\u8bd5]" print( ...