BUG: 支付宝小程序, f6-alipay在页面的位置会导致点击位置不准确

antvis / F6

F6 is a graph visualization engine which provides quick and smooth operations on mobile devices.

https://f6.antv.vision

MIT License

134 stars 21 forks source link

BUG: 支付宝小程序, f6-alipay在页面的位置会导致点击位置不准确 #116

Closed ICMI closed 2 years ago

ICMI commented 2 years ago

Describe 支付宝小程序目前使用f6-alipay做了一层canvas的封装，如果该组件出现在页面顶部，一切工作正常。但是如果出现以下情况，会出现点击位置偏移，比如点击不到节点的情况。

f6-alipay 初始化后，位置发生变化，比如随着交互变化，隐藏了部分模块，canvas的位置自然上移
f6-alipay 的节点路径上，某个祖先节点高度100%并允许滚动的时候

ICMI commented 2 years ago

这个问题根源在于支付宝小程序的canvas组件，多指触摸会有问题，f6-alipay使用view组件模拟canvas组件的事件触发。模拟的方法就是使用canvas的在文档中坐标和触摸点的坐标做差值，最终拿到相对于canvas左上角的位置。所以在canvas的位置变化时，或者触摸点和canvas计算位置参考的原点不一致的时候，会导致模拟的方法失效。

目前增加了 updateEventOffsetFlag 属性，位置更新的时候，翻转该标志位通知 f6-alipay 更新初始位置，能解决一部分问题。canvas组件的问题正在和官方沟通

ICMI commented 2 years ago

目前会支付宝58版本支持到 canvas 多点触摸，而为了兼容旧版本，f6-alipay 中 updateEventOffsetFlag 属性会一直存在。也就是如果遇到了canvas组件位置变化的情况下，使用方式上并不会有任何改进，修复收益不大，暂时不做更多处理。如遇到该问题，先使用updateEventOffsetFlag，并尽量让canvas组件处在正常流中。