Есть канвас на которой рисуется произвольная линия по движению мыши и зажатию левой кнопки.
Работает только на ПК, на планшетах и андроидах вместо того чтобы линии рисоваться по дотрагиванию и проведению её по экрану мобилки, происходит банальная прокрутка страницы.
Касание повилось дивом, то есть блоком и рисовал на нем а не прокручивал страницу на андроиде или планшете.
Подскажите пожалуйста, что для этого нужно?
Используйте метод 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>
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Как в таймере обратного отсчета T(-) Countdown для WordPress можно сделать, чтобы когда обратный отсчет подошел к нулю, то таймер каждый раз автоматически...