Panzoom: 捏缩放使图像远离屏幕中心

感谢您打开一个问题。 我在 iOS 和 Android 上尝试了演示，但无法重现。 您列出了桌面浏览器，但捏缩放主要用于移动设备（尽管有些设备同时具有鼠标和触摸屏）。 了解您正在使用的设备可能会有所帮助，即使我可能无法对其进行测试。

如果无法重现该问题，我无能为力。 如果您深入挖掘并发现 Panzoom 中的代码更改修复了它（或者除了演示之外的不同测试用例重现了该问题），请在此处发表评论，我会考虑一个补丁。

嗨，威利森先生；

感谢你的回复。 我同时使用了桌面版和移动版
说浏览器。 我使用了 Redmi Note 8T 和 Galaxy 8 来测试这个。

看到这个问题，或许可以看一下我正在开发的demo？
只需输入一个名称（没有存储任何内容，这只是一个儿童游戏），然后单击
在“Explorició lliure”按钮上； 您将被重定向到 Panzoomed
图片。 正如您将看到的，鼠标滚轮缩放工作正常，但捏缩放（和
实际上 panzoom.zoomIn() 和 panzoom.zoomOut() 按钮）移动
图片。

http://bake250.isdeveloping.com/objectiuexplora/solsticidelspirineus/

非常感谢您的帮助，如有不便，敬请谅解。

最好的祝福;

豪尔赫·桑切斯·布兰科

厄伦，9 月 21 日。 2020 年 19:45，蒂米·威利森 (<
通知@github.com>) escribió:

感谢您打开一个问题。 我试过演示
https://timmywil.com/panzoom/demo在 iOS 和 Android 上，不能
复制。 您列出了桌面浏览器，但捏缩放主要用于
移动设备（尽管有些设备既有鼠标又有触摸屏）。 它可能
有助于了解您正在使用的设备，即使我可能会
无法对其进行测试。

如果无法重现该问题，我无能为力。 如果
您深入挖掘并发现 Panzoom 中的代码更改修复了它（或者
除了演示之外的不同测试用例重现了问题），请
在这里评论，我会考虑一个补丁。

—
您收到此消息是因为您编写了该主题。
直接回复此邮件，在 GitHub 上查看
https://github.com/timmywil/panzoom/issues/512#issuecomment-696267620 ，
或退订
https://github.com/notifications/unsubscribe-auth/AOF4EAOK6YQVAHINOAQ3JZTSG6GMRANCNFSM4RUT4P7A
.

我有同样的问题。 看起来焦点没有正确计算，并且一直在底部。

@jsblanco我明白了。 Panzoom 依赖于transform-origin: 50% 50% ，它将动画集中在视口的中心而不是图像的中心，在这种情况下会更低。 由于contain: outside设置，它会移动图像以防止图像向下太远。 我认为这可以通过调用zoomToPoint或使用zoom和focal选项来解决，并在视口中找到实际上是图像中心的点。 那有意义吗？

设置contain: outside时，我也许可以默认执行类似的操作。

@rmatec你也在使用contain: outside吗？

我没有使用包含选项。 就我而言，看起来焦点位于底部中心。 捏合或拉出是相对于该点进行的。

@rmatec我认为必须有一些选择，因为我在演示中看不到这种行为。 您正在设置其他选项吗？

我正在使用以下内容来初始化 Panzoom。

const panzoomConfig = { minScale: 1, maxScale: 2, step: 0.5, duration: 200 };

它在台式机上运行良好，但由于某种原因它在移动设备上运行良好。

好的，您的情况听起来可能有所不同。 您能否在https://jsbin.com或https://codepen.io中复制并制作新票？ 这是一个可以克隆的模板https://jsbin.com/dibofogini/1/edit?html ,js,output。

会做。 谢谢。

出于某种原因，在使用焦点选项时，图像会在靠近
右下角，并且不能进一步放大，既不放大也不缩小。
也许我做错了什么？ 我是否必须传递任何特定参数
到 panzoom.zoomIn() 和 .zoomOut() 来指示焦点，或者只是
将它包含在 panzoom 初始声明中就足够了吗？

对于它的价值，我尝试了以下获取焦点的方法
观点。 我还尝试输入原始数字。

clientX: window.innerWidth /2,
clientY: window.innerHeight/2

clientX: document.documentElement.clientWidth/2,
clientY: document.documentElement.clientHeight/2

删除 contains: outside 只会呈现黑色图像。

埃尔三月，9 月 22 日。 2020 年 15:59，蒂米·威利森 (<
通知@github.com>) escribió:

