130 lines
3.8 KiB
JavaScript
130 lines
3.8 KiB
JavaScript
let perfumeNum = 1.5;
|
|
Component({
|
|
properties:{
|
|
percent: {
|
|
type:Number,
|
|
value:100,
|
|
observer:'change'
|
|
},
|
|
percentStr: {
|
|
type:String,
|
|
},
|
|
all:Number,
|
|
sum:Number
|
|
},
|
|
methods:{
|
|
// b、香水余量
|
|
initRing(res) {
|
|
// console.log(res,'aaaa')
|
|
let that = this;
|
|
const canvas = res[0].node
|
|
const ctx = canvas.getContext('2d');
|
|
// console.log("canvas=====>",canvas)
|
|
var circleR = 240 / 2; // 画布的一半，用来找中心点和半径
|
|
ctx.translate(0, 0); // 定义起始点
|
|
console.log(that.data.percent)
|
|
function draw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
// 取色圆环
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = '#eeeff7';//transparent
|
|
ctx.lineWidth = 14;
|
|
ctx.lineCap='round' // 设置圆环端点的形状
|
|
ctx.arc(circleR, circleR-10, circleR - 35, Math.PI, 2 * Math.PI, false);
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
// 进度_香水余量
|
|
ctx.beginPath(); // 起始一条路径，或重置当前路径
|
|
ctx.lineWidth = 14; // 线条宽度
|
|
ctx.lineCap='round' // 线条的结束端点样式
|
|
ctx.arc(circleR, circleR -10,circleR - 35, Math.PI, Math.PI + (that.data.percent > 1 ? 1 :that.data.percent) * Math.PI , false);
|
|
ctx.strokeStyle = "#FFC20E";//transparent
|
|
ctx.stroke();
|
|
canvas.requestAnimationFrame(draw);
|
|
}
|
|
draw();
|
|
},
|
|
|
|
change(newVal, oldVal){
|
|
if(newVal== oldVal) return
|
|
let that = this;
|
|
// console.log('gogogo')
|
|
// 香水余量圆环
|
|
const query = wx.createSelectorQuery().in(this)
|
|
query.select('#percent').fields({ node: true, size: true }).exec((res) => {
|
|
// console.log(res)
|
|
that.initRing(res);
|
|
|
|
})
|
|
},
|
|
|
|
// 复位
|
|
resetTab(){
|
|
let that = this;
|
|
perfumeNum = 2; // 香水余量为100%
|
|
that.setData({
|
|
percent: 100,
|
|
})
|
|
},
|
|
}
|
|
})
|
|
// Page({
|
|
// data: {
|
|
// percent: 12, // 香水余量
|
|
// },
|
|
|
|
// /**
|
|
// * 生命周期函数--监听页面加载
|
|
// */
|
|
// onLoad: function (options) {
|
|
// let that = this;
|
|
// // 香水余量圆环
|
|
// const query = wx.createSelectorQuery()
|
|
// query.select('#percent') .fields({ node: true, size: true }).exec((res) => {
|
|
|
|
// console.log(res)
|
|
// that.initRing(res);
|
|
// })
|
|
// },
|
|
// // b、香水余量
|
|
// initRing(res) {
|
|
// let that = this;
|
|
// const canvas = res[0].node
|
|
// const ctx = canvas.getContext('2d');
|
|
// canvas.width = res[0].width * dpr
|
|
// canvas.height = res[0].height * dpr
|
|
// ctx.scale(dpr, dpr);
|
|
// var circleR = 220 / 2; // 画布的一半，用来找中心点和半径
|
|
// ctx.translate(0, 0); // 定义起始点
|
|
// function draw() {
|
|
// ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
// // 取色圆环
|
|
// ctx.beginPath();
|
|
// ctx.strokeStyle = '#fff';//transparent
|
|
// ctx.lineWidth = 12;
|
|
// ctx.lineCap='round' // 设置圆环端点的形状
|
|
// ctx.arc(circleR, circleR-10, circleR - 35, Math.PI, 2 * Math.PI, false);
|
|
// ctx.stroke();
|
|
// ctx.closePath();
|
|
// console.log("香水余量")
|
|
// // 进度_香水余量
|
|
// ctx.beginPath(); // 起始一条路径，或重置当前路径
|
|
// ctx.lineWidth = 6; // 线条宽度
|
|
// ctx.lineCap='round' // 线条的结束端点样式
|
|
// ctx.arc(circleR, circleR-10, circleR - 35, Math.PI,perfumeNum * Math.PI, false);
|
|
// ctx.strokeStyle = "#00CED1";//transparent
|
|
// ctx.stroke();
|
|
// canvas.requestAnimationFrame(draw);
|
|
// }
|
|
// draw();
|
|
// },
|
|
|
|
// // 复位
|
|
// resetTab(){
|
|
// let that = this;
|
|
// perfumeNum = 2; // 香水余量为100%
|
|
// that.setData({
|
|
// percent: 100,
|
|
// })
|
|
// },
|
|
// })
|