问题标签 [panzoom]

我在 div 中有两个图像：

https://codepen.io/reti/pen/jOmObwJ

我使用 Panzoom 库来平移和缩放图像。我想以 px 为单位测量这些距离：

https://pasteboard.co/K8HrjFM.png

一个好方法似乎是getBoundingClientRect()。我只是在测试这个，但它发生了我不明白的事情。例如，我试图将 div .zoom-area2 移动到包装器的边缘（连接到 movePhoto() 函数的按钮）但是，顶部值不正确，因为有一个中断：

https://pasteboard.co/K8HmZQs.png

为什么会这样？

我正在使用这个panzoom library，但是我正在努力让它使用自定义选项在同一页面上工作多个实例。

这是一个jsFiddle，它允许多个 panzoom 都具有相同的类。

但是我不知道如何向它添加任何自定义选项？

这是一个jsFiddle，它有我的自定义选项，但我无法让它与 一起forEach工作，并在同一页面上使用具有相同类的多个实例。您可以在小提琴中看到只有第一个是如何工作的。

我有shiny下面的应用程序，您需要从中下载和安装CausalMapFunctions软件包，还需要从此处devtools::install_github("stevepowell99/CausalMapFunctions@new_refactor")下载functions.r文件。问题是当我将鼠标悬停在节点上时以浏览器模式打开应用程序时，节点的名称被隐藏。这可能是包的错误panzoom

我是 Panzoom 的新手，我正在努力实现一些关键的目标。我有一张 5000 像素 x 3350 像素的地图，我想从 0.25 开始比例。但是，地图以大尺寸初始化，然后居中并减小到 0.25，使其离开屏幕。我通过自定义原点设置来解决这个问题，根据地图大小和屏幕大小将它们设为负值，这很有效。问题是，当我从那里放大时，它会从那些初始负值放大，即使我transformOrigin在点击时添加了选项。我一直在尝试许多不同的设置，但效果有限。下面是我到目前为止的代码，这是我的问题：

1. 如何重置 transformOrigin 以便在初始设置缩放后从视口中心平滑地进行所有缩放？
2. 如何设置动量滚动，以便当您释放平底锅时，元素会继续移动一小段距离？
3. 在哪里可以找到带有示例代码的 pan.zoom 的所有选项？

感谢您在这里的任何帮助。

我正在尝试在我的代码中实现 PanZoom JS 功能。当我将静态图像添加到网页并向其添加 PanZoom 功能时，代码工作正常。

例如：

但问题是，当我使用 Jquery POST 方法和 PHP 动态添加图像时，PanZoom JS 停止工作。

我尝试动态添加图像的代码是：

HTML

JS

上传.php

所以当我运行上面的代码时，我得到了错误：

未捕获的错误：无法在 createPanZoom 处为当前类型的 dom 元素创建 panzoom

并且 Panzoom 效果不起作用。

我正在使用 Panzoom JS 放大地图。它的工作方式正是我在移动和桌面上放大和缩小所需的方式。当您单击地图上的某个项目时，我会抓取相对于容器左上角的 x/y 坐标，并考虑应用的任何比例，然后在数据库中查找该位置/页面并打开它。这一切在桌面上都很好用，但在触摸上却不行。我需要能够捕捉到触摸位置（就像你用鼠标点击一样），但前提是没有触摸移动，所以我可以区分平移/移动、捏合/缩放和点击/润色（点击）。我找不到任何文件来解决这个问题。任何帮助，将不胜感激。

我可以对单个图像使用缩放，并且效果很好。但是，在一个更复杂的应用程序中，我有一个动态 UI，其绘图取决于selectInput()这样的：

问题是当用户切换到新的可视化时，缩放功能停止工作。（我试过改变 100ms 但这不是问题）

这是一个可重现的示例：