gpt4 book ai didi

svgpanzoom - 如何只允许在原始 SVG 的范围内平移

转载 作者:行者123 更新时间:2023-12-01 13:43:23 26 4
gpt4 key购买 nike

问题:

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

视觉示例:在下面的图像中,中心的缩放视口(viewport)可以平移到 SVG 的边缘,但不能平移到更远。

enter image description here

然而,这与 pan example 有很大不同。鉴于此,我无法解决我们如何改变它的行为。你会怎么做? (我是否还缺少一种简单的内置方法来执行此操作)?

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

  1. 每个限制都设置了在正确方向上允许的以像素为单位的移动。即 bottomLimit = 200 允许您向上移动 200 像素。因此,在默认缩放下,我需要将所有限制设置为 0,但是我不知道如何识别默认缩放,因为 realZoom 会根据浏览器窗口大小发生变化。
  2. 在可视化示例中,如果我们要设置 bottomLimit 以正确绑定(bind) SVG,它需要等于 x,但我不知道如何计算 x。 (topLimit 需要等于 y 等)

最佳答案

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

  1. 检查 panZoom.getSizes() 的值
  2. 计算出 getSizes().width 是整个 SVG block 的宽度,而 getSizes().viewBox.width 是 viewBox 的大小。我们对 viewBox 感兴趣。
  3. getSizes().width 替换为 getSizes().viewBox.width 一切都神奇地工作

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

关于svgpanzoom - 如何只允许在原始 SVG 的范围内平移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37912619/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com