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

Question

图片手势缩放

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

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

---

问题排查

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

链接
code

---

问题已解决

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

Answer 1

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

Answer 2

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