Menangkap koordinat Y menggunakan touchmove: panduan langkah demi langkah

Question

Saya cuba membuat aplikasi mudah alih menggunakan html, javascript dan kanvas, pada asasnya menatal ke bawah meningkatkan zum imej dan menatal ke atas mengurangkannya, tetapi saya hanya boleh mengurangkan zum kerana saiznya terus meningkat apabila saya menatal ke atas, saya mahu ia mengecilkan saiz.

Sebahagian daripada kod 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

Untuk mendapatkan Delta Y, gunakan kod berikut untuk menyelesaikannya, yang menyimpan kedudukan sentuhan.

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