uni-app中自定义图表(canvas实现chart图表)开发篇(5)-圆环进度条添加动画效果
这里增加一篇介绍下进度条动画效果如何添加,前几篇的进度值被修改后,切换效果比较生硬。另外也在第四篇基础上,对图形略作修改。在查看uniapp文档时,没有发现重绘执行函数,小程序中有Canvas.requestAnimationFrame;所以在uniapp这里,我们使用setInterval来实现,完成后运行也很流畅。
添加动画后效果如下图:
一、创建对应页面
1.1 创建charts.js文件
/*** 图表 - 圆环进度条添加动画效果*/
export class CircleBox {//构造函数constructor(_context){}//绘制带动画效果图表drawAniCircle(_percent){ }//绘制图表drawCircle(){}
}
1.2 创建vue页面
<template><view class="wrap-box"><view class="echart-box chart01"><view class="title">图表:重新赋值实现增长或减少动画效果</view><view class="content"><canvas canvas-id="chartBox5" id="chartBox5" class="chart"></canvas><view class="btn-box"><button type="default" class="btn" @click="mulEvent()">减小</button><button type="default" class="btn" @click="addEvent">增加</button></view></view></view></view>
</template><script>import { CircleBox } from './charts.js';export default {data() {return {cbox1: null, //画布实例对象percent: 0, //当前进度值step: .1 //每次修改递增或递减值}},mounted() {this.initCircle1();},methods: {mulEvent(){//递减this.percent = this.percent - this.step <= 0 ? 0 : this.percent - this.step;//开始绘制this.cbox1.drawAniCircle(this.percent);},addEvent(){//递增this.percent = this.percent + this.step >= 1 ? 1 : this.percent + this.step;this.cbox1.drawAniCircle(this.percent);},initCircle1(){//实例对象this.cbox1 = new CircleBox(uni.createCanvasContext('chartBox5'));//开始绘制this.cbox1.drawAniCircle(this.percent);}}}
</script><style lang="scss">
@import '../index.scss';
</style>
1.3 创建scss样式文件
略(同前几篇一样)
二、实现chart.js图表
2.1 构造函数定义相应变量
构造函数中这次需要添加一个控制手柄,随时控制定时器的开始和结束。
//构造函数
constructor(_context){this.ctx = _context;//刻度数this.number = 50;//直径this.radius = uni.upx2px(300);//内填充this.padding = uni.upx2px(20);//线宽this.lineWidth = uni.upx2px(20);//刻度宽度this.scaleWidth = uni.upx2px(10);//刻度高度this.scaleHeight = uni.upx2px(8);//线颜色this.lineColor = "#D7EAFF";//占比this.percent = 0;//百分比颜色this.percentColor = "#297DFE";//字体大小this.fontSize = uni.upx2px(42);//字段颜色this.fontColor = '#297DFE';//计时控制手柄this.handle = null;
}
2.2 绘制圆环进度条
这里代码和第4篇charts.js实现基本一样,只是将刻度向内移动了,多了线宽+内填充的距离;原padding*2,这里padding*4+lineWidth*2,这样刻度就向内移动了。
另外,增加了起始位圆点和勾字符号添加。
drawCircle()函数定义好后,可以进行图表绘制了,只是修改值后,切换效果比较生硬。
//绘制图表
drawCircle(){//清空画布this.ctx.clearRect(0, 0, this.radius, this.radius);//计算实际直径(减掉四周内填充)let _radius = this.radius/2-this.padding*2;//开始绘制圆环this.ctx.beginPath();this.ctx.arc(this.radius/2,this.radius/2, _radius,0,Math.PI*2, false);this.ctx.lineWidth = this.lineWidth;this.ctx.strokeStyle = this.lineColor;this.ctx.stroke();//计算角度值(倾斜平均值)let _depth = Math.PI*2/this.number; //绘制时刻底色//计算刻度直径(减去四周内填充 + 圆环内与刻度间的内填充、外部圆环的线宽 )let _scaleRadius = this.radius - this.lineWidth * 2 - this.padding * 4;//开始底色部分绘制this.ctx.beginPath();this.ctx.strokeStyle = this.lineColor;this.ctx.lineCap = 'round';//循环绘制刻度for(var i=0;i<this.number;i++){this.ctx.save();this.ctx.lineWidth=this.scaleHeight;//把基点设置为圆心this.ctx.translate(this.radius/2,this.radius/2);this.ctx.rotate(_depth*i);this.ctx.moveTo(_scaleRadius/2 ,0);this.ctx.lineTo(_scaleRadius/2-this.scaleWidth,0);this.ctx.stroke();this.ctx.restore(); }//绘制高亮进度条this.ctx.beginPath();this.ctx.lineCap = 'round';this.ctx.arc(this.radius/2,this.radius/2, _radius,-(Math.PI / 2), ((Math.PI * 2) * this.percent) - Math.PI / 2, false);this.ctx.strokeStyle = this.percentColor;this.ctx.stroke();//恢复之前保存的绘图上下文this.ctx.restore();// 绘制高亮刻度this.ctx.beginPath();this.ctx.strokeStyle = this.percentColor;//四舍五入,获取高亮刻度数let _highNumber = Math.ceil(parseFloat(this.number*this.percent).toFixed(2));for(var i=0;i<_highNumber;i++){this.ctx.save();this.ctx.lineWidth= this.scaleHeight;//把基点设置为圆心this.ctx.translate(this.radius/2,this.radius/2);this.ctx.rotate(_depth*i-(_depth*Math.ceil(this.number/4)));this.ctx.moveTo(_scaleRadius/2 ,0);this.ctx.lineTo(_scaleRadius/2-this.scaleWidth,0);this.ctx.stroke();this.ctx.restore(); }//绘制文字this.ctx.font = 'bold '+this.fontSize+'px sans-serif';this.ctx.setFillStyle(this.fontColor);this.ctx.setTextAlign('center');this.ctx.fillText(Math.round(this.percent*100)+'%', this.radius/2+(this.lineWidth/2), this.radius/2+(this.lineWidth/2), this.radius);//绘制圆点let _circleRadius = this.lineWidth; //圆点半径this.ctx.beginPath();this.ctx.save();this.ctx.lineWidth = 1;this.ctx.arc(this.radius/2, this.padding + this.lineWidth, this.lineWidth, 0, Math.PI*2, false);this.ctx.setFillStyle(this.percentColor);this.ctx.fill();this.ctx.restore(); //绘制对号this.ctx.font = 'bold '+uni.upx2px(20)+'px sans-serif';this.ctx.setFillStyle('#FFFFFF');this.ctx.fillText('√', this.radius/2, this.padding + this.lineWidth * 1.4);//绘制到画布上this.ctx.draw();
}
2.3 动画添加
我们再添加另一个函数drawAniCircle(),通过Interval进行重绘动作,来实现动画效果。代码如下:
//绘制带动画效果图表drawAniCircle(_percent){ //每次进入清除一下,以防上次动作未处理完clearInterval(this.handle);/*** 这几篇我们一直是他用百分比小数进行传递* 所以动画每帧移动步伐为 0.01*/let _step = .01,/*** 判断当前值是增加还是减少*/_type = _percent>this.percent ? 1 : -1;this.handle = setInterval(() => {switch(_type){//增加情况,每帧追加 0.01case 1: this.percent += _step;if(this.percent>=_percent){this.percent = Math.round(_percent * 100) / 100;clearInterval(this.handle);}break;//减少情况,每帧减少 0.01 case -1: this.percent -= _step;if(this.percent<=_percent){this.percent = Math.round(_percent * 100) / 100;clearInterval(this.handle);}break;}this.drawCircle();}, 50);}
把原来的drawCircle()修改为drawAniCircle()函数来执行,并且进度值是通过drawAniCircle()进行传递的。代码如下:
this.cbox1.drawAniCircle(this.percent);
图形如下:
在uniapp中通过canvas进行绘制圆环类图表,这篇算是完结了。通过这几个案例,由㳀入沉,不断学习中沉淀,总结先前经验,吸取更好方法,相信你的开发道路会走的更稳、更远。
uni-app中自定义图表(canvas实现chart图表)开发篇(5)-圆环进度条添加动画效果相关推荐
- vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码 因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- 使用canvas绘制圆环进度条
使用canvas绘制圆环进度条 技术要求 需要一点点数学基础 需要对 canvas 的常见的方法熟悉 一点点数学基础 已知圆心,半径,角度,求圆上的点坐标 canvas 常见的方法 菜鸟教程 扬帆起航 ...
- android自定义view圆环,Android自定义View实现圆环进度条
本文实例为大家分享了android自定义view实现圆环进度条的具体代码,供大家参考,具体内容如下 效果展示 动画效果 view实现 1.底层圆环是灰色背景 2.上层圆环是红色背景 3.使用动画画一条 ...
- 微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
- 用Raphael在网页中画圆环进度条(简化版)
上篇写了用Raphael画圆环进度条(http://boytnt.blog.51cto.com/966121/1074215),这一篇把它简化一下,只画一条比较粗的弧,优点是简单,缺点是不能做渐变色了 ...
- uni-app中自定义图表(canvas实现chart图表)开发篇(1)-圆环带进度条
经常开发中,会遇到各种各样图表,这时大家普遍会想到去找插件.uniapp中常用的有uchart.js和echart.js,这对图表要求不高的项目来说,是很便捷的.但有时会遇到一些定制图表,加上UI的美 ...
- Android 自定义 View:包含多种状态的下载用圆形进度条
前言 最近做项目碰到一个这样的一个需求:需要一个环形的进度条表示一个下载请求的进度加载. 同时要以各种不同的图标展现其下载过程中的各个状态:等待.下载中.暂停.错误.完成. 具体状态对应图标见下图: ...
- 自定义View圆环进度条
相信大家都对自定义view有所了解,今天给大家展示一下我自己写的小Demo,一个自定义环形进度条,进度在不断加载的过程中颜色呈现渐变效果,并且中间的Textview展示进度值,有两个button控制暂 ...
最新文章
- 转帖 javascript事件监听
- 使用python爬虫抓站的一些技巧总结:进阶篇
- WebC.BBS - 网上团队管理-责任心,主动性,积极性划分
- CentOS6安装MySQL 1 - 更新yum源失败
- Windows编译OpenSSL
- 信息系统项目管理师-案例分析专题(二)案例中常见问题找茬笔记
- 【转】Android Studio简单设置
- nginx session共享_Centos下实现nginx负载均衡
- Eclipse使用Team explorer everywhere进行代码管理
- MyBatisPlus_查询篇_入门试炼_01
- git master主分支_Git分支管理策略及简单操作
- 设置环境变量的三种方法【转载】
- python如何把数字转化成字符_python 定义一个dictpython如何将数字转化为字符串
- unity3d 使用GL 方式画线
- android交互xml代码,Unity 与Android的交互(Android studio)
- linux启动java命令
- java学生管理系统登录注册_《Java》— 学生管理系统——登录界面
- 中国广告协会的CAID方案
- 66个求职应聘技巧性问答(三)
- c语言 英文单词频率统计 哈希存储
热门文章
- vue-devtools工具点击open in editor 自动跳转到对应的组件页面
- 区块链项目是如何盈利的
- 【QGIS入门实战精品教程】10.1:QGIS基于DEM数据的地形分析案例教程
- 2020年3大免费又好用的BI工具软件
- java计算机毕业设计科院垃圾分类系统源码+数据库+系统+lw文档+mybatis+运行部署
- js如何修改对象的padding属性
- R 语言中添加辅助线(ggplot2)
- 【Vulnhub】之JIS-CTF-VulnUpload-CTF01
- 红木整装——成为现代装修行业中的新宠
- 第五人格手机游戏在PC上怎么玩?第五人格哪款模拟器好用?