J'essaie de créer une application mobile en utilisant HTML, Javascript et Canvas, le défilement vers le bas augmente le zoom de l'image et le défilement vers le haut le diminue, mais je ne peux que diminuer le zoom car la taille ne cesse d'augmenter à mesure que je fais défiler vers le haut, je je veux qu'il réduise la taille.
Partie du code 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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour obtenir
Delta Y, utilisez le code suivant pour le résoudre, qui stocke la position tactile.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(); });