收藏
回答

Component中canvas的draw回调函数无法进入

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug Canvas 客户端 7.0.0 2.4.2

- 当前 Bug 的表现(可附上截图)

    Component中canvas的draw回调函数无法进入, 只打印了1

- 预期表现

    回调函数会进入,并打印1 和 2

- 复现路径

见Demo

- 提供一个最简复现 Demo

    const context = wx.createCanvasContext('xx_canvas');

    context.setFillStyle('red')

    context.fillRect(10, 10, 150, 100)

    console.log("1");

    context.draw(false, function(e) {

        console.log("2");

        // do something...

        wx.canvasToTempFilePath({

            x: 0,

            y: 0,

            width: 650,

            height: 960,

            canvasId: 'xx_canvas',

            fileType: 'png',

            success: function (res) {

                let pic = res.tempFilePath;

                console.log(pic);

                wx.previewImage({

                    urls: [res.tempFilePath],

                })

            }

        });

    })


只打印了“1”,未打印2.


最后一次编辑于  01-07
回答关注问题邀请回答
收藏

4 个回答

  • SoulBringer
    SoulBringer
    01-07

    Draw回调加延时换成setTimeout就好了,代码如下


    const context = wx.createCanvasContext('xx_canvas');
     
       context.setFillStyle('red')
     
       context.fillRect(10, 10, 150, 100)
     
       console.log("1");
     
       context.draw(false, setTimeout(function(e) {
     
           console.log("2");
     
           // do something...
     
           wx.canvasToTempFilePath({
     
               x: 0,
     
               y: 0,
     
               width: 650,
     
               height: 960,
     
               canvasId: 'xx_canvas',
     
               fileType: 'png',
     
               success: function (res) {
     
                   let pic = res.tempFilePath;
     
                   console.log(pic);
     
                   wx.previewImage({
     
                       urls: [res.tempFilePath],
     
                   })
     
               }
     
           });
     
       },300))
    01-07
    赞同 3
    回复 1
    • Ethan
      Ethan
      01-07

      谢谢,可以了。

      01-07
      回复
  • 史周浩
    史周浩
    01-07

    draw的callback函数外面包一层等待canvas渲染的时间,不同设备有部分差异,200毫秒基本都能满足

    01-07
    赞同 1
    回复
  • Stephen
    Stephen
    01-07

    const context = wx.createCanvasContext('xx_canvas', this)


    wx.canvasToTempFilePath 也要加上第二个参数 this

    01-07
    赞同
    回复 3
    • Ethan
      Ethan
      01-07

      模拟器中调试加了this还是无法进入哈。

      01-07
      回复
    • Ethan
      Ethan
      01-07

      wx.canvasToTempFilePath  第二个参数加上this也无法进入,报"canvasToTempFilePath: fail canvas is empty" 错误。

      01-07
      回复
    • silence
      silence
      02-21回复Ethan

      你好,请问你的问题怎么解决的,我也遇到这个问题了

      02-21
      回复
  • 卢霄霄
    卢霄霄
    01-07

    再读一遍API~

    https://developers.weixin.qq.com/miniprogram/dev/api/wx.createCanvasContext.html

    01-07
    赞同
    回复 10
    • Ethan
      Ethan
      01-07

      需要加第二个参数加this? 加了还是不行。

      01-07
      回复
    • silence
      silence
      02-21

      不好意思,看了文档也没看明白,第二个参数到底该传什么,是this吗

      02-21
      回复
    • 卢霄霄
      卢霄霄
      02-21回复silence

      组件里使用要传this,如果canvas的宽高是动态设置的,还要setTimeout才行

      02-21
      回复
    • silence
      silence
      02-21回复卢霄霄

      嗯嗯,问题解决了,上次也是您帮忙解决了问题,非常感谢

      02-21
      回复
    • 卢霄霄
      卢霄霄
      02-21回复silence

      不客气~

      02-21
      回复
    查看更多(5)