touch zoom in mobile about raiku-app

[codeautopilot]

To solve the task, we need to add touch event listeners to the two Vue components ReaderHorizontal.vue and ChapterPageModeSingle.vue. These listeners will detect a pinch gesture, which is commonly used for zooming in mobile devices.

In the ReaderHorizontal.vue component, touch event listeners are already implemented. We need to enhance the onTouchMove method to detect a pinch gesture. This can be done by tracking the distance between two touch points. If the distance increases, it's a zoom-in gesture, and if it decreases, it's a zoom-out gesture. Here's the code snippet:

let initialDistance = null;

function onTouchMove(event) {
  if (event.touches.length === 2) {
    const touch1 = event.touches[0];
    const touch2 = event.touches[1];
    const distance = Math.hypot(
      touch1.clientX - touch2.clientX,
      touch1.clientY - touch2.clientY
    );

    if (initialDistance === null) {
      initialDistance = distance;
    } else {
      if (distance > initialDistance) {
        // Zoom in
      } else if (distance < initialDistance) {
        // Zoom out
      }

      initialDistance = distance;
    }
  } else {
    initialDistance = null;
  }

  // Existing code...
}

In the ChapterPageModeSingle.vue component, we need to add touch event listeners for touchstart, touchmove, and touchend. In the touchstart event, we get the initial touch position and the initial zoom level. In the touchmove event, we calculate the distance between the initial touch position and the current touch position, and adjust the zoom level accordingly. In the touchend event, we reset the initial touch position and the initial zoom level. Here's the code snippet:

let touchStart = null;
let zoomStart = null;

function onTouchStart(event) {
  touchStart = {
    x: event.touches[0].clientX,
    y: event.touches[0].clientY
  };
  zoomStart = zoom.value;
}

function onTouchMove(event) {
  if (!touchStart || zoomStart === null) return;

  const diffX = event.touches[0].clientX - touchStart.x;
  const diffY = event.touches[0].clientY - touchStart.y;
  const distance = Math.sqrt(diffX * diffX + diffY * diffY);

  zoom.value = zoomStart + distance / 10; // Adjust this formula as needed
}

function onTouchEnd() {
  touchStart = null;
  zoomStart = null;
}

useEventListener(window, "touchstart", onTouchStart);
useEventListener(window, "touchmove", onTouchMove);
useEventListener(window, "touchend", onTouchEnd);

Please note that these are basic implementations and might need adjustments based on your specific requirements. For a more complete implementation, you might want to use a library that provides pinch-to-zoom functionality, or use the GestureEvent interface if it's available in your target browsers.

Changes on src/components/truyen-tranh/readers/ReaderHorizontal.vue

The file src/components/truyen-tranh/readers/ReaderHorizontal.vue already has touch event listeners implemented. The touch events are handled by the methods onTouchStart, onTouchMove, and onTouchEnd.

To implement zoom behavior, you need to detect a pinch gesture. This can be done by tracking the distance between two touch points. When the distance increases, it's a zoom-in gesture. When the distance decreases, it's a zoom-out gesture.

You can add this logic in the onTouchMove method. Here's a simple example of how you can do it:

let initialDistance = null;

function onTouchMove(event) {
  if (event.touches.length === 2) {
    const touch1 = event.touches[0];
    const touch2 = event.touches[1];
    const distance = Math.hypot(
      touch1.clientX - touch2.clientX,
      touch1.clientY - touch2.clientY
    );

    if (initialDistance === null) {
      initialDistance = distance;
    } else {
      if (distance > initialDistance) {
        // Zoom in
      } else if (distance < initialDistance) {
        // Zoom out
      }

      initialDistance = distance;
    }
  } else {
    initialDistance = null;
  }

  // Existing code...
}

This is a basic implementation and might need adjustments based on your specific requirements. For example, you might want to add a threshold for the distance change to avoid accidental zooms. Also, you need to implement the actual zooming logic in the // Zoom in and // Zoom out comments.

Changes on src/components/truyen-tranh/readers/__components__/ChapterPageModeSingle.vue

This Vue component already has mouse event listeners for mousedown, mousemove, and mouseup. To add touch events, you can add event listeners for touchstart, touchmove, and touchend.

In the touchstart event, you can get the initial touch position and the initial zoom level. In the touchmove event, you can calculate the distance between the initial touch position and the current touch position, and adjust the zoom level accordingly. In the touchend event, you can reset the initial touch position and the initial zoom level.

Here is a rough example of how you can implement this:

let touchStart = null;
let zoomStart = null;

function onTouchStart(event) {
  touchStart = {
    x: event.touches[0].clientX,
    y: event.touches[0].clientY
  };
  zoomStart = zoom.value;
}

function onTouchMove(event) {
  if (!touchStart || zoomStart === null) return;

  const diffX = event.touches[0].clientX - touchStart.x;
  const diffY = event.touches[0].clientY - touchStart.y;
  const distance = Math.sqrt(diffX * diffX + diffY * diffY);

  zoom.value = zoomStart + distance / 10; // Adjust this formula as needed
}

function onTouchEnd() {
  touchStart = null;
  zoomStart = null;
}

useEventListener(window, "touchstart", onTouchStart);
useEventListener(window, "touchmove", onTouchMove);
useEventListener(window, "touchend", onTouchEnd);

Please note that this is a very basic implementation of pinch-to-zoom. It does not take into account the direction of the pinch (in or out), and it does not handle multi-touch events. For a more complete implementation, you might want to use a library that provides pinch-to-zoom functionality, or use the GestureEvent interface if it's available in your target browsers.

---

Current plan usage: 88.50%

---

Have feedback or need help?

Discord
Documentation
[email protected]

[tachibana-shin]

caf8ea7