langyuxiansheng/vue-sign-canvas

在移动端时,如果<sign-canvas>标签距离左侧有间距, 画笔和绘制的内容有偏移

Closed this issue · 4 comments

在移动端时,如果标签距离左侧有间距, 画笔和绘制的内容有偏移

好的 您的问题已收到,进行测试确认后会更新到下一版本上

绘制路径的偏移,正好是标签距离屏幕上方和左侧的距离,正使用这个组件开发项目,也遇到这个问题,应该没有配置可以解决。
研究了组件源码:我在本地修复了这个bug,作者可以参考一下修改方案:
在移动端中,e.targetTouches[0].pageX是获取屏幕触点与屏幕左侧距离,但是canvas元素不一定是刚好充满整个屏幕,所以需要减去canvas元素与屏幕左侧的距离(可以使用getBoundingClientRect()函数获取),pageY也是同理,这样就可以解决绘制路径偏移的问题。
image

您好,感谢您的反馈和建议,移动端偏差的问题在1.0.4的版本中解决了,您可以更新版本测试一下.
@tzy19920902 @xiaohuyahappy

最近发现,getBoundingClientRect()这个方法也有个bug(如果页面滚动后,不是最初始的情况下),移动端绘制的轨迹仍然和画笔有位置的便宜.目前已经修复了.如果您还在使用这个组件,请更新到新版.1.0.6