收藏
回答

canvas的restore会改动之前创建的路径位置

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 客户端 7.0.2 2.5.1

实际开发中需要在不同的位置绘制某个相同的形状,再创建剪切区域;由于形状较为复杂,所以将形状绘制过程写成函数,在save与restore之间,通过translate变换原点,调用绘制形状的方法;最后clip实现需求。


这种方式在HTML5 canvas上没有问题,

但在小程序的canvas上,restore之后在clip,创建的剪切形状的位置是translate之前的位置。(经测试,restore之后fill或stroke也有这个问题


按正常的逻辑,之前创建的路径被确立,restore只应修改绘图上下文,不应修改已创建的路径,HTML5 Canvas的行为是这样的,而小程序的canvas似乎是在调用fill,stroke,clip等方法时,以当前绘图上下文重新创建了一次路径。


如果我在save与restore之间填充了路径,于restore后再调用clip,就会出现两个矩形剪切区域,说明在调用fill,stroke,clip等方法时,真的以当前上下文重新创建了一次路径。。。




最后一次编辑于  2019-01-28
回答关注问题邀请回答
收藏

3 个回答

  • hexford~🐶
    hexford~🐶
    2019-01-31

    你好,问题已复现,我们会在后续版本中进行修复。

    2019-01-31
    有用
    回复
  • Maverick
    Maverick
    2019-01-31

    4天过去了

    2019-01-31
    有用
    回复 3
    • Eric Huang
      Eric Huang
      2019-04-10

      可以试试先 clip() 再 restore()

      2019-04-10
      回复
    • Maverick
      Maverick
      2019-04-17回复Eric Huang

      只画一个形状是可以先clip再restore,可先restore后clip是因为我要用多个形状做剪切,画每个形状时我需要用translate调整位置,画完再restore恢复下一个形状,最后进行clip,现在的问题就在于restore会导致之前已经建立的形状位置改变。

      2019-04-17
      回复
    • Eric Huang
      Eric Huang
      2019-04-17回复Maverick

      明白,我这边排查了一下确实有这个问题,短时间内没有很好的修复方法,我们也在对 canvas 组件重构,后面就不会有这个问题。

      2019-04-17
      1
      回复
  • 微盟
    微盟
    2019-01-28

    clip在ios上会有问题,https://developers.weixin.qq.com/community/develop/doc/000402e99385406a7d087ac3359c00

    2019-01-28
    有用
    回复 2
    • Maverick
      Maverick
      2019-01-28

      emmm,那个也是我提的问题,这是另一个问题,和clip无关,是restore的问题

      2019-01-28
      回复
    • 微盟
      微盟
      2019-01-28回复Maverick

      2019-01-28
      回复
登录 后发表内容