使用panzoom.svg.js限制SVG平移不超出边界的功能问题求解

问题原因 #

原有写法存在两个错误：

1. 在zoom事件回调中直接调用map.panZoom(配置)相当于重新初始化panZoom实例，会打断当前交互、清空原有运行状态，直接导致平移功能失效
2. margins参数的计算逻辑不符合缩放后的视口适配规则

解决方案 #

方案1：最简实现（无需手动计算） #

较高版本的svg.panzoom.js内置了边界限制能力，直接配置boundary: 'viewport'即可自动实现任何缩放等级下，平移都不会超出SVG视口边界，无需额外监听事件：

const map = SVG('#map')
        .size(500, 500)
        // @ts-ignore: next-line
        .panZoom({
          zoomMin: 1,
          boundary: 'viewport'
        })
        .zoom(1);

方案2：自定义边距动态适配 #

如果需要自定义内容和视口之间的边距，使用官方提供的setOptions方法动态更新配置，不要重新初始化实例，正确代码如下：

// 基础参数配置，可根据实际业务调整
const viewportWidth = 500 // SVG容器视口宽度
const viewportHeight = 500 // SVG容器视口高度
const contentWidth = 1500 // SVG内部实际内容总宽度，也可通过map.bbox().width动态获取
const contentHeight = 1500 // SVG内部实际内容总高度，也可通过map.bbox().height动态获取

// 初始化
const map = SVG('#map')
  .size(viewportWidth, viewportHeight)
  // @ts-ignore: next-line
  .panZoom({
    zoomMin: 1,
    margins: {
      top: (contentHeight - viewportHeight) / 2,
      left: (contentWidth - viewportWidth) / 2,
      bottom: (contentHeight - viewportHeight) / 2,
      right: (contentWidth - viewportWidth) / 2,
    },
  })
  .zoom(1)

// 缩放事件动态更新边距
map.on('zoom', event => {
  const { level } = event.detail
  // 缩放后视口可容纳的内容尺寸
  const availableW = viewportWidth / level
  const availableH = viewportHeight / level
  // 计算当前缩放等级下的边距
  const marginX = (contentWidth - availableW) / 2
  const marginY = (contentHeight - availableH) / 2
  // 调用setOptions更新配置，不重新初始化
  map.panZoom('setOptions', {
    margins: {
      top: marginY,
      left: marginX,
      bottom: marginY,
      right: marginX
    }
  })
})

内容的提问来源于stack exchange，提问作者Jacobdo