@med1um

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

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

Может быть есть проверенная легковесная библиотека?
  • Вопрос задан
  • 1015 просмотров
Пригласить эксперта
Ответы на вопрос 2
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
https://zingchart.github.io/zingtouch/
https://interactjs.io/
https://love2dev.com/blog/deeptissuejs-a-gesture-l...
Любую берите, какую предпочтёте или какая больше подходит под ваши задачи.
Легковесность компенсируется минификацией и сборкой проекта.
Ответ написан
Комментировать
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
Можно и без библиотек:
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 пальца движутся в противоположных долях - это зум, навстречу друг другу - уменьшение, а от друг-друга - увеличение.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы