限制 SVG Pan Zoom 的水平缩放

本文将介绍如何使用 svg-pan-zoom 库限制 SVG 元素的水平缩放，使其在初始缩放级别时无法左右移动，但允许垂直方向的移动，并且在缩放后恢复正常的移动。通过设置 contain 属性和动态调整 minZoom 值，可以实现这一效果。

限制水平缩放的实现方法

svg-pan-zoom 是一个强大的 JavaScript 库，用于在浏览器中实现 SVG 的平移和缩放功能。默认情况下，它可以自由地在水平和垂直方向上进行缩放和平移。但是，在某些情况下，我们可能需要限制其在特定方向上的行为。

以下是如何使用 contain() 和 setMinZoom() 方法来限制水平缩放的步骤：

1. 初始化 svg-pan-zoom:

   首先，确保你已经正确地引入了 svg-pan-zoom 库，并初始化了你的 SVG 元素。

   window.panZoom = svgPanZoom('#limit-svg', {
     zoomEnabled: true,
     controlIconsEnabled: true,
     minZoom: 1,
     maxZoom: 10,
     // beforePan: beforePan // 可选的平移前回调函数
   });

   在这个初始化代码中，#limit-svg 是你的 SVG 元素的 CSS 选择器。zoomEnabled 和 controlIconsEnabled 分别启用了缩放和控制图标。minZoom 和 maxZoom 设置了最小和最大缩放级别。

2. 使用 contain() 方法:

   

   悦灵犀AI

   一个集AI绘画、问答、创作于一体的一站式AI工具平台

   下载

   contain() 方法将 SVG 的缩放和平移限制在容器的边界内。这会使 SVG 在初始缩放级别时，溢出顶部和底部，并在左侧和右侧固定。

   window.panZoom.contain();

3. 动态设置 minZoom:

   设置 minZoom 为当前缩放级别，以防止缩放级别低于使用 contain() 方法后的缩放级别。

   window.panZoom.setMinZoom(window.panZoom.getZoom());

   通过将 minZoom 设置为当前缩放级别，可以防止用户缩小到小于初始缩放级别，从而保持水平方向的固定。

完整代码示例

以下是一个完整的示例，展示了如何将这些步骤结合起来：

window.panZoom = svgPanZoom('#limit-svg', {
  zoomEnabled: true,
  controlIconsEnabled: true,
  minZoom: 1,
  maxZoom: 10,
  // beforePan: beforePan // 可选的平移前回调函数
});

window.panZoom.contain();
window.panZoom.setMinZoom(window.panZoom.getZoom());

注意事项

• 确保在初始化 svgPanZoom 后立即调用 contain() 和 setMinZoom()，以确保在页面加载时立即应用限制。
• 如果需要动态地更改缩放限制，可以重新调用 contain() 和 setMinZoom() 方法。
• beforePan 回调函数可以用来在平移操作之前执行自定义逻辑。

总结

通过结合使用 contain() 和 setMinZoom() 方法，可以有效地限制 SVG 元素的水平缩放，同时保持垂直方向的自由移动。这种方法适用于需要在特定方向上限制缩放的应用场景，例如地图浏览或图表展示。通过动态调整 minZoom，可以确保用户始终在可控的缩放范围内操作。