在手机上与画布互动时避免滚动

Question

我正在尝试使用触摸html画布上的绘画，但是当我尝试绘制时，它会滚动窗口。我已经尝试在事件函数上使用dextDefault（），但是我会发现错误：无法在被动事件侦听器调用中预防默认面。

我的帆布组件看起来像：

  const drawStart = (e) => {
    const { offsetX, offsetY } = e.nativeEvent
    contextRef.current.beginPath()
    contextRef.current.moveTo(offsetX, offsetY)
    contextRef.current.lineTo(offsetX, offsetY)
    contextRef.current.stroke()
    setDrawing(true)
  }

  const drawEnd = () => {
    contextRef.current.closePath()
    setDrawing(false)
  }

  const draw = (e) => {
    e.preventDefault()
    if (!drawing) {
      return
    }
    const { offsetX, offsetY } = e.nativeEvent
    contextRef.current.lineTo(offsetX, offsetY)
    contextRef.current.stroke()
  }

  return (
    <canvas
      onMouseDown={drawStart}
      onTouchStart={drawStart}
      onMouseUp={drawEnd}
      onTouchEnd={drawEnd}
      onMouseMove={draw}
      onTouchMove={draw}
      ref={canvasRef}
    />
  )

在非移动机上使用鼠标功能时，此组件在

Answer 1

您可以尝试不touch操作，以下是Canvas使用Pointer事件的代码的重构，以及用于禁用touch> touch 操作：

<canvas
  onPointerDown={drawStart}
  onPointerUp={drawEnd}
  onPointerMove={draw}
  ref={canvasRef}
  style={{ touchAction: none }}
/>