Capturer les coordonnées Y à l'aide de touchmove : un guide étape par étape

Question

J'essaie de créer une application mobile en utilisant HTML, Javascript et Canvas, le défilement vers le bas augmente le zoom de l'image et le défilement vers le haut le diminue, mais je ne peux que diminuer le zoom car la taille ne cesse d'augmenter à mesure que je fais défiler vers le haut, je je veux qu'il réduise la taille.

Partie du code javascript :

document.addEventListener('touchmove', (event)=>{

  if (event.pageY < 0) {
    zoomLevel /= 1.1; // zoom out by 10%
  } else if (event.pageY > 0) {
    zoomLevel *= 1.1; // zoom in by 10%
  }

  if (zoomLevel < 1) {
    zoomLevel = 1;
  } else if (zoomLevel > 5) {
    zoomLevel = 5;
  }
  drawImage();

})


function drawImage() {

  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // draw zoom area
  const imgWidth = img.width * zoomLevel;
  const imgHeight = img.height * zoomLevel;
  const imgX = canvasWidth / 2 - imgWidth / 2;
  const imgY = canvasHeight / 2 - imgHeight / 2;
  ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight);

}

Answer 1

Pour obtenir Delta Y, utilisez le code suivant pour le résoudre, qui stocke la position tactile.

let zoomLevel = 1;

document.addEventListener('touchstart', (event) => {
  y = event.touches[0].clientY;
});

document.addEventListener('touchmove', (event) => {
  const deltaY = event.touches[0].clientY - y;
  y = event.touches[0].clientY;

  zoomLevel = Math.min(5, Math.max(1, zoomLevel + deltaY * 0.01));
  drawImage();
});