在移动设备上与 canvas 互动时避免滚动

Question

我试图允许在 HTML canvas 上使用触摸进行绘图，但当我尝试绘图时它会滚动 window。我已尝试在事件函数上使用 preventDefault()，但出现错误：无法在被动事件侦听器调用中阻止默认。

我的 canvas 组件看起来像：

  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 操作，这里是使用 pointer 事件重构 canvas 代码和禁用 touch 操作的样式规则：

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

在移动设备上与 canvas 互动时避免滚动

avoid scrolling when interacting with canvas on mobile

javascript

canvas

html5-canvas

reactjs