在 SVG 地图上捏合和缩放

Posted 2023-03-28

【中文标题】在 SVG 地图上捏合和缩放

【英文标题】：Pinch and Zoom on SVG Map

【发布时间】：2021-12-17 08:42:42

【问题描述】：

我有一个 SVG，它是一个建筑地图，每个房间都有自己的元素。我正在使用带有 Snap.svg 的 javascript 和 Snap.svg.zpd 插件和 jquery-touchswipe 来捕获触摸事件。每个房间都有一个元素，因此人们可以单击或触摸房间以获取房间信息。我可以在地图外完美地捏和缩放，但在地图上效果不佳。问题是，当我试图捏地图时，我在地图上触摸了不同的房间，所以它没有捏起来。如果我能捏住一个大房间，那就没问题了。

是否有人对如何解决此问题以使地图上的捏合和缩放工作有任何想法？

【参考方案1】：

我对 Snap.svg 库不熟悉，但我之前也遇到过类似情况。

我所做的是从单个元素中删除事件并让父级处理所有事情。这意味着您的地图需要能够辨别它的哪些房间/孩子/任何被触摸的东西，以便它可以适当地处理特定于儿童的事件，然后它可以处理类似的非儿童特定事件。

当您有多层孩子时，这可能很难做到，但有一些方法可以做到。几个月前我做到了，但不是用 Snap.svg，我不记得我是怎么做到的。

在这种情况下，您的各个房间可能会收到单点触控事件并阻止地图多点触控事件。这似乎很明显，因为能够很好地捏住房间并具有单独的触摸事件。修改处理触摸事件的方式需要做一些工作，但这可能是最简单的处理方式。

我能想到的解决此问题的唯一其他方法是以某种方式检测多个事件是否同时发生。这通常是相当冒险和不可靠的。它可以通过使用全局变量来管理，但这不是处理大多数事情的推荐方式，尤其是事件。