小程序学习(12):组件–彩色环形进度条
2019年9月26日
代码片段
代码片段 https://developers.weixin.qq.com/s/UoErDFma7Ebq
主文件
json
"usingComponents": {
"w-annulus2": "/component/w-annulus2/w-annulus2"
}
wxml
<!--
参数==
percentage=>进度条进度,取值范围0~2
text=>中间文本
size=>文本字体大小,只需要填写数字,单位rpx
-->
<view class="page">
<w-annulus2 percentage='1.2' text='进度1.2' />
</view>
css
.page{
width: 100%;
height: 500rpx;
}
组件
wxml
<!--component/w-annulus2/w-annulus2.wxml-->
<view id="cct" class="all">
<canvas canvas-id='customCanvas' class='canvas' />
<canvas canvas-id='progressBar' class='canvas' />
<view class="viewText" style="font-size: {{size}}rpx;">{{text}}</view>
</view>
css
/* component/w-annulus2/w-annulus2.wxss */
.all{
width: 100%;
height: 100%;
position: relative;
/* border: 1rpx solid red; */
}
.canvas{
width: 100%;
height: 100%;
position: absolute;
}
.viewText{
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: #666666;
}
js
// component/w-annulus2/w-annulus2.js
Component({
/**
* 组件的属性列表
*/
properties: {
percentage: { //百分比
type: Number,
value: 0.6
},
text: { //中间文本
type: String,
value: '完成度···'
},
size: { //文本大小
type: Number,
value: 27
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 生命周期函数--组件挂载后执行
*/
ready: function () {
this.getMySelf();
this.getText();
},
/**
* 组件的方法列表
*/
methods: {
/**
* 方法--获取组件高度等信息
* 并画出整体和进度条
*/
getMySelf() {
const that = this;
var query = wx.createSelectorQuery().in(this);
query.select('#cct').boundingClientRect()
query.exec(function (res) {
that.runA(res[0].width, res[0].height); //画背景黑线
that.runB(res[0].width, res[0].height, that.data.percentage); //画彩色进度
})
},
/**
* 方法--canvas画图--背景
* W => 组件宽度
* Y => 组件高度
*/
runA(W = 100, Y = 100) {
var ctx = wx.createCanvasContext('customCanvas', this);
var R = W < Y ? W : Y;
ctx.setLineWidth(2); //设置宽度
ctx.setStrokeStyle('#666666'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(W / 2, Y / 2, R / 3, 0, 2 * Math.PI, false);
ctx.stroke();//对当前路径进行描边
ctx.draw();
},
/**
* 方法--canvas画图--加载进度条
*/
runB(W = 100, Y = 100, J) {
var pgB = wx.createCanvasContext('progressBar', this);
//设置颜色
var cColor = pgB.createLinearGradient(200, 100, 100, 200);
cColor.addColorStop("0", "#2661DD");
cColor.addColorStop("0.5", "#40ED94");
cColor.addColorStop("1.0", "#5956CC");
var R = W < Y ? W : Y;
pgB.setLineWidth(6);
pgB.setLineCap('round');
var j = 0;
var timeDraw = setInterval(function () {
if (j >= J)
clearInterval(timeDraw);
j = j + 0.01;
pgB.setStrokeStyle(cColor);
pgB.beginPath();
pgB.arc(W / 2, Y / 2, R / 3, -Math.PI / 2, j * Math.PI - Math.PI / 2, false);
pgB.stroke();
pgB.draw();
}, 35)
},
/**
* 方法--获取文本
*/
getText() {
},
}
})