评论

画布canvas.draw方法callback真机下不执行的问题解决

CanvasContext.draw(boolean reserve, function callback) 一些场景中部分真机 callback 回调未触发的问题分析与解决

ctx.setFillStyle('#F83');

ctx.fillRect(0, 0, 400, 800);

ctx.draw(true,()=>{//第一次调用draw方法

if (hasImage) {

      wx.chooseImage({

        count: 1,

        sizeType: ['original', 'compressed'],

        sourceType: ['album', 'camera'],

        success (res) {

          const tempFilePaths = res.tempFilePaths

          ctx.drawImage(tempFilePaths[0], 10, 10, 300, 300);//做了一个画图动作

          ctx.draw(true, drawAfterToTempFile);//第二次调用draw方法,真机下drawAfterToTempFile方法会被执行

        }

      })

    } else {//完成最后绘制

      //部分真机下drawAfterToTempFile回调不会被执行

      ctx.draw(true, drawAfterToTempFile);//第二次调用draw方法

      //猜测由于第二次调用draw方法与第一次调用之间画布没有任何其它动作,所以第二次draw方法并没有实际执行到触发callback回调的地方,导致callback看似失效。

      //修改方法一:在第二次调用draw方法之前执行一些动作,例如:ctx.moveTo(0,0);ctx.fill();

      //修改方法二:既然第二次调用draw方法没有任何绘制动作,那就直接调用执行drawAfterToTempFile()就行了,没必要包一个draw方法。

    }

});


var drawAfterToTempFile = function() {

    wx.canvasToTempFilePath({

      canvasId: "myCanvasId",

      success(res) {

        console.log('绘制图片存为临时文件:', res.tempFilePath)

      },

      fail(err) {

        console.log('绘制图片存为临时文件失败:', err);

       }

    }, _this)

}


点赞 1
收藏
评论

2 个评论

  • 邱一欢
    邱一欢
    2019-06-21

    安全一点 只调用一个draw(), 多次调用有各种问题。 这个东东不稳定。

    1. 画显示的骨架

    2. 准备好要画图的素材(图片下载好),

    3. 开始画图

    4. 调用draw() 显示再屏幕上

    2019-06-21
    赞同
    回复
  • A notorious liar(小花猫)
    A notorious liar(小花猫)
    2019-06-21

    直接选择图片调用canves去绘制是没办法执行的,要先缓存到本地然后再去调用

    2019-06-21
    赞同
    回复
登录 后发表内容