如何使用 SvgPanZoom 平移和缩放以适合元素
How to pan and zoom to fit an element with SvgPanZoom
我正在使用 svg-pan-zoom 库,我需要 pan/zoom 视图以适合特定元素。
我可以使用 fit 方法,但它适合整个内容,在这种情况下我只需要适合一个特定元素。
另一种选择是计算所需的平移和缩放并使用自定义控件,但是如何使元素的 pan/zoom 适合 window?
更新
我尝试遵循@bumbu "easier" 的解决方案。这是我的第一个想法,但我遇到了一些关于缩放点位置的问题。
这是一个 fiddle 来显示预期的行为和计算尝试。
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) 不正确。
在不详细说明的情况下,我会尝试两种方法:
更简单:
- 初始化 svg-pan-zoom 库
- 适合并居中您的 SVG
- 计算您感兴趣的元素的位置(左上角和右下角,或中心和大小)
- 现在您应该能够根据视口大小计算每个元素的缩放级别和中心点
更难:
- 找出原始对象相对于原始视口的相对位置
- 根据当前视口大小,您应该能够计算出每个元素的缩放级别和中心点
我找到了缩放前平移的解决方案,我找不到正确的方法来使用 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);
我正在使用 svg-pan-zoom 库,我需要 pan/zoom 视图以适合特定元素。 我可以使用 fit 方法,但它适合整个内容,在这种情况下我只需要适合一个特定元素。 另一种选择是计算所需的平移和缩放并使用自定义控件,但是如何使元素的 pan/zoom 适合 window?
更新
我尝试遵循@bumbu "easier" 的解决方案。这是我的第一个想法,但我遇到了一些关于缩放点位置的问题。
这是一个 fiddle 来显示预期的行为和计算尝试。
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) 不正确。
在不详细说明的情况下,我会尝试两种方法:
更简单:
- 初始化 svg-pan-zoom 库
- 适合并居中您的 SVG
- 计算您感兴趣的元素的位置(左上角和右下角,或中心和大小)
- 现在您应该能够根据视口大小计算每个元素的缩放级别和中心点
更难:
- 找出原始对象相对于原始视口的相对位置
- 根据当前视口大小,您应该能够计算出每个元素的缩放级别和中心点
我找到了缩放前平移的解决方案,我找不到正确的方法来使用 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);