问题标签 [panzoom]

语境：

我正在使用 Andrei Kashcha 的 (anvaka) panzoom 库：https ://github.com/anvaka/panzoom来提供详细的颜色选择功能：

我创建了一个 1' 电影来说明用例：https ://www.dropbox.com/s/5tv9rs18vvpv95d/tfs_cp.mov?dl=0

问题：

- 第 I 部分 [已解决，参见下文未解决的第 II 部分]

// 2020 年 14 月 12 日：初次发布

这一切在桌面上的 Chrome/Safari 上都可以正常工作，但是当切换到移动设备时，我在 touchend (_listener2) 上收到以下错误：

更具体地说，我在下面分享的代码的以下部分：

我的假设是这个错误也会出现在 touchmove (_listener4) 上，但我无法使用 Chrome 的内置移动设备模式正确测试它。我也无法访问 XCode，这也使得在 Safari 中进行测试也很困难。

// 29/12：更新

同时我发现以下代码导致了ReferenceError：

用以下替换它，解决了我的问题。

- 第二部分 [未解决]

// 2020 年 14 月 12 日：初次发布

在移动设备上缩放/平移并随后在移动设备上选择颜色时，似乎所做的颜色选择是基于尚未缩放/平移的画布。

我已经尝试了很多东西，但我根本无法弄清楚。尽管其他人也尝试过：

• 在 Canvas 上实现缩放
• 在移动设备上缩放画布
• 移动设备上糟糕的 Canvas GetImageData() / PutImageData() 性能
• Canvas getImageData 在某些移动设备上返回不正确的数据

我也无法使用该输入来解决我的问题。

// 29-12-2020: 更新

到今天为止，我仍然无法解决问题的第二部分。

比较时

对于移动设备和桌面设备，我没有看到任何区别，所以在移动设备上我无法通过 getImageData() 检索正​​确的数据，这真的很奇怪。如何确保 getImageData() 实际上检查缩放/缩放/平移图像（画布）而不是未缩放/未缩放/未平移图像（画布）？这已经可以帮助我进一步调试。

// 2021 年 5 月 4 日：更新

我还没有弄清楚是什么导致了这个问题。仍然存在三个关键问题：

• Q1：我使用 drawImage() 正确吗？
• Q2：我是否正确使用了 getImageData()？
• Q3：不管 Q1/Q2，为什么它在桌面上工作呢？

// 2021 年 5 月 15 日：更新

我还没有弄清楚是什么导致了这个问题。仍然存在相同的关键问题，但我在调查方面取得了一些进展：

• Q1：我使用 drawImage() 正确吗？

我现在尝试使用 void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 而不是 void ctx.drawImage(image, dx, dy, dWidth, dHeight); 因为在阅读 MDN 上的文档后这似乎更合乎逻辑：https ://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage不幸的是，这并没有太大变化。我已经更新了下面的可视化以反映我的调整。

• Q2：我是否正确使用了 getImageData()？

我不知道这里可能有什么问题。

• Q3：不管 Q1/Q2，为什么它在桌面上工作呢？

我还在智能手机模拟器中测试了我的实现：https : //www.webmobilefirst.com/en/ 就像一个魅力。因此，实际上是导致问题的物理设备。

可视化：

内部尺寸为 2075x3112 的测试图像被加载到宽度 = 375 和高度 = 562 的画布中 - 这是左侧的情况。右侧的情况描述了平移/缩放后发生的情况。

片段：

• drawImage()：平移/缩放时调用

• 获取图像数据（）

'MWE'：

由于很难为此创建 MWE，我将分享完整的工作示例，可在此处找到：https ://yvervoort.github.io/cp-acc_web_v0.2.html Javascript 可在“来源”下找到开发人员工具的选项卡。

变更日志：

• 2020 年 14 月 12 日：最初的问题
• 29-12-2020：更新问题 - 第一部分已解决 | 第二部分仍未解决
• 29-12-2020：更新标题以更好地反映尚待解决的问题
• 2021 年 5 月 4 日：更新了解释（包括问题的可视化）并添加了我认为与第二部分的问题有关的新关键问题，该问题仍未解决
• 15-05-2021：更新了我取得的进展，这是有限的。我现在确实知道该实现在智能手机模拟器上也可以正常工作，因此似乎只会在实际物理设备上引起问题。

我创建了一个codepen，它使用 jquery ui droppable（用于拖放）、jsPlumb（用于流程图）和 Panzoom（平移和缩放）来创建流程图构建器。您可以将列表项从可拖动容器（第一列）拖动到流程图（第二列），然后使用点连接项目以创建流程图。#flowchart 是启用了平移和缩放的 Panzoom 目标。这一切都很好。

