bug1.在IOS下写字时随屏幕滚动;
原设计:将<canvas />放置在<scroll-view>(或<view style="overflow:scroll" />)内部,当手指开始写字时,禁用<scroll-view>的滚动功能,手指离开时恢复滚动功能.
BUG:在【安卓/小程序模拟器/H5】中表现正常,在IOS下表现会先【抖动】一下,然后才能正常写字.
造成原因:IOS切换scroll状态有300毫秒延迟,且题主并未找到禁用方式.
解决方案:增加一个触发按钮,点击后禁用<scroll-view>滚动能力,并让<canvas />进入可绘制状态,当签名完成之后,点击按钮,恢复的<scroll-view>滚动能力,并锁定<canvas />的内容.可再次点击按钮进入绘制状态...
bug2.在微信小程序下悬浮在正常内容之上.
BUG:如图所见:在<scroll-view>(或<view style="overflow:scroll" />)滚动之后,canvas并没有跟随整个页面滚动,而是定在了原处,并悬浮于其它内容之上.
造成原因:<canvas /> 在微信小程序中属于原生组件.而原生组件有一些限制.
划重点:原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。
微信小程序官方文档说明: developers.weixin.qq.com/miniprogram…
解决方案: 默认将<canvas />的高度设置为0,用一张图片在此处占位,当点击绘制的时候,再将<canvas />高度设置为实际高,并将图片隐藏,当绘制完成后,再将<canvas />高度设置为0,并将新绘制的内容重新渲染在占位图片上.
完.
