SVG Pan-Zoom 开源项目安装与使用指南

目录结构及介绍

SVG Pan-Zoom 是一个用于平移和缩放 SVG 的JavaScript 库. 其核心文件及目录结构通常包括:

• dist: 包含库的编译版本.
  • svg-pan-zoom.js: 主要 JS 文件.
  • svg-pan-zoom.min.js: 压缩版 JS 文件.
• examples: 示例代码存放目录.
  • 演示如何在HTML页面中集成并配置该库.
• src: 源码所在目录.
  • 内容包括原始的JS及HTML文件.

此外，项目还包含了标准的.gitignore, .npmignore 和 LICENSE文件以支持其作为开源项目进行发布。

启动文件介绍

SVGPanZoom的主要JS文件是svg-pan-zoom.js, 它位于dist目录下。

此文件包含如下主要功能:

• 添加滚动事件监听器处理鼠标滚轮或触控设备上的缩放行为。
• 实现双击或触摸屏上双击的放大缩小操作。
• 提供拖动SVG元素的功能。
• 可选地提供屏幕上的缩放控制按钮。

使用方式

将SVG Pan-Zoom引入到你的HTML页面中非常简单：

<script src="path/to/svg-pan-zoom.min.js"></script>
<!-- 或 -->
import svgPanZoom from 'svg-pan-zoom';

const instance = svgPanZoom('#your-svg-element', {
  // 配置选项...
});

配置文件介绍

尽管SVG Pan-Zoom没有专门的配置文件，但它的功能可以通过初始化时提供的对象参数来定制。

可用配置参数包括但不限于:

• viewportSelector: 选择器用来定位表示SVG视图区域的元素。
• panEnabled: 是否启用平移功能。
• controlIconsEnabled: 是否显示屏幕上的控制图标。
• zoomEnabled: 是否开启缩放能力。
• dblClickZoomEnabled: 能否通过双击进行缩放。
• mouseWheelZoomEnabled: 能否通过鼠标滚轮缩放。
• preventMouseEventsDefault: 是否阻止默认的鼠标事件处理。
• zoomScaleSensitivity: 缩放比例的敏感度设置。
• minZoom / maxZoom: 设置最小最大缩放倍数。
• fit / contain / center: 确定是否适应容器大小，保持长宽比以及中心位置。
• refreshRate: 刷新率（自动或手动）。

当你初始化svgPanZoom()函数时可以按需传入以上参数的组合。例如：

const panZoomInstance = svgPanZoom('#my-svg', {
  zoomEnabled: false,
  panEnabled: true,
});

这个设定将会禁用缩放而只保留平移功能。

如需更多关于配置和使用的细节, 请参阅SVG Pan-Zoom的GitHub仓库, 特别是在示例代码部分可以获得更深入的理解.