前言
在前端开发中，实现手势操作功能是非常常见的需求。@antv/g-gesture 是一个非常优秀的 npm 包，可以用于在 SVG 或 Canvas 上注册手势操作。本文将介绍如何使用 @antv/g-gesture，帮助读者快速实现复杂的手势操作功能。
安装
使用 npm 安装此包：
npm install @antv/g-gesture --save
基本用法
引入
在 vue 或 react 项目中使用此包，需要在文件头部引入：
import G6 from '@antv/g6'; import GGesture from '@antv/g-gesture';
注册手势
使用 GGesture 的实例化对象，我们可以在 SVG 或 Canvas 上注册手势。
-- -------------------- ---- -------
----- ----- - --- ----------
---------- ------------
------
-------
------ -
-------- ---------------
--
-------- -----------
---常用事件
@antv/g-gesture 包提供了一系列基本的事件：
tap: 单指点击事件doubletap: 单指双击事件press: 单指长按事件panstart: 单指拖拽开始事件panmove: 单指拖拽事件panend: 单指拖拽结束事件pinchstart: 双指捏合开始事件pinchmove: 双指捏合事件pinchend: 双指捏合结束事件rotatestart: 双指旋转开始事件rotatemove: 双指旋转事件rotateend: 双指旋转结束事件
需要注意的是，所有的事件都是异步执行的。这是因为手势操作可能不是瞬间完成的，而是需要一定时间的过渡。
注册事件
我们可以在 G6 图表上注册一个或多个事件。如下所示：
graph.on('tap', (e) => {
// 单指点击事件，在此处实现具体功能
});解除事件
如果不再需要某个事件，可以使用 off 方法取消注册：
graph.off('tap');高级用法
限制手势
G6 具有许多默认的手势，如拖拽和缩放。如果我们在图表中注册了一个手势，它可能会干扰默认的手势。
为了防止干扰，我们可以对 G6 进行配置。比如，我们可以禁止 G6 的拖拽功能，再在自定义事件中实现拖拽功能：
-- -------------------- ---- -------
----- ----- - --- ----------
---------- ------------
------
-------
------ -
-------- -- -- -- -- -----
--
-------- -----------
---
-------------------- --- -- -
-- ---------
---自定义手势
如果默认的手势不能够满足需求，我们可以自定义手势。比如，如果我们希望在双指手势中，同时进行拖拽操作和旋转操作，可以实现如下代码：
-- -------------------- ---- -------
----- ----- - --- ----------
---------- ------------
------
-------
------ -
-------- ---------------
--
-------- -----------
---
--- ------------- - -----
--- ----------- - --
--- -------- - --
--- ---- - --
---------------------- -- ------ -- -- -
-- ---------
------------- - -------
----------- - --
-------- - --
---
--------------------- --------- --------- ------- -------- -- -
-- -------------
--- --------- - -------- - ----------------
--- --------- - -------- - ----------------
--- ----- - ---------------------- ---------- - ---- - ------- - ---
-- ----------- -
-------- - ------
-
--- ----
-- ------ -- - -- -------- -- -- -
--- - ----- - -------------------
- ---- -- ------ -- - -- -------- -- -- -
--- - ----- - -------------------
- ---- -
--- - ----- - ---------
-
-------- - ------
-- -------------- ----------- - ---------
---- -- -------- - ----------- - --
----------- - ---------
-- ---------------
----- -- - ---------------------------------------
----- - - ------------------ ------- - --- - ------- - -- - ----
---- - ---- - - - - - ---- - - - - - -----
-- -------
----------------------- --------
--------------- ---------- -----------
---------------- -
-------- ---------
-------- ---------
---
---示例代码
下面是一个完整的示例：
-- -------------------- ---- -------
--------- -----
------
------
---- -------------- ------------- ----- ------- --------------
------- ------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
--------
----- ----- - --- ----------
---------- ------------
------ ----
------- ----
------ -
-------- ---------------
--
-------- -----------
---
-------------------- ---- --- -- -
--------------------- ------ --------
---
------------------- ---- --- -- -
-------------------- ------ --------
---
------------------ -- -- -
----------------------
---
---------------------- -- ------- -------- -- -- -
----------------------- ------------- ------------ -----------------------
---
--------------------- -- ------- --------- ------- ------ -- -- -
---------------------- ------------- ------------ -------------------- ---------------- -------------------
----------------------- --------
------------------- - ---- --------
---
---------
-------
-------在此示例中，我们在 default mode 下注册了 drag-canvas，同时注册了 panstart、panmove、panend、pinchstart 和 pinchmove 事件。在 pinchmove 事件中，我们通过 graph.translate 实现了平移功能，通过 graph.zoom 实现了缩放功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f422a3adbf7be33b25672d4