0

Есть канвас на которой рисуется произвольная линия по движению мыши и зажатию левой кнопки.

Работает только на ПК, на планшетах и андроидах вместо того чтобы линии рисоваться по дотрагиванию и проведению её по экрану мобилки, происходит банальная прокрутка страницы.

Касание повилось дивом, то есть блоком и рисовал на нем а не прокручивал страницу на андроиде или планшете.

Подскажите пожалуйста, что для этого нужно?

2
  • Что-то подобное реализовано в яндекс карте. Когда палец попадает в неё, то прокручивается уже не страница, а карта, только можно ли как-то это с неё скопировать? 11 мая 2018 в 16:56
  • Думаю смотреть нужно в сторону всплытия событий. learn.javascript.ru/event-bubbling
    – dlarchikov
    19 мая 2018 в 5:16

1 ответ 1

-1

Используйте метод Event.preventDefault() для остановки всплытия события.
Тогда событие не попадет в обработчики родительского элемента со скроллбарами - и следовательно, мы избежим ненужной прокрутки свайпом.

initDrawCanvas(document.getElementById('test')); 

function initDrawCanvas(cnv) {
  cnv.width  = cnv.clientWidth; 
  cnv.height = cnv.clientHeight; 
  cnv.contextMain = cnv.getContext('2d'); 
  cnv.linesArr = []; 
  cnv.drawLines = function () {
    this.contextMain.clearRect(0, 0, this.width, this.height); 
    this.contextMain.beginPath(); 
    for (let line of this.linesArr) {
      if (!line.x2 || !line.y2)
        continue; 
      this.contextMain.moveTo(line.x1, line.y1); 
      this.contextMain.lineTo(line.x2, line.y2); 
    }
    this.contextMain.stroke(); 
    requestAnimationFrame(() => this.drawLines()); 
  }; 
  cnv.inputHandler = function (e) {
    let bcr = this.getBoundingClientRect(), 
        x = (e.changedTouches[0].clientX || e.clientX) - bcr.left, 
        y = (e.changedTouches[0].clientY || e.clientY) - bcr.top; 
    switch (e.type) {
      case 'touchstart':
      case 'mousedown':
        this.linesArr.push({ x1: x, y1: y }); 
        break; 
      case 'touchmove':
      case 'mousemove':
        this.drawLines(); 
      case 'touchend':
      case 'mouseup':
        let line = this.linesArr[this.linesArr.length - 1]; 
        line.x2 = x;
        line.y2 = y; 
        break; 
      default:
        return; 
    }
    e.preventDefault(); 
  }; 
  [
    'mousedown', 'mouseup', 'mousemove', 'touchstart', 'touchend', 'touchmove'
  ].forEach(evtName => cnv.addEventListener(evtName, cnv.inputHandler)); 
  cnv.drawLines(); 
}
body { height: 200vh; }

#test {
  width: 100%; height: 40%; 
  border: 1px solid #ccc; 
}
<canvas id="test"></canvas>

1
  • спасибо, помогло, разобрался 13 мая 2018 в 18:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.