英文:
How to capture Y coordinates with touchmove?
问题
以下是您提供的 JavaScript 代码的中文翻译部分：
document.addEventListener('touchmove', (event) => {if (event.pageY < 0) {zoomLevel /= 1.1; // 缩小10%} else if (event.pageY > 0) {zoomLevel *= 1.1; // 放大10%}if (zoomLevel < 1) {zoomLevel = 1;} else if (zoomLevel > 5) {zoomLevel = 5;}drawImage();})function drawImage() {ctx.clearRect(0, 0, canvasWidth, canvasHeight);// 绘制缩放区域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);}
希望这对您有所帮助。如果您需要进一步的帮助，请随时提问。
英文:
I'm trying to make a mobile application with html, javascript with canvas, basically scrolling down increases the zoom of an image and scrolling up decreases the zoom of the image, but I can only decrease the zoom because when doing scroll up keeps increasing the size and i want it to decrease the size.
Part of the javascript code:
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 areaconst 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);}
答案1
得分: 1
要获取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();});
英文:
To get the Delta Y solve it with the following code, which stores the touch position.
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();});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论