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

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

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

理清思路

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

查看演示请狠狠地点击:移动和缩放示例(手机端无效)

移动和缩放demo演示录屏

1+
浏览:416

0 条评论

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up