我的画布中的触摸事件没有按预期工作，我无法确定它不工作的原因 [英] The touch event in my canvas is not working as intended and I am not able to identify the reason why it is not working

问题描述

所以我目前正在尝试为 Web 应用程序创建一个笔记本样式的模块.目前它的鼠标事件工作得很好，但在使用触摸事件时却没有.

So I am currently trying to create a notebook styled module for a web application. Currently it is working perfectly fine with its mouse event but not when using touch events.

//TOUCH LISTENER
theCanvas.addEventListener("touchstart", startT, false);
theCanvas.addEventListener("touchend", endT, false);
theCanvas.addEventListener("touchmove", moveT, false);

//MOUSE LISTENER
theCanvas.addEventListener("mousedown", start);
theCanvas.addEventListener("mouseup", end);
theCanvas.addEventListener("mousemove", move, false);

//MOUSE EVENTS
function start(event) {
  if (event.button === MAIN_MOUSE_BUTTON) {
    shouldDraw = true;

        setLineProperties(theContext);

        theContext.beginPath();

    let elementRect = event.target.getBoundingClientRect();
        theContext.moveTo(event.clientX - elementRect.left, event.clientY - elementRect.top);

        console.log(PenType(mode));
  }
}

function end(event) {
  if (event.button === MAIN_MOUSE_BUTTON) {
    shouldDraw = false;
  }
}

function move(event) {
  if (shouldDraw) {
    let elementRect = event.target.getBoundingClientRect();
    theContext.lineTo(event.clientX - elementRect.left, event.clientY - elementRect.top);
        theContext.stroke()

  }
}

//TOUCH EVENTS
function startT(event) {
    event.preventDefault();
    shouldDraw = true;

    setLineProperties(theContext);

    theContext.beginPath();

    let elementRect = event.target.getBoundingClientRect();
    theContext.moveTo(event.clientX - elementRect.left, event.clientY - elementRect.top);

    console.log(PenType(mode));
}

function endT(event) {
  if (event.touches.length == 1) {
        event.preventDefault();
    shouldDraw = false;
  }
}

function moveT(event) {
  if (shouldDraw) {
        event.preventDefault();
    let elementRect = event.target.getBoundingClientRect();
    theContext.lineTo(event.clientX - elementRect.left, event.clientY - elementRect.top);
        theContext.stroke()
  }
}

虽然鼠标事件功能齐全并允许在画布上绘图.触摸事件在画布的左上边界附近只有一小块可以绘制的空间，只有当你点击边界时，只有一个点.它应该像鼠标事件一样工作

While the mouse event is fully functional and allow drawing on the canvas. The touch events has only the a small space near the left and top border of the canvas that can be drawn on, and it is only when u tap on the border, just a dot. It should have worked like the mouse event

推荐答案

由于触摸事件可以处理多个触摸点，手指的 x 和 y 不像鼠标那样由 event.clientX 和 event.clientY 描述.取而代之的是 event.touches，它是一个坐标数组.所以在你的代码中，每次你想要处理触摸事件时，只需将 event.clientX 替换为 event.touches[0].clientX 和 event.clientYcode> by event.touches[0].clientY(当然考虑到你只想处理一根手指)

Since touch event can handle multiple touch points, the x and y of the fingers are not described by event.clientX and event.clientY like for mouse. Instead you got event.touches which is an array of coordinates. So in your code, everytime you want to handle touch event, just replace event.clientX by event.touches[0].clientX and event.clientY by event.touches[0].clientY (considering you only want to handle one finger of course)

这篇关于我的画布中的触摸事件没有按预期工作，我无法确定它不工作的原因的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！