Как сделать обработку жеста «зум двумя пальцами» на тачскринах на JavaScript?

Question

[med1um]

Подскажите как на изображении сделать умную обработку жеста "зум" (увеличение/уменьшение двумя пальцами)
как на яндекс-картах: чтобы также, как там, центр увеличения был по центру пальцев, и при перемещении
обоих пальцев изображение перемещалось. Поворот не нужен.

Может быть есть проверенная легковесная библиотека?

Answer 1

[Антон Неверов]

https://zingchart.github.io/zingtouch/
https://interactjs.io/
https://love2dev.com/blog/deeptissuejs-a-gesture-l...
Любую берите, какую предпочтёте или какая больше подходит под ваши задачи.
Легковесность компенсируется минификацией и сборкой проекта.

Answer 2

[Дмитрий Беляев]

Можно и без библиотек:
https://developer.mozilla.org/ru/docs/Web/API/Touc...
https://developer.mozilla.org/ru/docs/Web/API/Touc...
https://developer.mozilla.org/ru/docs/Web/API/Touc...
https://developer.mozilla.org/en-US/docs/Web/API/T...

В TouchList каждый элемент - это палец. По изменениям координат в последовательных события touchmove можно построить векторы движения.
Усредняем эти векторы до 1/4 или 1/8 долей окружности с общим центром для всех векторов, если 2 пальца движутся в противоположных долях - это зум, навстречу друг другу - уменьшение, а от друг-друга - увеличение.

Answer 3

[C0VER]

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
<div id="worldMap" style="width:100%; height:320px;"></div>
<script>
   var map = L.map('worldMap', {crs: L.CRS.Simple, attributionControl: false, center: [1709/2,1550/2], minZoom: 1, maxZoom: 4, zoom: 1});
   map.zoomControl.setPosition('bottomright');
   var southWest = map.unproject([0, 1550], map.getMaxZoom() - 1);
   var northEast = map.unproject([1709, 0], map.getMaxZoom() - 1);
   var bounds = new L.LatLngBounds(southWest, northEast);
   L.imageOverlay('https://upload.wikimedia.org/wikipedia/commons/1/1e/World_map.png', bounds).addTo(map);
   map.setMaxBounds(bounds);
   map.on('drag', function () {map.panInsideBounds(bounds, {animate: false})});
</script>