收藏
回答

this.setData 后 canvas引用的数据不根据新数据渲染,如何操作?

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


最后一次编辑于  09-12  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

5 个回答

  • 恩喆
    恩喆
    09-14

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

    09-14
    赞同
    回复
  • 关耳白告予
    关耳白告予
    09-12

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

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

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

    09-12
    赞同
    回复 1
    • 恩喆
      恩喆
      09-14
      不是华为手机啊,就是开发工具的模拟器
      09-14
      回复
  • 王伟
    王伟
    09-12

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

    09-12
    赞同
    回复 1
    • 恩喆
      恩喆
      09-14
      请教下,怎么重新绘制?写两遍draw
      09-14
      回复
  • 天道酬勤
    天道酬勤
    09-12
    你是draw函数之后的setData嘛?
    09-12
    赞同
    回复 1
    • 恩喆
      恩喆
      09-14
      不是,在 onload就setData了,draw是在 onshow
      09-14
      回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    09-12

    提供复现的代码片段

    09-12
    赞同
    回复 1
    • 恩喆
      恩喆
      09-14
      已经在后面提供代码,感谢
      09-14
      回复
问题标签