收藏
回答

安卓 canvas组件draw函数的回调不执行

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas、CanvasContext.draw() 客户端 6.7.1 2.4.0

canvas遮挡了底部按钮,canvas在组件的组件内,按钮在页面


方法一:

cover-view包裹页面按钮,ios没问题,安卓还是被canvas遮挡;又把按钮放到组件内,嵌套在canvas内还是被遮挡;

方法二:

2、canvas转图片,ios没问题,安卓draw()的回调不执行,下面的代码只能打印到‘开始画’,然后就是fail了。


查了论坛,发现近期很多人碰到canvas的draw()回调不执行的问题,希望官方大大能看到这篇文章,并排查一下问题。多谢~


setTimeout(() => {

    console.log('开始画');

    ctx.draw(true, () => {

        console.log('开始转换');

        wx.canvasToTempFilePath({

            x: 0,

            y: 0,

            width: 690,

            height: 552,

            canvasId: canvasId,

            success: res => {

                console.log('success', res.tempFilePath)

            },

            fail: err => {

                // eslint-disable-next-line

                console.log('fail', err, err.stack);

            }

        }, this);

    });

}, 4000);


回答关注问题邀请回答
收藏

5 个回答

  • H TWO O
    H TWO O
    2020-01-19

    我也遇到同样的问题,在网上找了说ctx.draw(true)改为ctx.draw(false)就行,但是测试了画布会变空白,达不到想要的效果,后来我改成

    ctx.fillStyle="#10131c";
    ctx.draw(true,function(){ 执行 })
    

    在ctx.draw的前面加一步绘画操作,就能成功回调了,希望能帮到大家

    2020-01-19
    有用 2
    回复 2
    • interesting
      interesting
      2020-08-24
      测试可行,谢谢哥,
      2020-08-24
      1
      回复
    • 哆哆
      哆哆
      2021-11-06
      测试可行,谢谢哥!帮大忙!
      2021-11-06
      回复
  • lx
    lx
    2019-01-09

    兄弟解决了吗?碰到一样的问题,求解决方案

    2019-01-09
    有用
    回复 1
    • 2019-01-09

      已经解决了啊,看下面的回复,你试下

      2019-01-09
      回复
  • 少年癸
    少年癸
    2018-12-26

    谢谢!折腾了我两天的问题在你这解决了,谢谢!

    2018-12-26
    有用
    回复 2
    • 2018-12-26

      哈哈哈~开心...

      2018-12-26
      回复
    • 少年癸
      少年癸
      2018-12-26回复

      加个WeChat一起交流嘛。 aW1fbXJfbHlubg==

      2018-12-26
      回复
  • 旅行
    旅行
    2018-11-29

    遇到同样的问题,canvas放在组件内 draw() 回调不执行,放在 page内,可以

    2018-11-29
    有用
    回复 7
    • 2018-12-17

      canvas.draw(true, setTimeout(() => {

          this.canvasToImage();    // canvas转图片的操作

      }, 1000));


      你尝试这样试试看,我这边是可以了


      2018-12-17
      回复
    • 城主
      城主
      2019-01-27回复

      你这等同于

      canvas.draw(true)

      setTimeout(() => this.canvasToImage(), 1000)


      渲染时间超过一秒就挂了。。。

      2019-01-27
      回复
    • 2019-01-28回复城主

      这不等同吧...

      CanvasContext.draw(boolean reserve,function callback)

      其中 function callback 是绘制完成后执行的回调函数


      2019-01-28
      回复
    • 城主
      城主
      2019-01-28回复

      你需要補一下js基礎。。。。,你傳進去的callback就是一個timerId

      2019-01-28
      回复
    • 2019-01-28回复城主

      那你就把延迟时间设长点,这是目前我能解决的方法

      如果你有更好的,欢迎提供

      2019-01-28
      回复
    查看更多(2)
  • 是小白啊
    是小白啊
    2018-11-28

    提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-11-28
    有用
    回复
登录 后发表内容