Question

我正在尝试制作一个可以在移动浏览器上使用的手指画画布。

我的画布在PC浏览器上（通过鼠标）正常工作，但在移动浏览器上却无法正常工作。即使我的手指没有离开屏幕，笔触也消失了。

是因为Chrome（我正在使用）中的滑动手势在某个时间点覆盖了onPointerMove事件吗？

您可以尝试使用我的画布here（我的服务器并不总是打开）。整个项目包含太多与此问题无关的代码，因此我不在此处发布这些代码。

我的Canvas.js代码如下：

// canvas.js
// modified from https://pusher.com/tutorials/live-paint-react

import React, { Component } from 'react';

class Canvas extends Component {
  constructor(props) {
    super(props);
    this.onPointerDown = this.onPointerDown.bind(this);
    this.onPointerMove = this.onPointerMove.bind(this);
    this.endPaintEvent = this.endPaintEvent.bind(this);
  }

  isPainting = false;
  userStrokeStyle = '#EE92C2';
  line = [];
  prevPos = { offsetX: 0, offsetY: 0 };

  onPointerDown({ nativeEvent }) {
    const { offsetX, offsetY } = nativeEvent;
    this.isPainting = true;
    this.prevPos = { offsetX, offsetY };
  }

  onPointerMove({ nativeEvent }) {
    if (this.isPainting) {
      const { offsetX, offsetY } = nativeEvent;
      const offSetData = { offsetX, offsetY };
      // Set the start and stop position of the paint event.
      const positionData = {
        start: { ...this.prevPos },
        stop: { ...offSetData },
      };
      // Add the position to the line array
      this.line = this.line.concat(positionData);
      this.paint(this.prevPos, offSetData, this.userStrokeStyle);
    }
  }
  endPaintEvent() {
    if (this.isPainting) {
      this.isPainting = false;
      //this.sendPaintData();
    }
  }
  paint(prevPos, currPos, strokeStyle) {
    const { offsetX, offsetY } = currPos;
    const { offsetX: x, offsetY: y } = prevPos;

    this.ctx.beginPath();
    this.ctx.strokeStyle = strokeStyle;
    // Move the the prevPosition of the mouse
    this.ctx.moveTo(x, y);
    // Draw a line to the current position of the mouse
    this.ctx.lineTo(offsetX, offsetY);
    // Visualize the line using the strokeStyle
    this.ctx.stroke();
    this.prevPos = { offsetX, offsetY };
  }

  componentDidMount() {
    // Here we set up the properties of the canvas element. 
    this.canvas.width = 1000;
    this.canvas.height = 800;
    this.ctx = this.canvas.getContext('2d');
    this.ctx.lineJoin = 'round';
    this.ctx.lineCap = 'round';
    this.ctx.lineWidth = 5;
  }

  render() {
    return (
      <canvas
      // We use the ref attribute to get direct access to the canvas element. 
        ref={(ref) => (this.canvas = ref)}
        style={{ background: 'black' }}
        onPointerDown={this.onPointerDown}
        onPointerUp={this.endPaintEvent}
        onPointerMove={this.onPointerMove}
      />
    );
  }
}
export default Canvas;

我尝试通过以下代码禁用滚动和缩放：

index.css

html, body {
        overflow-x:hidden;
        overflow-y:hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

index.html

  <script>
        document.body.addEventListener("touchstart", function (e) {
                if (e.target == canvas) {
                        e.preventDefault();
                }
        }, false);
        document.body.addEventListener("touchend", function (e) {
        if (e.target == canvas) {
                        e.preventDefault();
                }
        }, false);
        document.body.addEventListener("touchmove", function (e) {
                if (e.target == canvas) {
                        e.preventDefault();
                }
        }, false);
  </script>

然后将onPointer事件更改为onTouch事件（只需将onPointer更改为onTouch

例如onPointerDown-> onTouchStart

但是当我在画布上绘画时什么也没发生，我不确定我是否正确实现了onTouch事件。

ReactJS onPointer事件在移动浏览器上无法正常运行

0 个答案: