如何使用 SvgPanZoom 平移和缩放以适应元素答案

【问题标题】：How to pan and zoom to fit an element with SvgPanZoom如何使用 SvgPanZoom 平移和缩放以适应元素
【发布时间】：2020-06-18 06:33:23
【问题描述】：

我正在使用 svg-pan-zoom 库，我需要平移/缩放视图以适应特定元素。我可以使用 fit 方法，但它适合整个内容，在这种情况下我只需要适合一个特定元素。另一种选择是计算所需的平移和缩放并使用自定义控件，但是如何让元素的平移/缩放以适合窗口？

更新

我尝试遵循@bumbu“更简单”的解决方案。这是我的第一个想法，但我遇到了缩放点位置的一些问题。

这是显示预期行为和计算尝试的小提琴。

http://jsfiddle.net/mgv5fuyw/2/

这是计算：

var bb=$("#target")[0].getBBox();
var x=bb.x+bb.width/2;
var y=bb.y+bb.height/2;

但不知何故，预期的缩放中心 (225,225) 不是正确的。

【问题讨论】：

相关问题：stackoverflow.com/questions/59579575/…
谢谢，但这只是要求如何获得点击元素的恒定坐标。在我的情况下，我需要缩放，但我不知道如何获得正确的缩放/平移值以适合所需的元素

标签： javascript svg zooming pan svgpanzoom

【解决方案1】：

如果不详细说明，我会尝试 2 种方法：

更简单：

初始化 svg-pan-zoom 库
使 SVG 适合并居中
计算您感兴趣的元素的位置（左上角和右下角，或中心和大小）
现在，您应该能够根据视口大小计算每个元素的缩放级别和中心点

更难：

找出原始对象相对于原始视口的相对位置
根据当前视口大小，您应该能够计算每个元素的缩放级别和中心点

【讨论】：

谢谢，更简单的方法是我第一次尝试。但是我在缩放点坐标方面遇到了一些麻烦。我已经更新了问题。

【解决方案2】：

我找到了一个解决方案在缩放之前平移，我找不到使用 zoomAtPoint() 方法的正确方法。

http://jsfiddle.net/mgv5fuyw/3/

var bb=$("#target")[0].getBBox();
var vbb=panZoomInstance.getSizes().viewBox;
var x=vbb.width/2-bb.x-bb.width/2;
var y=vbb.height/2-bb.y-bb.height/2;
var rz=panZoomInstance.getSizes().realZoom;
var zoom=vbb.width/bb.width;
panZoomInstance.panBy({x:x*rz,y:y*rz});
panZoomInstance.zoom(zoom);

【讨论】：