3

问题：

我想绑定 SVG 的平移，以便在未应用缩放时无法平移，但是当您放大时，您可以在 SVG 的范围内平移。

视觉示例：在下图中，中心的缩放视口可以平移到 SVG 的边缘，但不能再平移。

在此处输入图像描述

然而，这与给出的pan 示例非常不同，我无法研究如何改变它的行为。你会怎么做？（我也错过了一种简单的内置方式来做到这一点）？

我在尝试解决这个问题时遇到的问题

  1. 每个限制都以像素为单位设置允许在正确方向上的移动。即 bottomLimit = 200 允许您向上移动 200 像素。因此，在默认缩放时，我需要将所有限制设置为 0，但是我无法弄清楚如何识别默认缩放，因为 realZoom 会根据浏览器窗口大小而变化。
  2. 在视觉示例中，如果我们想设置 bottomLimit 以正确绑定 SVG，它需要等于 x，但我不知道如何计算 x。（topLimit 需要等于 y 等）
4

1 回答 1

3

基于https://jsfiddle.net/930j458h/3/示例：

  1. 检查值panZoom.getSizes()
  2. 算出这getSizes().width是整个 SVG 块的宽度，getSizes().viewBox.width是 viewBox 的大小。我们对 viewBox 很感兴趣。
  3. 替换getSizes().width为getSizes().viewBox.width，一切都神奇地起作用

https://jsfiddle.net/930j458h/4/

于 2016-06-30T13:48:49.370 回答