Приложение для рисования холста для сенсорных устройств

Question

Сообщество Hallo stackoverflooow, у меня небольшая проблема с моим маленьким графическим приложением. Он отлично работает на рабочем столе, но не на сенсорных устройствах. Приложение просто делает точку, когда я касаюсь дисплея. Надеюсь, кто-то может мне помочь.

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

var radius = 5; 
context.lineWidth = radius*2; 
var press = false; 

var putPoint = function(e){ 
    if(press){ 
    context.beginPath(); 
    context.arc(e.offsetX, e.offsetY, radius, 0, 2*Math.PI); 
    context.fill(); 
    } 
} 

var start = function(e){ 
    press = true; 
    putPoint(e); 
    context.beginPath(); 
    context.moveTo(e.offsetX, e.offsetY); 
} 

var move = function(e){ 
    context.lineTo(e.offsetX, e.offsetY); 
    context.stroke(); 
    putPoint(e); 
    context.beginPath(); 
    context.moveTo(e.offsetX, e.offsetY); 
} 

var stop = function(){ 
press = false; 
context.beginPath(); 
} 

//mouse 
canvas.addEventListener('mousedown', start); 
canvas.addEventListener('mousemove', move); 
canvas.addEventListener('mouseup', stop); 

//touch 
canvas.addEventListener('touchstart', start); 
canvas.addEventListener('touchmove', move); 
canvas.addEventListener('touchend', stop); 

`

Answer 1

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

Я забыл, откуда я получил это сейчас (извините оригинального автора), но вот код, который я использую в одном из моих приложений. Функция привязана ко всем трем типам сенсорных событий - touchstart, touchmove и touchhend. Он не касается мультитач, просто игнорируя любые события, которые происходят, когда несколько пальцев касаются устройства ввода. Затем он создает синтетическое событие мыши, которое затем передается на обычные обработчики событий мыши.

function onCanvasTouch(evt) 
{ 
    if (evt.touches.length > 1) 
     return; 

    if ((evt.type == "touchend" && evt.touches.length > 0)) 
    { 
     evt.preventDefault(); 
     return; 
    } 

    evt.preventDefault(); 

    var newEvt = document.createEvent("MouseEvents"); 
    var type = null; 
    var touch = null; 
    switch (evt.type) 
    { 
     case "touchstart": 
      type = "mousedown"; 
      touch = evt.changedTouches[0]; 
      break; 
     case "touchmove": 
      type = "mousemove"; 
      touch = evt.changedTouches[0]; 
      break; 
     case "touchend": 
      type = "mouseup"; 
      touch = evt.changedTouches[0]; 
      break; 
    } 

    newEvt.initMouseEvent(
          type, true, true, evt.target, 0, 
          touch.screenX, touch.screenY, touch.clientX, touch.clientY, 
          evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null 
         ); 

    evt.target.dispatchEvent(newEvt); 
}