触摸移动真的很慢

Question

我正在构建一个类似绘画的功能，用户可以在其中画一条线，但是 touchmove 事件在我的设备（android 手机）上发出得非常慢，因此这条线变得尖锐。当我将设备连接到 PC 并通过 USB 调试打开 chrome devtools 时，一切正常。在桌面-chrome 中的手机模拟器上没有任何问题。

这是一个屏幕截图。内圈是用慢速触摸事件绘制的，对于外圈，我将设备连接到我的电脑。

这是另一个屏幕截图，显示各个“touchmove”事件调用之间的持续时间。顶部部分（绿色值）发生在开发工具打开时，底部部分（红色值）发生在开发工具关闭时。

代码：

function DrawingCanvas(/* ... */) {
    // ...

    const handleTouchMove = (event) => {
        handleMouseMove(event.touches[0])
    }

    const handleMouseMove = ({ clientX, clientY }) => {
        if (!isDrawing) {
            return
        }

        const canvasRect = canvas.getBoundingClientRect()
        const x = clientX - canvasRect.x
        const y = clientY - canvasRect.y

        currentPath.current.addPoint([x, y])
        update()
    }

    const update = () => {
        clearCanvas()
        drawPath()
    }

    // ...

    useEffect(() => {
        const drawingCanvas = drawingCanvasRef.current

        // ...

        drawingCanvas.addEventListener("touchstart", handleDrawStart)
        drawingCanvas.addEventListener("touchend", handleDrawEnd)
        drawingCanvas.addEventListener("touchcancel", handleDrawEnd)
        drawingCanvas.addEventListener("touchmove", handleTouchMove)
        
        drawingCanvas.addEventListener("mousedown", handleDrawStart)
        drawingCanvas.addEventListener("mouseup", handleDrawEnd)
        drawingCanvas.addEventListener("mousemove", handleMouseMove)
        
        return () => {
            drawingCanvas.removeEventListener("touchstart", handleDrawStart)
            drawingCanvas.removeEventListener("touchmove", handleTouchMove)
            drawingCanvas.removeEventListener("touchend", handleDrawEnd)
            drawingCanvas.removeEventListener("touchcancel", handleDrawEnd)

            drawingCanvas.removeEventListener("mousedown", handleDrawStart)
            drawingCanvas.removeEventListener("mouseup", handleDrawEnd)
            drawingCanvas.removeEventListener("mousemove", handleMouseMove)
        }
    })

    return <canvas /* ... */ />
}

有谁知道如何解决这个问题？
大家可以自己去网站测试一下： https: //www.easymeme69.com/editor

Answer 1

以某种方式调用event.preventDefault()touchmove 事件修复了它。