我在移动和桌面模式下都在画布上绘图，但是当浏览器处于响应模式时，当它达到移动尺寸时它会绘制两次

Question

我还应该澄清，黑色文本是重复文本。第一个“测试”是在正常浏览器模式下响应之前。

首先我应该说我正在使用 React 和 JavaScript（不是 TypeScript）

绘图分别在移动和桌面模式下工作正常，只有当浏览器达到响应状态大小时才会导致它。此外，即使选择了颜色，它也仅以黑色绘制第二条线。

对于代码，我基本上使用来自 socket.io [源代码库]的白板https://github.com/socketio/socket.io/tree/master/examples/whiteboard)

我的改动如下：

`function onMouseDown(e) {
     drawing = true;
     let rect = canvasMobile.getBoundingClientRect();
     let rectTop = rect.top;
     current.x = e.clientX * (600/rect.right);
     current.y = (e.clientY - rectTop) * 1.6;
 }
 `

我做这个计算是为了在移动画布上创建绘图而不扭曲它，我对所有基本代码都这样做。画布原始大小为 600px x 600px，在我的 css 中，我将其在移动版本上更改为：

` width: 100vw;
  height: 375px;
`

所以这就是我进行计算的原因。它以像素为单位说明了不同的手机宽度。

接下来，我创建两组数据。一个用于移动设备，一个用于桌面，然后使用 socketio 发射器发射它们。顶部是用于桌面的。

 `    let drawingData = {
    x0: x0,
    y0: y0,
    x1: x1,
    y1: y1,
    color: color,
    brushSize: brushSize,
    lineCap: lineCap
  }

  let rect = canvasMobile.getBoundingClientRect();
  let w = rect.right;
  let h = rect.bottom;
  let drawingDataMobile = {
      x0: x0 / w,
      y0: y0 / h,
      x1: x1 / w,
      y1: y1 / h,
      color: color,
      brushSize: brushSize,
      lineCap: lineCap
  }

    socket.emit('drawing', drawingData, params);
    socket.emit('drawingMobile', drawingDataMobile, params);
 `

然后最后，我根据它们是移动设备还是桌面设备将它们重新发送回页面

 `     socket.on('drawing', (drawingData, room) => socket.to(room).emit('drawing', drawingData))
socket.on('drawingMobile', (drawingDataMobile, room) => socket.to(room).emit('drawingMobile', drawingDataMobile))

`

并在每个单独的组件上接收套接字： 对于手机：

`    socket.on('drawingMobile', onDrawingEvent);     `

和桌面

 `     socket.on('drawing', onDrawingEvent);`

这似乎来回工作得很好，当两个不同的客户端以任何模式连接时，除非我缩小网络浏览器并使其像图片中那样响应。

这里是一个示例，其中一个浏览器处于移动模式，另一个浏览器处于正常模式：