收藏
回答

Canvas2d中真机drawImage坐标混乱的bug

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug Canvas 2d 微信iOS客户端 7.0.12 2.11.1

实现的业务逻辑:

将两张不同的图片(前景+背景)png叠加在canvas上,输出成一张jpg图片。

是将老的逻辑迁移到新的Canvas 2d接口上,老接口没问题,新接口怎么调试输出图片都有问题。dpr等相关各种尝试了一整天,最后定位在drawImage坐标逻辑上。

问题:

drawImage坐标系混乱:请看关键代码

            ctx.fillRect(0,0,canvasRef.width, canvasRef.height)
            ctx.drawImage(bgImage,0,0,canvasRef.width,canvasRef.height);
            ctx.drawImage(fgImage,0,0,canvasRef.width,canvasRef.height);


按照常识,fillRect画出的方块应该完全被两张图所遮挡,因为尺寸一模一样。开发工具调试一切正常,见图:

iOS真机出现

实在无法理解。由于手头android机器故障,麻烦也请确认下是否有这个问题。

复现请看代码片段。具体环境请看:



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

1 个回答

  • momo
    momo
    2020-06-09

    我看你的代码里有动态调整canvas实例的尺寸,这种操作会导致画布变形;

    正确的姿势是先掉用setData变更canvas标签的宽度,然后再获取canvas实例例变更尺寸;

    另:你的代码片段有报错,图片无法下载;

    2020-06-09
    有用
    回复 4
    • 追小命
      追小命
      2020-06-09
      需要有appid配置domain啊,这个我无能为力。。。我知道setData的问题,但这个不应该只影响drawImage吧,按照道理fillRect也应该被影响,变形了也是大家一起变形,总不能一个变一个不变吧
      2020-06-09
      回复
    • momo
      momo
      2020-06-09回复追小命
      一个变一个不变是有可能发生的,尺寸的变化是异步进行的,也就是某些笔画画在了变化前。
      2020-06-09
      回复
    • 追小命
      追小命
      2020-06-09
      那怎么知道尺寸变化完成了?setData的callback只是数据传递完成就回调,尺寸变化怎么回调?我们的老方法是创建一个固定大小的画布,根本不调尺寸。但结果也是乱七八糟的,根本没规律可循
      2020-06-09
      回复
    • momo
      momo
      发表于小程序端
      2020-06-09回复追小命
      setData完了,再取canvas实例并且设置最终的尺寸是可以的,你可以试一下
      2020-06-09
      回复
登录 后发表内容
问题标签