类似墨刀的缩放平移功能是怎么实现的

Question

审查元素发现是通过transform: matrix(1, 0, 0, 1, -128, 25)实现缩放的，通过绝对定位实现平移的。原理好像知道，但不得要领

缩放平移gif查看

Answer 1

涉及到矩阵运算，可以参照这个 Demo。
平移的话比较简单。
缩放的思路大概是：

1. 获取当前鼠标位置后，对它应用当前矩阵的逆矩阵得到矢量 A。
2. 对上一步得到的矢量 A 应用缩放后的矩阵得到矢量 B。
3. 将这两个矢量相减并除以当前的缩放值得到最终的偏移值。

Answer 2

可以通过设置 transform: translate(X, Y) 的方式实现缩放，通过修改 transform-origin: e.clentX, e.clientY 来实现平移。
优点是比较直观。
不过缺点有点多：需要用到事件坐标的时候，得先用矩阵把事件坐标换算一下；放大比例小于 1 的时候不能平移；放大比例等于 1 的时候需要做临界处理。