在前端开发中，我们经常需要处理用户的手势事件，比如缩放、旋转等。而 npm 包 zoom-gesture 可以优雅地解决这个问题。本文将介绍如何使用 zoom-gesture。
安装
使用 npm 安装 zoom-gesture，命令如下：
npm install zoom-gesture --save
引入
在需要使用 zoom-gesture 的文件中引入模块：
import ZoomGesture from 'zoom-gesture';
或者使用 require 引入：
var ZoomGesture = require('zoom-gesture');基本用法
实例化
const zoomGesture = new ZoomGesture({
dom: document.getElementById('zoom'), // 需要监听事件的 dom 元素
scale: true, // 是否启用缩放
onZoomStart,
onZoom,
onZoomEnd,
});zoomGesture 实例化需要传入一个配置对象和三个回调函数，其中配置对象支持以下参数：
| 参数 | 说明 | 类型 |
|---|---|---|
| dom | 需要监听事件的 dom 元素 | Element |
| scale | 是否启用缩放 | Boolean |
| onZoomStart | 缩放开始时触发的回调函数 | Function |
| onZoom | 每次缩放时触发的回调函数 | Function |
| onZoomEnd | 缩放结束时触发的回调函数 | Function |
| onRotate | 每次旋转时触发的回调函数 | Function |
| onRotateEnd | 旋转结束时触发的回调函数 | Function |
| doubleTap | 是否启用双击缩放 | Boolean |
| doubleTapMul | 双击缩放倍数 | Number |
| zoomMax | 缩放的最大倍数 | Number |
| zoomMin | 缩放的最小倍数 | Number |
| zoomStart | 缩放初始倍数 | Number |
| direction | 缩放方向，"x" 表示横向，"y" 表示纵向，"all" 表示任意方向 | String |
缩放
-- -------------------- ---- ------- -------- ------------------ - -- ---- - -------- ------------- - -- ----- ----------------- ---------- -------------------- ------------- --------------------- -------------- --------------------- -------------- - -------- ---------------- - -- ---- -
当用户进行缩放操作时，回调函数 onZoomStart 会触发，随后多次触发 onZoom，最后缩放结束时触发 onZoomEnd。event 的属性如下：
| 属性 | 说明 | 类型 |
|---|---|---|
| deltaX | 缩放中心点距离上次缩放中心点在 x 轴方向的距离 | Number |
| deltaY | 缩放中心点距离上次缩放中心点在 y 轴方向的距离 | Number |
| scale | 缩放倍数的变化量 | Number |
| scaleX | 缩放倍数 x 方向的变化量 | Number |
| scaleY | 缩放倍数 y 方向的变化量 | Number |
| clientX | 缩放中心点在视口中的 x 坐标 | Number |
| clientY | 缩放中心点在视口中的 y 坐标 | Number |
| originX | 缩放中心点在 dom 元素中的 x 坐标 | Number |
| originY | 缩放中心点在 dom 元素中的 y 坐标 | Number |
| returnValue | 是否阻止默认行为 | Boolean |
旋转
function onRotate(event) {
// 每次旋转时 event.returnValue 表示是否阻止默认行为
console.log('rotation', event.rotation); // 旋转角度的变化量
}
function onRotateEnd(event) {
// 旋转结束
}当用户旋转元素时，回调函数 onRotate 会被触发，每次旋转结束时触发 onRotateEnd。
双击缩放
-- -------------------- ---- ------- ----- ----------- - --- ------------- ---- -------------------------------- ------ ----- ---------- ----- ------------- -- ------------ ------- ---------- ---
启用双击缩放只需设置参数 doubleTap 为 true，同时可以通过 doubleTapMul 参数设置缩放倍数。
禁用缩放
const zoomGesture = new ZoomGesture({
dom: document.getElementById('zoom'),
scale: false, // 禁用缩放
onZoomStart,
onZoom,
onZoomEnd,
});如果不需要缩放功能，可将 scale 参数设置为 false。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------- ------------------------
-------
----- -
------ ------
------- ------
----------- -----
------- --- ----- -----
-
--------
-------
------
---- ----------------
-------
--------
------ ----------- ---- ---------------
----- ----------- - --- -------------
---- --------------------------------
------ -----
------------
-------
----------
---
-------- ------------------ -
-------------------------- -------------
-
-------- ------------- -
--------------------- -------------
----------------- - ----- -- ------
-
-------- ---------------- -
------------------------ -------------
-
---------
-------以上代码中，我们创建了一个 div 元素，并用样式设置了它的大小和样式。在 script 标签中，我们引入 zoom-gesture 模块并实例化，同时设置了缩放相关的回调函数。当用户进行缩放操作时，会触发回调函数，并打印出当前缩放的倍数。由于返回值设置为 true，因此会阻止默认行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ce781e8991b448e69de