繪畫應用程序不適用於移動設備。 這是為什么？

Question

我有這個繪畫應用程序，雖然它適用於桌面瀏覽器，但它不適用於移動設備。 我為移動設備添加了移動設備理解的事件偵聽器，但什么也沒發生。 關於如何解決此問題的任何想法？

這是該應用程序的鏈接： 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);

Answer 1

這里不是專家，但是通過在startDrawing添加console.table(event)語句我們可以看到（使用瀏覽器開發工具）在桌面模式下接收到一個MouseEvent對象，而在移動模式下接收到一個TouchEvent ，而后者沒有具有offsetX / offsetY屬性。

看起來您可以使用event.touches或event.targetTouches 。 兩者都包含一個 TouchList 對象，它是一個類似數組的Touch對象集合，包含坐標等：