如何在SVG Pan Zoom API中单独启用/禁用Pan功能并保留Zoom功能

问题说明 #

已实现带平移和缩放功能的SVG，创建了“Enable Pan”和“Disable Pan”按钮，需要在始终保留缩放功能的前提下，单独开启或禁用平移功能。

实现思路 #

svg-pan-zoom库提供了专门控制平移的API：enablePan()和disablePan()，只需在按钮对应的函数中调用这两个方法即可，同时要确保panZoomInstance实例能被全局访问。

修改后的完整代码 #

JavaScript 部分

console.clear();

let panZoomInstance; // 声明全局实例变量，确保按钮函数可访问

first_image()

function first_image(){
  document.getElementById("demo").innerHTML = '<div id="main-container" style="width: 800px; height: 600px; border:1px solid #DA096C;"><svg id="svg-id_alt" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" version="1.1"><path data-key="12345" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 224.34 585.57 L 224.34 586.6 L 225.22 588.68 L 226.1 589.71 L 227.87 590.75 L 231.39 590.75 L 233.15 589.71 L 234.04 588.68 L 234.92 586.6 L 234.92 584.53 L 234.04 582.46 L 232.27 579.35 L 223.46 568.98 L 235.8 568.98 "/></svg></div>';
  first_image_scroll()
}

function first_image_scroll(){
  $(function() {
    panZoomInstance = svgPanZoom('#svg-id_alt', {
      zoomEnabled: true,
      controlIconsEnabled: false,
      zoomScaleSensitivity: 0.7,
      minZoom: 0.005
    });
    //panZoomInstance.zoom(1.1);  
  })
}

function enable_pan_func(){
  panZoomInstance.enablePan(); // 启用平移
}

function disable_pan_func(){
  panZoomInstance.disablePan(); // 禁用平移
}

CSS 部分

.main-container {
    overflow: hidden;
    background: #ccc;
}

HTML 部分

<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.5.0/dist/svg-pan-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<button onclick="enable_pan_func()">Enable Pan</button>
<button onclick="disable_pan_func()">Disable Pan</button>
  
<div>
<p id="demo"></p>
</div>

关键说明 #

• 将panZoomInstance声明为全局变量，确保按钮点击函数能访问到实例
• enable_pan_func中调用panZoomInstance.enablePan()开启平移
• disable_pan_func中调用panZoomInstance.disablePan()关闭平移
• 缩放功能始终保持启用状态，不受平移控制逻辑影响

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