html5 图片手势缩放,如何计算transform-origin

LingYan
  • 220

图片手势缩放

我的思路是,计算手指移动后,两个触摸点的中点相对于图片左上角的坐标,得出transform-origin(即变换中心)
根据手指移动前后的距离,得出缩放比例

然而,按照这个思路,得出效果却有bug,图片在放大/缩小到一定程度,会有严重的抖动、漂移现象


问题排查

如果,不设置transform-origin,图片缩放就没有上面所说的现象。因此,我觉得一定是我计算transform-origin的姿势有问题...

链接
code


问题已解决

不使用动态修改transform-origin的方法

回复
阅读 3.4k
2 个回答

touchstart的时候计算两个手指的中点?

仿射变换
每次变化的时候更新 HTMLElement.style.transform.matrix 的传递参数即可。使用 transform 的优点是变换不会引起浏览器回流,有性能优势,缺点就是如果有事件监听的话,需要逆变换才能拿到真实坐标。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