javascript - 绘画应用程序不适用于移动设备。这是为什么?
问题描述
我有这个绘画应用程序,虽然它适用于桌面浏览器,但它不适用于移动设备。我为移动事件添加了事件侦听器,移动设备可以理解,但什么也没发生。关于如何解决此问题的任何想法?
这是应用程序的链接:https ://codepen.io/sp2012/pen/oNWeZBx
这是代码:
HTML
<input type="color" class="js-color-picker color-picker">
<input type="range" class="js-line-range" min="1" max="72" value="1">
<label class="js-range-value">1</label>Px
<canvas class="js-paint paint-canvas" width="200" height="200"></canvas>
CSS
.paint-canvas {
border: 1px black solid;
display: block;
margin: 1rem;
}
.color-picker {
margin: 1rem 1rem 0 1rem;
}
JS
const paintCanvas = document.querySelector( '.js-paint' );
const context = paintCanvas.getContext( '2d' );
context.lineCap = 'round';
const colorPicker = document.querySelector( '.js-color-picker');
colorPicker.addEventListener( 'change', event => {
context.strokeStyle = event.target.value;
} );
const lineWidthRange = document.querySelector( '.js-line-range' );
const lineWidthLabel = document.querySelector( '.js-range-value' );
lineWidthRange.addEventListener( 'input', event => {
const width = event.target.value;
lineWidthLabel.innerHTML = width;
context.lineWidth = width;
} );
let x = 0, y = 0;
let isMouseDown = false;
const stopDrawing = () => { isMouseDown = false; }
const startDrawing = event => {
isMouseDown = true;
[x, y] = [event.offsetX, event.offsetY];
}
const drawLine = event => {
if ( isMouseDown ) {
const newX = event.offsetX;
const newY = event.offsetY;
context.beginPath();
context.moveTo( x, y );
context.lineTo( newX, newY );
context.stroke();
//[x, y] = [newX, newY];
x = newX;
y = newY;
}
}
paintCanvas.addEventListener( 'mousedown', startDrawing );
paintCanvas.addEventListener( 'mousemove', drawLine );
paintCanvas.addEventListener( 'mouseup', stopDrawing );
paintCanvas.addEventListener( 'mouseout', stopDrawing );
paintCanvas.addEventListener("touchstart", startDrawing);
paintCanvas.addEventListener("touchend", stopDrawing);
paintCanvas.addEventListener("touchcancel", stopDrawing);
paintCanvas.addEventListener("touchmove", drawLine);
解决方案
这里没有专家,但是通过console.table(event)
在里面添加一个语句startDrawing
我们可以看到(使用浏览器开发工具)在桌面模式下MouseEvent
接收到一个对象,而在移动模式下接收到一个对象,而TouchEvent
后者没有offsetX
/offsetY
属性。
看起来您可以使用event.touches
或event.targetTouches
。两者都包含一个 TouchList 对象,它是一个类似数组的Touch
对象集合,包含坐标等:
推荐阅读
- c - 指向整数数组的指针
- javascript - Mongoose 从查询中检索特定的数组索引(不是完整数组)
- javascript - 如何在不获取 %22 引号的情况下将 CURL 请求转换为 AJAX 调用?
- php - 默认情况下如何正确显示存储在用户表中的国家/地区?
- java - 华为系统文件“源代码与字节码不匹配”
- javascript - 使用 JavaScript 的 Firebase
- c++ - 透视图openGL qt的任何解决方案
- c# - GetRequestStream() 第二次后超时错误
- python - 在列表中查找大小为 n 和更少的最大重复
- javascript - 使用 viewBox 属性从 svg 上的事件中获取正确的 XY 值