(本仙女的第一篇文章吩坝，感謝支持)
最近做小程序需要一個環(huán)形刻度條，發(fā)現(xiàn)有關(guān)微信小程序的類似文章很少，目前只找到了一個關(guān)于H5的canvas繪制刻度條和我需求是一樣的着憨，于是自己改了改。
話不多說务嫡，開始吧甲抖。。心铃。
效果圖
1准谚、首先在wxml上創(chuàng)建一個畫布
<view class="container">
<canvas canvas-id="firstCanvas" type="2d" id="firstCanvas" style="width:200px;height:200px;display:block;"></canvas>
<view class="percentage">{{process}}%</view>
</view>
2、在js中創(chuàng)建畫布,獲取節(jié)點(diǎn)信息去扣。
小程序 獲取節(jié)點(diǎn)信息 的文檔地址：
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
const query = wx.createSelectorQuery()
query.select('#firstCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
ctx = canvas.getContext('2d')
})
3柱衔、繪制刻度線。
obj = {
width: 300,
height: 300,
dx: 20, // 刻度寬度
dy: 4, // 刻度高度
num: 24, // 刻度條數(shù)
r: 70, // 半徑
start: -90, // 開始角度愉棱，與結(jié)束角度相對稱
progress: 75, // 顯示進(jìn)度 （單位百分比）
index: 0, // 開始刻度
defaultColor: '#dee1e4', // 開始顏色
activeColor: '#5CCCFF' // 進(jìn)度條顏色
};
obj.deg = (180 - 2 * obj.start) / obj.num;
canvas.width = obj.width;
canvas.height = obj.height;
for (var x = 0; x < obj.num; x++) { //灰色刻度線
draw(x, obj.defaultColor);
}
function draw(x, color) { // 畫出環(huán)形刻度線
ctx.save();
var deg = Math.PI / 180 * (obj.start + obj.deg * x); // 角度換算弧度
var offsetY = -(Math.sin(deg) * obj.r); // 計(jì)算刻度Y軸位置
var offsetX = -(Math.cos(deg) * obj.r); // 計(jì)算刻度X軸位置
ctx.fillStyle = color;
ctx.translate(obj.width / 2 - offsetX, obj.height / 2 - offsetY); // 修改畫布坐標(biāo)原點(diǎn)
ctx.rotate(deg); // 旋轉(zhuǎn)刻度
ctx.fillRect(0, 0, obj.dx, obj.dy); // 畫出刻度
ctx.restore();
}
4唆铐、實(shí)現(xiàn)動畫效果。
function animate(s, time) {
if (obj.progress == 0) { // 進(jìn)度為0直接退出函數(shù)
return false;
}
draw(s, obj.activeColor);
var num = obj.progress * (obj.num / 100); //格數(shù)計(jì)算
var timmer = setTimeout(function () {
obj.index = s + 1;
if (s >= num) {
clearTimeout(timmer);
} else {
if (s > num - 10) { // 剩余10格動畫減速
animate(obj.index, time + 20);
} else {
animate(obj.index, time);
}
}
}, time)
}
附上完整的js代碼：
let ctx = null
let obj = {}
Page({
data: {
},
onLoad: function (options) {},
onReady() {
this.animation()
},
animation() {
const query = wx.createSelectorQuery()
query.select('#firstCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
ctx = canvas.getContext('2d')
obj = {
width: 300,
height: 300,
dx: 20, // 刻度寬度
dy: 4, // 刻度高度
num: 24, // 刻度條數(shù)
r: 70, // 半徑
start: -90, // 開始角度羽氮，與結(jié)束角度相對稱
progress: 75, // 顯示進(jìn)度 （單位百分比）
index: 0, // 開始刻度
defaultColor: '#dee1e4', // 開始顏色
activeColor: '#5CCCFF' // 進(jìn)度條顏色
};
this.setData({
process: obj.progress
})
obj.deg = (180 - 2 * obj.start) / obj.num;
canvas.width = obj.width;
canvas.height = obj.height;
for (var x = 0; x < obj.num; x++) { //灰色刻度線
draw(x, obj.defaultColor);
}
function draw(x, color) { // 畫出環(huán)形刻度線
ctx.save();
var deg = Math.PI / 180 * (obj.start + obj.deg * x); // 角度換算弧度
var offsetY = -(Math.sin(deg) * obj.r); // 計(jì)算刻度Y軸位置
var offsetX = -(Math.cos(deg) * obj.r); // 計(jì)算刻度X軸位置
ctx.fillStyle = color;
ctx.translate(obj.width / 2 - offsetX, obj.height / 2 - offsetY); // 修改畫布坐標(biāo)原點(diǎn)
ctx.rotate(deg); // 旋轉(zhuǎn)刻度
ctx.fillRect(0, 0, obj.dx, obj.dy); // 畫出刻度
ctx.restore();
}
function animate(s, time) {
if (obj.progress == 0) { // 進(jìn)度為0直接退出函數(shù)
return false;
}
draw(s, obj.activeColor);
var num = obj.progress * (obj.num / 100); //格數(shù)計(jì)算
var timmer = setTimeout(function () {
obj.index = s + 1;
if (s >= num) {
clearTimeout(timmer);
} else {
if (s > num - 10) { // 剩余10格動畫減速
animate(obj.index, time + 20);
} else {
animate(obj.index, time);
}
}
}, time)
}
animate(obj.index, 10)
})
}
})
這基本就實(shí)現(xiàn)了或链，這個項(xiàng)目我已經(jīng)上傳到了github上，希望能幫到你們https://github.com/zhangwei727/wx_circular_scaleBar.git
