Событие касания на моем холсте не работает должным образом, и я не могу определить причину, по которой оно не работает - PullRequest
Новая
       31

Событие касания на моем холсте не работает должным образом, и я не могу определить причину, по которой оно не работает

0 голосов
/ 29 апреля 2019

Итак, я сейчас пытаюсь создать модуль в стиле ноутбука для веб-приложения.В настоящее время он отлично работает с событиями мыши, но не при использовании событий касания.

//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()
  }
}

Пока событие мыши полностью функционально и позволяет рисовать на холсте.События касания имеют только небольшое пространство возле левой и верхней границы холста, на котором можно рисовать, и только когда вы нажимаете на границу, просто точка.Это должно было работать как событие мыши

1 Ответ

0 голосов
/ 29 апреля 2019

Поскольку событие касания может обрабатывать несколько точек касания, x и y пальцев не описываются событиями.clientX и event.clientY, как для мыши.Вместо этого вы получили event.touches, который является массивом координат.Поэтому в вашем коде каждый раз, когда вы хотите обработать сенсорное событие, просто замените event.clientX на event.touches[0].clientX и event.clientY на event.touches[0].clientY (учитывая, что вы, конечно, хотите обрабатывать только один палец)

...