前端使用了 canvas和text,调用了 page里的data.在 onshow中 查询了云数据库数据,并进行了 this.setData 操作,修改了相关数据。发现前端,字段数据进行了更新,但是canvas不更新。跳转至另一个页面再回来,canvas显示正确各位大神,这种情况需要如何处理?
感谢各位大神,抱歉家里昨天断网,代码如下,先拜谢了:data: {
name:’’,
time_period: ‘20190423,20190426’,
last_7_close: ‘1,2,3,4,5,6,7’
},
onLoad: function (options) {
db.collection(‘counters’).where({
symbol: app.globalData.code
}).get().then(res => {
this.setData({
name:res.data[0].name,
last_7_close:res.data[0].last_7_close
});
console.log(res.data[0].name)
});
// 页面加载
},
onReady() {
// 页面加载完成
},
onShow() {
// 页面显示
var startX = 50; //画布的大小左上角 50个像素,确定边框的大小的
var startY = 150; //画布的大小左上角,向下300个像素
var close = this.data.last_7_close.split(’,’);
var period = this.data.time_period.split(’,’);
var close2 = close[1];
var close3 = close[2];
var close4 = close[3];
var close5 = close[4];
var close6 = close[5];
var close7 = close[6];
const aa = 0.5
var dates = [period[0], period[1]];
var data = [close2, close3, close4, close5, close6, close7]; //坐标轴的点
var max = Math.max.apply(null, data);
var min = Math.min.apply(null, data);
var data2 = max - min;
var dataY = [min.toFixed(2), (min + data2 * 0.2).toFixed(2), (min + data2 * 0.4).toFixed(2), (min + data2 * 0.6).toFixed(2), (min + data2 * 0.8).toFixed(2), max.toFixed(2)]
var point = [[15, (close2 - min) / (data2 / 120) + 5], [50, (close3 - min) / (data2 / 120) + 5], [85, (close4 - min) / (data2 / 120) + 5], [120, (close5 - min) / (data2 / 120) + 5], [155, (close6 - min) / (data2 / 120) + 5], [190, (close7 - min) / (data2 / 120)]];
const ctx = wx.createCanvasContext(‘awesomeCanvas’);
function creat(ctx) {
ctx.strokeStyle = “white”;
ctx.lineCap = “round”;
ctx.beginPath(); //什么意思 开始画一个元素,如果画两条线的化,就需要写两个beginPath()ctx
ctx.moveTo(startX, 25 * aa); //起始点100,50 //注意了,这里指的是画布的坐标而不是坐标轴的坐标
ctx.lineTo(startX, startY);//画线到 100,600 //这个是纵坐标的直线
ctx.moveTo(startX, startY); //移动到 100,600;
ctx.lineTo(290, startY);//画线到 650,600 ?是X轴,因为画布是从左上角开始的
ctx.closePath();
ctx.stroke();
};
function insert2(ctx) {
var x = 50 * aa;
var y = 300 * aa;
//绘制横坐标
for (var i in dates) {
ctx.fillStyle = “white”;
ctx.fillText(dates[i], x + 20, y + 20 * aa);
x += 400 * aa
}
x = 50 * aa;
y = 300 * aa;
for (var i in dataY) {
ctx.fillStyle = “white”;
ctx.fillText(dataY[i], x - 20 * aa, y);
y -= 50 * aa;
}
};
function points(ctx) {
ctx.lineJoin = “round”;
ctx.lineCap = “round”;
ctx.beginPath();
ctx.arc(point[0][0] + 50, startY - point[0][1], 1, 0, 2 * Math.PI);
ctx.moveTo(point[0][0] + 50, startY - point[0][1]);
ctx.arc(point[1][0] + 50, startY - point[1][1], 1, 0, 2 * Math.PI);
ctx.lineTo(point[1][0] + 50, startY - point[1][1]);
ctx.lineTo(point[2][0] + 50, startY - point[2][1]);
ctx.strokeStyle = “#108ee9”;
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.arc(point[2][0] + 50, startY - point[2][1], 1, 0, 2 * Math.PI);
ctx.arc(point[3][0] + 50, startY - point[3][1], 1, 0, 2 * Math.PI);
ctx.lineTo(point[3][0] + 50, startY - point[3][1]);
ctx.arc(point[4][0] + 50, startY - point[4][1], 1, 0, 2 * Math.PI);
ctx.lineTo(point[4][0] + 50, startY - point[4][1]);
ctx.moveTo(point[4][0] + 50, startY - point[4][1]);
ctx.arc(point[5][0] + 50, startY - point[5][1], 1, 0, 2 * Math.PI);
ctx.lineTo(point[5][0] + 50, startY - point[5][1]);
ctx.lineWidth = 4;
ctx.stroke();
};
creat(ctx);
insert2(ctx);
points(ctx);
ctx.fillText(“Price Trend”, 140, 14);
ctx.draw();
},