英文:
Limit zoom horizontally
问题
我有一个SVG元素，显示在一个普通的div中（在此处查看示例）
window.panZoom = svgPanZoom('#limit-svg', {
zoomEnabled: true,
controlIconsEnabled: true,
minZoom: 1,
maxZoom: 10,
beforePan: beforePan
});
现在，垂直方向的缩放在1处停止，因此我无法向上或向下移动，但水平移动仍然存在，我需要去掉水平移动。
我需要修改代码，停止水平方向的缩放，以便左右移动不再可行（但仅在自然缩放1处，应用缩放仍然可以正常移动所有方向）。保留向上或向下的移动权限，因为还有更多SVG需要查看。
我尽力尝试了一切，这是我能想到的最好的解决方法。
英文:
I have a svg element, displayed in a normal div (fiddle here)
window.panZoom = svgPanZoom('#limit-svg', {
zoomEnabled: true,
controlIconsEnabled: true,
minZoom: 1,
maxZoom: 10,
beforePan: beforePan
});
As it is now, the zoom stops at 1 vertically, so I'm unable to move up or down, but there's horizontal movement that I have to get rid of.
I need to invert the code, stopping the zoom horizontally, so moving ltr or rtl is not possible (But this only at natural zoom, 1, applying zoom would still be moving normally at all directions). Leaving moving up or down accessible, because there'll be more svg to be seen.
I tried everything I could, this was the best I could come up with.
答案1
得分: 0
找到了答案！
window.panZoom.contain()
window.panZoom.setMinZoom(window.panZoom.getZoom())
这个代码的作用是将状态设置为我想要的状态，在顶部和底部溢出，左右固定。当我将最小缩放设置为当前缩放时，现在缩放不会低于先前包含的缩放值。
我想保留这篇帖子在这里，因为在我的搜索中有很多人寻找相同的答案。
https://jsfiddle.net/JSFiddleDoodleGusta/846nre1j/14/
英文:
Found an answer!
window.panZoom.contain()
window.panZoom.setMinZoom(window.panZoom.getZoom())
What this does is contain sets to the state I want, overflowing at top and bottom, and fixed at left and right. When I set the minimum zoom to the current zoom, now the zoom won't go minus the previous contain zoomed figure.
I want to keep this post here, because a lot of people in my searches are looking for the same answer.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论