【一】面板移动和缩放

专题【vue开发在线编辑平台】

通过研究墨刀关于操作区滑动的代码，发现它是使用transform: matrix(……);的方法实现的。还不了解该属性的朋友可以看看这篇文章，作者讲的很好。这里简单归纳一下matrix(a, b, c, d, e, f)：

• 平移：只跟e、f有关，e对应x轴，f对应y轴，正数表示往正方向平移，负数表示往方向平移；
• 缩放：只跟a、d有关，a对应x轴缩放，d对应y轴缩放，大于1表示放大，小于1表示缩小；
• 旋转：跟a、b、c、d有关，记住matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)，θ为需要旋转的角度。

理清思路

1. 监听mousewheel事件，根据deltaX和deltaY可以判断页面滚动方向（向上、向下、向左、向右）和缩放情况（放大、缩小）；
2. 对matrix(a, b, c, d, e, f)赋值，x轴偏移量offsetX赋给e，y轴偏移量offsetY赋给f，缩放值scale赋给a和d，最终形如：matrix(scale, 0, 0, scale, offsetX, offsetY)

查看演示请狠狠地点击：移动和缩放示例（手机端无效）