Получение пунктирной линии на html Canvas

Question

Я использую React для разработки приложения для рисования в реальном времени. Итак, идея состоит в том, чтобы хранить события мыши в массиве (чтобы пропустить его через сокет) и передать его функции рисования. Однако, когда я быстро двигаю мышь, я получаю пунктирную линию вместо гладкой линии. Если я рисую напрямую, используя события мыши вместо массива, я получаю плавную линию. Поэтому я предполагаю, что проблема заключается в том, чтобы помещать события мыши в массив.

Это мой вывод:

Ниже приведены мои Компонент PaintCanvas

function PaintCanvas(props) {

  let ctx;

  const canvasRef = useRef("");

  const [isDrawing, changeIsDrawing] = useState(false);

  let strokes = [];

  const mouseDownFunction = e => {

    changeIsDrawing(true);

    if (ctx) {
      wrapperForDraw(e);
    }
  };

  const mouseUpFunction = e => {

    if (ctx) {
      ctx.beginPath();
    }

    changeIsDrawing(false);

  };

  const mouseMoveFunction = e => {

    if (ctx) {
      wrapperForDraw(e);
    }

  };

  const wrapperForDraw = e => {
    if (!isDrawing) return;
    strokes.push({
      x: e.clientX,
      y: e.clientY
    });

    drawFunction(strokes);
  };

  const drawFunction = strokes => {
    let { top, left } = canvasRef.current.getBoundingClientRect();

    if (!isDrawing) return;

    ctx.lineWidth = 3;
    ctx.lineCap = "round";

    for (let i = 0; i < strokes.length; i++) {
      ctx.beginPath();
      //adding 32px to offset my custom mouse icon
      ctx.moveTo(strokes[i].x - left, strokes[i].y - top + 32);
      ctx.lineTo(strokes[i].x - left, strokes[i].y - top + 32);
      ctx.closePath();
      ctx.stroke();
    }
  };



  useEffect(() => {
    let canvas = canvasRef.current;

    ctx = canvas.getContext("2d");

  });

  return (
    <div>
      <canvas
        ref={canvasRef}
        width="500px"
        height="500px"
        onMouseDown={mouseDownFunction}
        onMouseUp={mouseUpFunction}
        onMouseMove={mouseMoveFunction}
        className={styles.canvasClass}
      />
    </div>
  );
}

export default PaintCanvas;

Как получить плавную линию, используя реализацию массива.

Answer 1

В вашем l oop, где вы рисуете линии, вам не нужно вызывать moveTo для каждой итерации. Каждый вызов lineTo () автоматически добавляет к текущему подпутьу, что означает, что все строки будут обведены или заполнены вместе.

Вам нужно вытащить beginPath из l oop, удалить переместить, чтобы позвонить и взять ход за l oop для эффективности.

 ctx.beginPath();
 for (let i = 0; i < strokes.length; i++) {

      //adding 32px to offset my custom mouse icon
      //ctx.moveTo(strokes[i].x - left, strokes[i].y - top + 32); // Remove this line
      ctx.lineTo(strokes[i].x - left, strokes[i].y - top + 32);

    }
  // Its also more efficient to call these once for the whole line
  ctx.stroke();