在 SVG 地图上捏合和缩放

Question

I have an SVG that is a building map with each room having its own element. I am using javascript with Snap.svg with the Snap.svg.zpd plugin and jquery-touchswipe to capture touch events. Each room has an element so a person can click or touch a room to get room information. I can pinch and zoom perfectly fine outside the map, but on the map doesn't work well. The problem is that on the map I'm touching different rooms when I try to pinch the map, so it's not picking the pinch up. If I can pinch on a single large room it works fine.

Does anyone have any ideas on how to approach this problem to make pinching and zooming on the map work?

Answer 1

I'm not familiar with the Snap.svg library, but I've had similar situations before.

What I've done is to remove the events from individual elements and let the parent handle everything. This means that your map needs to be able to discern which of it's rooms/children/whatever are getting touched, so it can appropriately handle child specific events, but it can then process the non-child specific events that are similar.

When you have multiple layers of children, it can be tough to do, but there are ways to do it. I did it a couple months ago, but not with Snap.svg and I don't remember how I did it.

In this case, your individual rooms are likely getting the single touch events and blocking the map multi-touch event. This seems to be evident due to being able to pinch on the rooms just fine and having separate touch events. It'll take some work to revise how you handle the touch events, but it's probably the easiest way to handle it.

The only other way I can think of to deal with this is to somehow detect if multiple events are happening at the same time. This is usually pretty dicey and unreliable. It might be managed by working with global variables, but that's not a recommended way to deal with most things, especially events.