- 下图是iPhone7初始加载:【预期效果】
- 下图是初始加载完成后,点击“重绘”按钮:
Android系统表现正常:Android 8.0,手机型号:华为荣耀 V10,微信版本:6.6.7
- 需求描述
canvas绘制一张背景图,然后在canvas上覆盖一张人物头像,动态更改头像的位置
- 页面结构
canvas内放置了cover-view,cover-view内放置了cover-image
--- “重绘”功能:重绘只是随机改变了头像的左边距和上边距,并未改变尺寸。
- 场景描述
1、开发工具里一切正常(初始加载的绘制、选图绘制、重绘)
2、Android端一切正常(除初始加载未显示绘制内容外,其他两种操作正常)
3、iOS端(均不正常)
- 问题描述
对于场景3,操作与问题描述如下:
操作1:
初始加载时的绘制内容未显示(包括画布和canvas),
然后通过“选图”进行第一次操作,这时是正常的(步骤A),
再进行第二次选图,从这次开始往后就不正常了,表现在左上角的头像尺寸上,如iOS截图;
操作2:
重新编译后,从步骤A开始,
再进行“重绘”操作,问题依旧,cover-view还是不正常。
以上两种操作的cover-view的定位是 position: absolute;
修改为 position: relative; 后,效果表现更糟糕。
- 问题总结
问题只在iOS上有。出现的问题场景,都是从【第二次绘制】开始的,而问题都表现在cover-view上
- 问题猜想:
原因-1:canvas和cover-view结合使用时,对cover-view的二次更改操作,会导致其出现错误
原因-2:cover-view的定位对其呈现有直接影响(目前只发现在canvas下)
【希望官方可以关注下我的问题,期待给予原因分析和解决方案!】
最后,画布的draw方法的reverse参数说明:非必填。可是不填的话,callback 内的代码根本就不执行。
官方可否回复一下?