我正在尝试使用 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);
}