实际开发中需要在不同的位置绘制某个相同的形状,再创建剪切区域;由于形状较为复杂,所以将形状绘制过程写成函数,在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等方法时,真的以当前上下文重新创建了一次路径。。。
你好,问题已复现,我们会在后续版本中进行修复。
4天过去了
可以试试先 clip() 再 restore()
只画一个形状是可以先clip再restore,可先restore后clip是因为我要用多个形状做剪切,画每个形状时我需要用translate调整位置,画完再restore恢复画下一个形状,最后进行clip,现在的问题就在于restore会导致之前已经建立的形状位置改变。
明白,我这边排查了一下确实有这个问题,短时间内没有很好的修复方法,我们也在对 canvas 组件重构,后面就不会有这个问题。
clip在ios上会有问题,https://developers.weixin.qq.com/community/develop/doc/000402e99385406a7d087ac3359c00
emmm,那个也是我提的问题,这是另一个问题,和clip无关,是restore的问题
嗯