Wacom в браузере отменяет движение - PullRequest
Новая
       23

Wacom в браузере отменяет движение

0 голосов
/ 10 июня 2018

В настоящее время я пытаюсь использовать свой wacom intous для рисования чего-либо на холсте в моем браузере.

Код довольно прост и не делает ничего, кроме нахождения положения моей мыши и рисования пути, когдащелчок мыши.

Это работает, как и ожидалось, когда я использую свою мышь.Когда я использую свой планшет Wacom, движение будет отменено через ~ 20 пикселей, и будет запущено событие lostpointercapture, а также событие pointercancel.

Это код: 

(function() {


var canvas = document.querySelector('.canvas');
  var ctx = canvas.getContext('2d');

  var currentPosition = { 
    x: 0, 
    y: 0 
  };

  function init() {
    adjustCanvasSize();
  }

  function adjustCanvasSize() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  }

  function setPosition(ev) {
    currentPosition.x = ev.clientX;
    currentPosition.y = ev.clientY;
  }

  function draw(ev) {
    ev.preventDefault();
    if (ev.buttons !== 1) {
      return;
    }
    ctx.beginPath(); 
    ctx.lineWidth = 1; 
    ctx.lineCap = 'round'; 
    ctx.strokeStyle = '#1a1b1c'; 
    ctx.moveTo(currentPosition.x, currentPosition.y); 
    setPosition(ev);
    ctx.lineTo(currentPosition.x, currentPosition.y);
    ctx.stroke(); 
  }

  document.addEventListener('pointermove', draw);
  document.addEventListener('pointerdown', setPosition);
  document.addEventListener('pointerenter', setPosition);

  init();
})();

У кого-нибудь есть идея, почему wacom перестает рисовать после нескольких пикселей?

1 Ответ

0 голосов
/ 25 мая 2019

Я столкнулся с этой проблемой, с PointerEvent «lostpointercapture» после прохождения нескольких пикселей

https://jsfiddle.net/mr1z7qg3/

Решение состоит в том, чтобы добавить 

touch-action: none;

стиль для рисованного местоположения, в противном случае браузер будет интерпретировать его как жест касания / панорамирования https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

... В Chrome

Firefox требует dom.w3c_pointer_events.dispatch_by_pointer_messages в about: config вместо

...