问题标签 [jquery.panzoom]

我正在使用 Timmywil 的 panzoom 插件 https://github.com/timmywil/jquery.panzoom

在我的项目中。到目前为止，它一直运行良好。但是自从chrome的最新更新以来，它就坏了。它会缩放一次，但如果您开始平移视图会重置为原始位置。它适用于鼠标滚轮，但捏缩放不起作用。此问题出现在 Android 手机上的 chrome 版本 55 上。这是分叉的测试小提琴链接

http://jsfiddle.net/trupti11/c3umpgud/

我尝试使用最新的插件文件进行更新，但没有更改。

任何人都可以解释一下吗？

这是另一个无法在 Android Chrome 版本 55 中运行的演示页面。

http://timmywil.github.io/jquery.panzoom/demo/

我在画布元素上使用 PanZoom。当我放大时 - 画布上的文字变得模糊..有什么办法可以避免它？将图像添加到画布也是这种情况..

请看下面的例子：

http://jsfiddle.net/tomermiz/ba4vghnb！

ba4vghnb 谢谢！！

在插件的 github 页面上，通过 AMD loader 实现插件的解释如下：

但是如何通过 nodejs & browserify 实现这个插件呢？

我想直观地监控 panzooom jquery 插件中的缩放焦点。为了做到这一点，我想将一个 10x10 的小 div 放置在与焦点相同的坐标上，但不知何故它将它放置在一个完全不同的位置。这是我的代码：

（只贴相关部分）

编辑：附加信息：- div zoomcenter 具有绝对定位。- $panzoom.panzoom('zoom') 的位置不影响结果。

所以我有这个.draggable在内部工作的 jquery 项目，.droppable并且.droppable父级使用 jquery .panzoom。还有一个背景女巫的图像在里面.canvasimg。

这是我的html结构的树：

我有的：

我也有变焦工作和draggable工作。问题是当我放大时，拖动的项目应该在鼠标下方，但它会获得“真实”位置，或者你喜欢的原始位置..

如果我从左上角开始拖动.droppable并放大，它开始正常，元素在鼠标下方，如下所示：

但是当我穿过屏幕时，元素开始“远离”鼠标，我越向右和向下移动，元素就越远离鼠标，如下所示：

我试过的：

要实现这个问题的答案，但由于我是通过 ajax 保存位置，我不太确定如何使用它，如果这个问题的答案在这段代码中：

我试过使用它，但没有成功。

我的想法：

我可以反转 panzoom 的矩阵并将可拖动项目中的 css 转换属性与相反矩阵一起使用吗？

编辑： 所以..我成功实现了这段代码：

在我现在获取元素位置的函数中，当我放大时，我必须拖动项目的区域会减少..

.droppable可能我必须在div中使用类似的代码。在缩放 .wrapper 时缩放 .droppable？

编辑 2：在此处 创建了关于该项目的问题。

我正在使用一个允许使用鼠标滚轮进行缩放的 jquery 插件（我将它用于移动设备，以允许在 pdf 上进行捏缩放）并且我使用了此代码

但是由于我在元素上添加了缩放，因此不再触发 click 事件：

有没有办法在同一个元素上启用点击和缩放（在移动设备上）？

我是 Angular 4 的新手，并试图找到一个用于平移缩放的库。我在 npm 上找不到任何包。我尝试在我的项目中添加 jquery，然后添加 jquery.panzoom，但是因为 jquery.panzoom 是用 JavaScript 编写的，而我的 Angular 项目是在 TypeScript 中，所以 jquery.panzoom 没有@types，所以它不起作用。

我遵循的步骤

1) npm install --save jquery

2) npm install --save @types/jquery

3）从'jquery'导入*作为$；

3) npm install --save jquery.panzoom

在这里我得到了错误

然后在经历了这个之后，我添加了

到我的 typings.d.ts 文件。现在它确实编译但给出了这个运行时错误

有人可以将我重定向到正确的解决方案或不同的缩放库。

像这样的东西

更新

试过这个方法，还是不行。

在这里我使用 react-pan-zoom-svg 并尝试在可缩放区域中加载大型 SVG

我遇到了一些问题

1）当svg加载它不是从svg的中心点加载时

2）当我移动SVG它的矩阵值时，我取负数

3）适合屏幕不工作

共享的 jspaddel 无法正常工作，但我无法解决它，但我的所有代码都在那里

请帮忙

先感谢您

我有一个 2 页图像，我想在一个空间中显示，该空间旨在一次显示一页。我还想允许平移和缩放。因此，用户可以通过拖动来查看整个 2 页图像。

我已经使用 panzoom 来做到这一点https://timmywil.github.io/jquery.panzoom/ 但是如果没有缩放，我无法拖动以查看整个图像，而只能看到大约 75% 的图像。我放大图像越多，我能看到的就越多。

这是一个小提琴

https://jsfiddle.net/LzwLmc94/

图像在第一页上有文字“Page 1A, Page 1B, ... Page 1F”，在第二页上有类似的文字。如果不进行缩放，您最多只能看到第 2B 页以及更多内容。

有一个简单的图像地图，tooltip当点击时area和输入/输出的可能性map：

我使用tooltipster插件作为工具提示。

在初始位置，一切正常，但是当您增加（单击+）时，工具提示不会在对象附近打开（area）。

$('.plan-modal').tooltipster('reposition');- 不工作；

问题：如何将panzoomandtooltip一起使用，以便在放大/缩小时，工具提示在相应的旁边出现正确的位置area？

panzoom用于缩放图像地图。