微信小程序taro版本ios下 ScrollView嵌套Canvas滚动无效

[liukexina]

微信小程序taro版本ios下 ScrollView 嵌套Canvas，Canvas部分滚动无效

原因：猜测是canvas层级或者ios下某个属性（ -webkit-overflow-scrolling: touch）影响 解决：用 image 组件替代 canvas

• 在 canvas 上绘制图形/图像
• 将 canvas 转换成媒体图片
• 隐藏 canvas ，显示 image

[liukexina]

第一步：在 canvas 上绘制图形/图像 Taro.createCanvasContext 是旧的接口，微信小程序已经不进行接口维护了

var context = wx.createCanvasContext('canvas-id')

可以用Canvas代替该api创建 canvas 的绘图上下文 CanvasContext 对象

const query = Taro.createSelectorQuery()
query
    .select('#id')
    .context((res) => {
          res.context
    }).exec()

因为context获取实在回调函数里，所以需要注意获取context之后的操作也要在回调中进行，否则会出现先执行后续操作才获取到context

这里的关键点在于第二步，如何将 canvas 转换成媒体图片？去官方文档一查，有现成的 API ： Taro.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片

ctx.draw(false, function() {
    wx.canvasToTempFilePath({
        x: 0, // 画布区域的左上角横坐标
        y: 0, // 画布区域的左上角纵坐标
        width: 150, // 画布区域的宽度
        height: 130, // 画布区域的高度
        destWidth: 150, // 输出的图片的宽度
        destHeight: 130, // 输出的图片的高度
        canvasId: 'canvas', // 画布标识，传入 <canvas> 组件的 canvas-id
        fileType: 'png', // 目标文件的类型
        success(res) {
            this.setData({
                canvasUrl: res.tempFilePath
            })
        }
    })
})

第三步：隐藏 canvas ，显示 image 说到隐藏，可能你第一时间想到的是 display: none opacity: 0 之类的方法，可是在小程序中加上这些属性后 canvas 将会变得不可绘制，这里采用将其定位到屏幕之外的方法：

canvas {
    position: absolute;
    left: -999px;
}

[liukexina]

补充：设置生成图片的格式filetype，默认为jpg filetype 建议最好选择 png ，选择 jpg 在安卓系统中图片底色为黑色，不明原因