英文:
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 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);
}
答案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();
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论