Skip to content

lucaszhu2zgf/mp-progress

Repository files navigation

mp-progress

专注于在小程序中实现圆环形进度条的工具

安装

$ npm install mp-progress --save

用法

传入的单位是rpx,即如果canvas宽度为400rpx,则传入400,后续会自动计算真实尺寸

import MpProgress from 'mp-progress';
...
// 初始化
const mprogress = new MpProgress({
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});

// 开始绘制进度,60代表60%
mprogress.draw(60);

...
<canvas class="canvas" canvas-id="progress"></canvas>

显示模式

效果 解析
正常模式 正常模式(默认)
百分比模式 百分比模式(只需要按需求传入percent即可,相见参数说明)

参数说明

参数名 数据类型 解析 必要参数 示列
canvasId String 页面canvas的id progress
canvasSize Object canvas画布的大小,对应单位是rpx,只需要传入数字即可 {width: 200, height: 300}
percent Number 默认按照360度去计算和显示圆环,如果传入80%则会自动根据canvas尺寸贴底画出最大半圆弧,有效值在50%~100% 100
barStyle Array 圆弧进度样式,按照数组元素的位置顺序渲染,一般第一个元素配置是铺满整个圆弧的底色,第二个元素配置是按照进度百分比渲染圆弧。fillStyle可以是是普通颜色和渐变颜色,使用渐变颜色是需要按照数组的格式传入各个点的位置和颜色信息 [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
needDot Boolean 是否需要显示进度点 false
dotStyle Array 进度点样式配置,最多支持两种样式叠加,为保证进度点的清晰显示第一个点默认添加阴影。如果第一个进度点直径比进度条更大时,为了保证在画布内完整显示进度点,绘制的进度条圆圈必须减少对应的差值,其中shadow是可选的配置,shadow的值是(0, 0, r/2, shadow) dotStyle: [{r: 24, fillStyle: '#fff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]

绘制函数说明

考虑到进度条在一个页面可能多次更新,所以当组件实例化完成之后,需要手动调用draw方法去画图

参数名 数据类型 解析 必要参数
percentage Number 圆弧百分比,比如传入的是60,只会逆时针渲染剩余的60%圆弧

其他说明

问题描述 解决方案
如何设置弧线端点样式 可以在barStyle中任何一个参数项增加lineCap参数,例如:barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}],lineCap有效值可以查看文档
dotStyle 如果包含shadow的话,为了保证shadow在圆环的所有都可以完整展示,会自动缩减进度条的半径