How to handle the "two-finger zoom" gesture on touchscreens in JavaScript?

Question

JavaScript

Tell me how to make a smart processing of the "zoom" gesture (increase / decrease with two fingers) on the image,
as on Yandex maps: so that, just like there, the center of increase is in the center of the fingers, and when you move
both fingers, the image moves. No turn needed.

Maybe there is a proven lightweight library?

Answer 1

https://zingchart.github.io/zingtouch/
https://interactjs.io/
https://love2dev.com/blog/deeptissuejs-a-gesture-l...
Take whichever you prefer or whichever suits you better your tasks.
The lightness is compensated by the minification and assembly of the project.

Answer 2

It is possible without libraries:
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
... it's a finger. Based on coordinate changes in successive touchmove events, motion vectors can be constructed.
We average these vectors to 1/4 or 1/8 of a circle with a common center for all vectors, if 2 fingers move in opposite proportions - this is a zoom, towards each other - a decrease, and from each other - an increase.