javascript + html5 canvas: рисование вместо перетаскивания на мобильных устройствах? - PullRequest
Новая
       12

javascript + html5 canvas: рисование вместо перетаскивания на мобильных устройствах?

6 голосов
/ 02 апреля 2012

Я использую html5 canvas + некоторый javascript (onmousedown / move / up), чтобы создать простую панель рисования на веб-странице.

Работает нормально в Opera, Firefox, Chrome и т. Д. (Пробовал на настольных ПК).Но если я захожу на эту страницу с iPhone, при попытке рисовать на холсте, он перетаскивает или прокручивает страницу.

Это хорошо для другого содержимого страницы, перемещая страницу вверх и вниз, вы можете перемещаться по странице в мобильном браузере, как обычно.Но есть ли способ отключить это поведение на холсте, чтобы и мобильные посетители могли на нем что-то нарисовать?

Для справки, вот минимальный пример: 

<html><head><script type='text/javascript'>
function init()
{
  var canvas = document.getElementById('MyCanvas');
  var ctx = canvas.getContext('2d');
  var x = null;
  var y;
  canvas.onmousedown = function(e)
  {
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    ctx.beginPath();
    ctx.moveTo(x,y);
  }
  canvas.onmouseup = function(e)
  {
    x = null;
  }  
  canvas.onmousemove = function(e)
  {
    if (x==null) return;
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetLeft;
    ctx.lineTo(x,y);
    ctx.stroke();
  }  
}
</script></head><body onload='init()'>
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'>
</canvas></body></html>
* 1009Есть ли какой-то особый стиль или событие, которое я должен добавить на холст, чтобы избежать перетаскивания страницы при прокрутке на холсте?

Ответы [ 2 ]

6 голосов
/ 02 апреля 2012

iPad / iPhone не имеет событий мыши *.Вам нужно использовать touchstart, touchmove и touchend.Это событие может иметь несколько касаний, поэтому вам нужно получить первое, например, следующее: 

canvas.ontouchstart = function(e) {
  if (e.touches) e = e.touches[0];
  return false;
}

Важно return false в методе сенсорного запуска, потому что в противном случае прокрутка страницы запускается.

0 голосов
/ 17 июля 2019

Я собираюсь добавить к ответу Grassator, добавив ссылку на этот ответ, которая более подробно описывает код, необходимый для работы этого решения: https://stackoverflow.com/a/16630678/5843693.

Методы для canvas - всевызывается в ящике следующим образом: 

var drawer = {
   isDrawing: false,
   touchstart: function (coors) {
      ctx.beginPath();
      ctx.moveTo(coors.x, coors.y);
      this.isDrawing = true;
   },
   touchmove: function (coors) {
      if (this.isDrawing) {
         ctx.lineTo(coors.x, coors.y);
         ctx.stroke();
      }
   },
   touchend: function (coors) {
      if (this.isDrawing) {
         this.touchmove(coors);
         this.isDrawing = false;
      }
   }
};

Кроме того, EventListener s специально заказываются так, чтобы сенсорный ввод выполнялся первым: 

var touchAvailable = ('createTouch' in document) || ('onstarttouch' in window);

if (touchAvailable) {
   canvas.addEventListener('touchstart', draw, false);
   canvas.addEventListener('touchmove', draw, false);
   canvas.addEventListener('touchend', draw, false);
} else {
   canvas.addEventListener('mousedown', draw, false);
   canvas.addEventListener('mousemove', draw, false);
   canvas.addEventListener('mouseup', draw, false);
}

Наконец, "эластичный""прокрутка предотвращается добавлением еще одного EventListener ближе к концу кода. 

document.body.addEventListener('touchmove', function (event) {
   event.preventDefault();
}, false);

Все это находится внутри window.addEventListener('load', function () {}).

...