概述
在前端开发过程中，展示大量的SVG图像或导图，往往需要对其进行缩放、平移、旋转等操作，而这些操作又需要和交互、事件配合使用。 @jayphelps/svg-pan-zoom这个npm包，提供了一个简单、灵活的解决方案。
安装
使用npm安装：
npm install @jayphelps/svg-pan-zoom
或使用yarn安装：
yarn add @jayphelps/svg-pan-zoom
使用方法
简单示例
下面是一个基本的使用示例：
<svg width="800" height="600"> <rect x="100" y="100" width="100" height="100" fill="red"></rect> </svg>
import svgPanZoom from '@jayphelps/svg-pan-zoom';
const svgElement = document.getElementsByTagName('svg')[0];
const panZoom = svgPanZoom(svgElement);上面代码中，svgPanZoom函数的参数为SVG DOM。
执行上面的代码之后，就可以对SVG图像进行缩放、平移、旋转等操作。
配置参数
svgPanZoom函数可以传入一个配置对象作为第二个参数，用来定制操作行为和与其配合的交互与事件。下面是一个例子：
const panZoom2 = svgPanZoom(svgElement, {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
minZoom: 0.1,
maxZoom: 10
});svgPanZoom函数的配置参数如下：
- zoomEnabled: 是否启用缩放功能，默认为true。
- panEnabled: 是否启用平移功能，默认为true。
- controlIconsEnabled: 是否显示缩放、平移、复位等控制图标，默认为false。
- zoomScaleSensitivity: 缩放灵敏度，值越小越灵敏。默认为0.2。
- minZoom: 最小缩放比例，默认为0.5。
- maxZoom: 最大缩放比例，默认为10。
- dblClickZoomEnabled: 是否启用双击缩放，默认为true。
- dblClickZoomFactor: 双击缩放比例，缩放时的系数，默认为2。
- zoomToFitEnabled: 是否在初始化时自适应窗口大小，默认为false。
- fit: 是否在初始化时将SVG缩放到适合窗口大小的最大值，默认为false。
- center: 是否在初始化时将SVG居中，默认为false。
- beforePan: 移动前的回调函数，调用时前传入变化量、上下文对象等参数。
- onPan: 移动中的回调函数，调用时前传入变化量、上下文对象等参数。
- beforeZoom: 缩放前的回调函数，调用时前传入变化量、上下文对象等参数。
- onZoom: 缩放中的回调函数，调用时前传入变化量、上下文对象等参数。
- onZoomEnd: 缩放结束时的回调函数，调用时前传入变化量、上下文对象等参数。
- onZoomToFit: 自适应窗口大小后执行的回调函数，调用时前传入变化量、上下文对象等参数。
- onUpdated: 更新PanZoom组件后执行的回调函数，调用时前传入变化量、上下文对象等参数。
注意，所有的回调函数都有前传入的参数，包含变化量、上下文对象等。变化量指的是缩放或平移的量，上下文对象用来传递上下文相关的数据或方法。具体可以参考文档。
缩放方法
除了用交互来操作，还可以通过调用panZoom.zoomIn()、panZoom.zoomOut()、panZoom.resetZoom()等方法来实现缩放。调用缩放方法时可以传入指定参数，例如：
panZoom.zoomTo(2.5, {x: 100, y: 100}); // 以(100, 100)为中心缩放至2.5倍事件绑定
除了内置的交互和控制图标，还可以通过监听事件来实现和SVG图像的交互。svgPanZoom函数会为PanZoom组件触发一些事件，这些事件可通过panZoom.on('eventName', handler)方法进行绑定。例如：
-- -------------------- ---- ------- ---------------------- -------- --- - ---------------- --------- --- --------------- -------- --- - ---------------- ------- --- ------------------ -------- --- - ----------------- --------- --- ---------------- -------- --- - ----------------- ------- --- ---
常用的事件有以下几种：
- panstart: 开始平移时触发。
- pan: 平移时触发。
- panend: 平移结束时触发。
- zoomstart: 开始缩放时触发。
- zoom: 缩放时触发。
- zoomend: 缩放结束时触发。
- update: 内部更新后触发。
- destroy: 销毁时触发。
示例代码
一个综合的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
------------------------------------------
------- ----------------------------------------------------------------------------------------
-------
---- -
------- --
-------- --
-
---------- -
--------- ---------
------ --------- - ------
------- --------- - ------
---- -----
----- -----
-
--------
-------
------
---- ------------------
---- ------------ --------------
----- ------ ------ ----------- ------------ ------------------
----- ------- ------- ----------- ------------ -------------------
----- ------- ------- ----------- ------------ --------------------
----- ------- ------- ----------- ------------ ---------------------
----- ------- ------- ----------- ------------ ---------------------
------
------
--------
----- ------- - ------------------------------
----- ------- - ------------------- -
------------ -----
-------------------- -----
---- -----
------- -----
-------- ----
-------- --
---
---------------------- -------- --- -
---------------- --------- ---
--------------- -------- --- -
---------------- ------- ---
------------------ -------- --- -
----------------- --------- ---
---------------- -------- --- -
----------------- ------- ---
---
---------
-------
-------总结
@jayphelps/svg-pan-zoom是一个方便易用的npm包，可以快速实现对SVG图像的交互和控制。熟练掌握该npm包，可以提升前端工程师的工作效率和开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552cb81e8991b448d0302