使用 touchmove 捕捉 Y 座標:逐步指南
P粉996763314
P粉996763314 2023-10-08 10:35:03
0
1
693

我正在嘗試使用html、javascript 和canvas 製作一個移動應用程序,基本上向下滾動會增加圖像的縮放,向上滾動會減少圖像的縮放,但我只能減少縮放,因為向上滾動時不斷增加尺寸,我希望它能減小尺寸。

部分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);

}

P粉996763314
P粉996763314

全部回覆(1)
P粉818088880

要取得 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();
});
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板