在 SVG 地图上捏合和缩放

Question

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

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

Answer 1

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

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

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

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

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