如何平移和缩放使元素与SvgPanZoom相匹配

Question

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

更新

我试着遵循@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)并不是正确的中心。

Answer 1

我在缩放之前找到了一个平移的解决方案，无法找到正确的方法来使用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);

Answer 2

在不详细介绍的情况下，我将尝试两种方法：

更容易：

• Init SVG-pan-缩放库
• Fit和中间您SVG
• 计算您对
• 感兴趣的元素的位置(左上角和右下角，或中心和大小)，现在根据视口大小计算每个元素

的缩放级别和中心点(f 29)。

更难：

在当前视口大小上，计算原始对象相对于原始viewport

• Based的相对位置，您应该能够计算每个元素

的缩放级别和中心点。