如何用html5 canvas处理触摸事件？

Question

我用 html5 canvas 创建了基于绘画的功能。当谈到桌面时，它按我的预期工作，但问题只出现在触摸设备上。我不知道问题来自哪里。有人可以帮我解决这个问题吗？这两天我很挣扎。

我的代码

if(windowWidth <= 1024) {
  canvas2.addEventListener('touchmove', function(e) {
      mouse.x = e.pageX;
      mouse.y = e.pageY;
      handlerPos.x = e.pageX;
      handlerPos.y = e.pageY;
  }, false);
} else {
  canvas2.addEventListener('mousemove', function(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
    handlerPos.x = e.pageX;
    handlerPos.y = e.pageY;
  }, false);
}

Answer 1

也许您正在寻找这个

不幸的是，一切并不顺利。与内置浏览器手势的冲突引起了问题。当我在画布上移动手指时，我希望页面保持静止，以便我可以绘画。但是，如果我的页面有水平或垂直滚动（确实如此），页面将随着我的手指移动，从而无法进行正确的绘制。经过一番挫折后，我偶然发现了解决方案：如果触摸事件的目标是画布，则阻止在 document.body 上滚动。

http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

document.body.addEventListener('touchmove', function(e) {
   mouse.x = e.pageX;
   mouse.y = e.pageY;
   handlerPos.x = e.pageX;
   handlerPos.y = e.pageY;
}, false);

Answer 2

什么对我有用。

const startDrawing = (event) => {
        event.preventDefault()
        event.stopPropagation()
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');
        /*const { x, y } = getMousePos(event);
        ctx.beginPath();
        ctx.moveTo(x, y);*/
        setIsDrawing(true);
        draw(event)
    };

    // Function to draw on the canvas
    const draw = (event) => {
        if (!isDrawing) return;
        event.preventDefault()
        event.stopPropagation()
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');
        const { x, y } = getMousePos(event);
        ctx.lineTo(x, y);
        ctx.stroke();
        //ctx.strokeStyle = color;
        ctx.beginPath();
        ctx.moveTo(x,y);

    }

useEffect(() => {
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');

        // Setting up a high-resolution canvas for smooth drawing
        const scale = window.devicePixelRatio || 1;
        canvas.width = 500 * scale;
        canvas.height = 200 * scale;
        canvas.style.width = "100%";
        canvas.style.maxWidth = "500px";
        canvas.style.height = "200px";
        ctx.scale(scale, scale);
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        canvas.addEventListener('touchstart', startDrawing, { passive: false });
        canvas.addEventListener('touchmove', draw, { passive: false });
        canvas.addEventListener('touchend', stopDrawing);

        return () => {
            // Cleanup event listeners when component unmounts
            canvas.removeEventListener('touchstart', startDrawing);
            canvas.removeEventListener('touchmove', draw);
            canvas.removeEventListener('touchend', stopDrawing);
        };
    }, []);

<canvas
                ref={canvasRef}
                width='100%'
                height={200}
                style={{
                    border: '1px solid #DEDEE3',
                    borderRadius: '5px',
                    height: '200px',
                    backgroundColor: '#fff',
                    userSelect: 'all'
                }}
                onPointerDown={startDrawing}
                onPointerMove={draw}
                onPointerLeave={stopDrawing}
                onPointerUp={stopDrawing}
            ></canvas>

我在这里所做的是，我直接在cavas上订阅指针和鼠标事件，因为这些事件是非被动的，但触摸事件是被动的，所以防止默认值对它们不起作用，所以我