Erfassen von Y-Koordinaten mit touchmove: eine Schritt-für-Schritt-Anleitung

Question

Ich versuche, eine mobile App mit HTML, Javascript und Canvas zu erstellen. Grundsätzlich erhöht das Scrollen nach unten den Zoom des Bildes und das Scrollen nach oben verringert ihn, aber ich kann den Zoom nur verringern, weil die Größe beim Scrollen nach oben immer größer wird, I Ich möchte, dass es kleiner wird.

Teil des Javascript-Codes:

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

要获取 Delta Y，请使用以下代码来解决它，该代码存储触摸位置。

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();
});