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);
} 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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(); });