但是，我希望#flowchart div 始终跨越流程图包装的整个区域，即#flowchart 应该是支持平移、缩放并且是可放置容器的无限画布。

它应该具有与流程图构建器演示相同的效果。那里的画布是无限的，您可以在其中从右列拖放项目（问题、操作、输出）。

任何关于如何实现这一点的指针（如相关事件或多个 panzoom 元素和/或 css 更改）将不胜感激。

我想测试特定 SVG 元素的位置是在当前可见的平移缩放区域内部还是外部。如果它在外面，那么我可以平移以使其刚好在相应的边界内。

这听起来像是一个简单的操作，只是我找不到正确的测试来查看某个点是否在可见区域之外；如果我能做到这一点，那么我可以毫不费力地处理平底锅。

根据原始元素 x/y 属性，我拥有的位置是未转换的位置，因此我希望必须访问适当的 CTM，但我找不到这个。

我正在尝试制作一个可以缩放和平移的网站。目前我正在使用panzoom 包，但用户应该能够围绕他们的屏幕中心旋转场景内容。

我知道 transform-origin 属性是如何工作的，但我似乎无法弄清楚如何相对于视口更改它。

这是我正在研究的 JSFiddle：https ://jsfiddle.net/jsrhkom4/28/ 。

HTML

CSS

JS

演示：https ://jsfiddle.net/jsrhkom4/28/show 。

提前致谢！

我有一个Painterro集成了创建图像的项目。我Panzoom为该图像添加了功能，通过shift + mouse滚动事件，我们缩放图像。但这会导致输入层出现问题，因为在放大输入层后未缩放到缩放图像。我看了更深，发现Painterro插件使用了 3 个不同的层。我当前缩放的图层是main canvas保存图像的图层，它可以成功缩放，但输入图层在缩放时没有缩放。我怎样才能使它在panzoom缩放画布元素时，输入层也被缩放到大小。

我使用 panzoom 库 ( https://timmywil.github.io/jquery.panzoom/ ) 来缩放使用 raphael.js 制作的地图。
如果我使用 disablePan 选项，它还会禁用任何其他拖动事件。如果可以禁用库中的平移并允许其他拖动事件？

代码盘示例

启用 panzoom 时，拖动不起作用。

我有一个带有vue-panZoom的网格

里面有一个vue-draggable-resizable区域，如下图所示

图片

当我拖动（vue-draggable-resizable）灰色正方形时，黑色（平移缩放）矩形也会移动。when the gray square is selected, the panZoom must be locked or in the beforeMouseDown & beforeWheel mode state.

panzoom 文档中也有这种方法，但我不知道它是否也可以在 vue 中工作：

暂停/恢复全景您可以通过调用以下方法暂停和恢复全景：

我该如何解决？提前致谢

我正在尝试创建一个虚拟的帖子板，您可以在其中添加注释，拖动它等。我还希望能够放大和缩小板并平移。我有大部分工作，但是当我做平移/缩放的东西（使用我找到的库）时，可拖动元素不能被拖动到原始视图之外，并且拖动会做一些奇怪的事情。

我不确定它为什么会卡住，我必须扩大电路板的尺寸吗？

这是Javasript：

有关示例，请参见此小提琴。 jsfiddle

我正在创建一个带有覆盖 div 的画布，以便在单击时添加标记，并且我希望标记在平移缩放画布或调整窗口大小时改变位置。我正在使用https://github.com/timmywil/panzoom进行平移缩放。

问题是当我将鼠标位置转换为画布坐标时，它可以正常工作，但是当我将其转换回屏幕位置以在覆盖 div 上渲染标记时，结果与初始化的鼠标位置不同，并且在调整大小时重新计算标记的位置也不正确。

这个画布是全屏的，没有滚动。

如何让它与规模和平移一起使用？如果您知道任何图书馆可以完成这项工作，请推荐，谢谢。

Panzoom 库 ( https://timmywil.com/panzoom/demo/ ) 允许您在 div 中移动和缩放图像：

一切正常。

现在我希望这些图像填​​充它们的 div，但是：

• 图像必须垂直和水平居中
• 如果图像为水平方向，则其高度不能高于 div 的高度
• 如果图像具有垂直方向，则其宽度不能大于 div 的宽度。就像这里一样：https ://drive.google.com/file/d/1znFq-EJVE4Dv2j9sc3xZUZuMH0bhRsfz/view?usp=sharing

怎么做？我正在尝试不同的方法，但我已经没有想法了。