robinrodricks / vue3-touch-events

Simple touch events support for vue.js 3
MIT License
216 stars 27 forks source link

Pinch zoom gesture #7

Open 9mm opened 2 years ago

9mm commented 2 years ago

Any chance of getting this gesture added? It's pretty painful to have to do this one event manually, the API of other gesture libraries are terrible (or require a lot of work with vue 3)

CKGrafico commented 2 years ago

Not the best solution but FYI I've implemented this in vue 3.


    function onDrag(e) {
      const MIN_PIXES_DISTANCE = 25;

      // If is not using 2 fingers
      const touches = e.changedTouches;
      if (touches.length !== 2) {
        isDragging.value = false;
        draggingYs.value = [];
        return;
      }

      if (!isDragging.value) {
        isDragging.value = true;
        draggingYs.value = [touches[0].clientY, touches[1].clientY];
        return;
      }

      if (
        (draggingYs.value[0] - touches[0].clientY < -MIN_PIXES_DISTANCE &&
          draggingYs.value[1] - touches[1].clientY >= MIN_PIXES_DISTANCE) ||
        (draggingYs.value[1] - touches[1].clientY < -MIN_PIXES_DISTANCE &&
          draggingYs.value[0] - touches[0].clientY >= MIN_PIXES_DISTANCE)
      ) {
      // Your callback here
        showZoom(src);
      }

      isDragging.value = false;
      draggingYs.value = [];
    }