收藏
回答

canvas画图,使 ctx.rotate()旋转图像,为何图像还会偏移?

canvas绘图,调用wx.createCanvasContext();

// 旋转前

ctx.drawImage(a.imgurl1, x, y, a.tempImgWidth, a.tempImgheight);

ctx.setStrokeStyle('#fd749c'

ctx.setLineDash([5,5], 10);

ctx.strokeRect(x, y, a.tempImgWidth, a.tempImgheight)

//旋转后

ctx.rotate(0.2880659);//大概16.5°

ctx.drawImage(a.imgurl1, x, y, a.tempImgWidth, a.tempImgheight);

ctx.setStrokeStyle('#fd749c');

ctx.setLineDash([5,5], 10);

ctx.strokeRect(x, y, a.tempImgWidth, a.tempImgheight)

结果如下:

官方文档的示例确实也偏移了,有什么办法不让整个图片偏移,仅以左上角旋转即可,基础库版本为2.10的。

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

2 个回答

  • 邱一欢
    邱一欢
    01-17

    中心点没设置吧, translate


    01-17
    赞同
    回复 1
    • 无知有识
      无知有识
      01-17
      你说的坐标轴原点吧?默认不就是画布左上角吗,而且我也试过在画图前 设置ctx.translate(0, 0),没有什么用
      01-17
      回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    01-17

    你要看偏移的中心点是哪个点

    01-17
    赞同
    回复 4
    • 无知有识
      无知有识
      01-17
      CanvasContext.rotate(),官文说的是以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改。你们说的中心点是哪个点,我理解的是图片的左上角,不是整个画布的左上角
      01-17
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      01-17回复无知有识
      来 老哥写个代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      01-17
      回复
    • 无知有识
      无知有识
      01-17回复仙森ღ₅₂₀¹³¹⁴
      不用了不用了,我知道了,还是官网这句话,以原点为中心顺时针旋转当前坐标轴。我理解不到位,要想以图片左上角为中心旋转,那就得使用 translate 把图片左上角设置为画布的坐标原点。
      01-17
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      01-17回复无知有识
      好滴。666
      01-17
      回复
登录 后发表内容
问题标签