收藏
回答

关于canvas和cover-view结合使用的问题?!

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas cover-view drawImage draw 工具 6.7.1 2.2.2

- 下图是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 内的代码根本就不执行。

最后一次编辑于  2018-08-09
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容