Piszę międzyplatformową aplikację internetową, która wyświetla informacje za pomocą SVG. Muszę mieć interfejs wielodotykowy do przesuwania i powiększania grafiki SVG. Z moich badań wynika, że ​​Hammer.js jest moim najlepszym podejściem i używam wersji biblioteki jQuery.

Jestem w stanie przesuwać i powiększać obraz za pomocą właściwości viewBox SVG. Problem, który napotykam, polega na używaniu informacji o punkcie środkowym podczas powiększania szczypania (w porównaniu ze skalowaniem w lewym górnym rogu). Ten punkt środkowy, gdziekolwiek jest na moim obrazie, powinien pozostać w środku szczypty. Oczywiście rozwiązaniem jest modyfikacja pierwszych dwóch części okienka widoku, ale mam problem z określeniem poprawnych wartości. Punkt środkowy (event.gesture.center) wydaje się być podany we współrzędnych strony przeglądarki, więc muszę dowiedzieć się, jak go wiarygodnie skalować, a następnie obliczyć współrzędne x i y pola widzenia. Szukałem przykładów, ale nie mogłem znaleźć niczego, co byłoby dość pokrewne.

Czy użycie atrybutu viewBox jest najlepszym sposobem skalowania obrazów SVG? Czy są lepsze alternatywy? Czy ktoś ma przykładowy kod powiększania obrazu SVG z centrum szczypania?

Zauważam również, że nawet jeśli wiążę obsługę zdarzeń z elementem SVG, gest szczypania wydaje się działać z dowolnego miejsca na stronie. Nie jest to domyślna obsługa szczypta przeglądarki, ponieważ tylko powiększa obraz SVG przy użyciu mojego kodu. Oto kod, którego używam do wiązania zdarzenia pinch:

$(window.demoData.svgElement).hammer().on("pinch", function (event) {
    event.preventDefault();
    ...
});

Dziękujemy za pomoc w tych dwóch kwestiach.