this.setData 后 canvas引用的数据不根据新数据渲染,如何操作?
发布于 5 年前 作者 qiaogang 1800 次浏览 来自 官方Issues

前端使用了 canvas和text,调用了 page里的data.在 onshow中 查询了云数据库数据,并进行了 this.setData 操作,修改了相关数据。发现前端,字段数据进行了更新,但是canvas不更新。跳转至另一个页面再回来,canvas显示正确各位大神,这种情况需要如何处理?

5 回复

你是draw函数之后的setData嘛?

this.setData 后,canvas进行了重新绘制或刷新了吗?如果不刷新,显示的canvas肯定不会更新。

canvas需要用draw()才会更新,setData没用的。

已经掉了draw() 还画不出来的话,你应该是华为手机吧?

不要再刚打开含有canvas的页面时立刻去描画,延迟1S

感谢各位大神,抱歉家里昨天断网,代码如下,先拜谢了: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();
  },

提供复现的代码片段

回到顶部