@jsblanco https://github.com/jsblanco我明白了。 Panzoom 依赖于 transform-origin：
50% 50%，将动画集中在视口的中心而不是
比图像的中心，在这种情况下会更低。 它
移动图像，因为包含：外部设置以防止
图像从下降得太远。 我认为这可以通过调用来解决
zoomToPoint 或通过使用带有焦点选项的缩放来代替并找到
视口中实际上是图像中心的点。 做
有道理？

默认情况下，我也许可以在包含：外部时执行此类操作
已设置。

@rmatec https://github.com/rmatec你是否也在使用包含：外部？

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/timmywil/panzoom/issues/512#issuecomment-696740708 ，
或退订
https://github.com/notifications/unsubscribe-auth/AOF4EANBQXE5TDJOZNTBN6LSHCUVXANCNFSM4RUT4P7A
.

@jsblanco抱歉，比这更复杂。 这样做的方法是找到图像的中心并将其转换为它在 panzoom 父视口中的点。 然后您将其作为焦点选项传递，并且每次调用缩放时都应计算它。 但是，让我看看我是否可以为您提供一个示例。 这将修复zoomIn / zoomOut 。

也就是说，这不会改变捏缩放行为。 可以说，这是做正确的事情，因为放大某些点会碰到contain: outside 。 我不确定那里的修复，除非如果图像需要移动以使其正确保持在视口中，则可能不允许缩放。

好的，您的情况听起来可能有所不同。 您能否在https://jsbin.com或https://codepen.io中复制并制作新票？ 这是一个可以克隆的模板https://jsbin.com/dibofogini/1/edit?html ,js,output。

我为我的具体案例创建了https://github.com/timmywil/panzoom/issues/513 。 有一个指向 JSBin 的链接显示了该问题。

如果我留下“动画：真”，我可以重现这个问题。
此问题未出现在“animate：false”中 - 我已克隆您的模板@timmywil以重现该问题：

https://jsbin.com/pemoveyeri/1/edit?

（我已经实现了直接缩放的滚轮事件监听器——如果你滚动得足够快，就会发生移动位置。）

好的，我将问题移至#515，因为虽然问题相同，但配置不同。

你好;

很抱歉花了很长时间才回答。 我不认为它与 contains="outside"; 我刚刚删除它，它仍然表现出相同的行为，尽管没有那么强烈。 然而，panzoom div 和图像具有独立于街道的大小； 这可能是问题的一部分吗？

谢谢

@jsblanco修复应该是一样的。

嗨，我打算开一个关于车轮变焦远离中心的新问题，但看了这个问题并认为它足够相关。 以下是我的发现和解决方法。 请注意，我只使用触控板在 MacBook 上的浏览​​器中进行了测试。

我注意到对于焦点缩放演示，在 Safari、Firefox 中缩放时，中心会向左上方浮动。 即使在 Chrome 中，我也会得到相同的行为，但只有在 web 检查器打开时。

所以我开始研究它，我的怀疑是鼠标滚轮事件触发得太频繁了，并且由于Panzoom 的异步特性，事情没有正确更新。 我想如果我尝试限制缩放的频率，它可能会有所帮助，而且确实它似乎“有效”。 你可以在这里看到它的实际效果： https ://jsbin.com/joliduwulo/1/edit?html ,js,output。

需要注意的是，缩放会显得不那么平滑。 在此示例中，我将其限制为每 20 毫秒最大缩放一次，但是当我使用大型 SVG 进行测试时，尤其是在 Firefox 中，我需要将其设置为大约 50 毫秒，以免失去焦点。

@timmywil如果您希望我打开一个新问题，请告诉我。 这似乎是一个 hack，但它为我解决了问题。 如果您认为该解决方案值得探索，我很乐意提供帮助。

+1 关于以 panzoom 元素而不是视口为中心的能力

替换 panzoom.ts:426 上的移动功能

功能移动（事件：PointerEvent）{
如果 （
!isPanning ||
origX === 未定义 ||
原始 === 未定义 ||
startClientX === 未定义 ||
startClientY === 未定义
) {
返回
}
addPointer（指针，事件）
const current = getMiddle(指针)
if (pointers.length > 1) {
// 使用前 2 个指针之间的距离
// 确定当前比例
// 防止移动端的缩放问题
如果（开始距离 === 0）{
startDistance = getDistance(指针);
}
const diff = getDistance(pointers) - startDistance
const toScale = constrainScale((diff * options.step) / 80 + startScale).scale
zoomToPoint(toScale, 当前)
} 别的 {
// 添加 else 条件以防止移动缩放焦点错误
平底锅（
origX + (current.clientX - startClientX) / scale,
origY + (current.clientY - startClientY) / scale,
{
动画：假
}
);
}
}