我正在尝试使用 HTML Canvas 元素在 React 中构建一个绘图应用程序。
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
///*[EN ROUGH]*/import rough from 'roughjs';
///*[EN ROUGH]*/const generator = rough.generator();
const createElement = (x1, y1, x2, y2, type) => {
return { x1, y1, x2, y2, type };
};
const drawElement = (context, element) => {
if (element.type === "connect") {
context.moveTo(element.x1, element.y1);
context.lineTo(element.x2, element.y2);
context.stroke();
///*[EN ROUGH]*/const line = generator.line(element.x1, element.y1, element.x2, element.y2);
///*[EN ROUGH]*/context.draw(line);
}
};
function App() {
const [elements, setElements] = useState([]);
const [drawing, setDrawing] = useState(false);
useLayoutEffect(() => {
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
///*[EN ROUGH]*/const context = rough.canvas(canvas);
//redraw all the components on re-render
elements.forEach((element) => {
drawElement(context, element);
});
});
const handleMouseDown = (event) => {
setDrawing(true);
const { clientX, clientY } = event;
const element = createElement(
clientX,
clientY,
clientX,
clientY,
"connect"
);
setElements((prevState) => [...prevState, element]);
};
const handleMouseMove = (event) => {
if (!drawing) return;
const { clientX, clientY } = event;
//index of the last element that was selected
const lastElemIndex = elements.length - 1;
const { x1, y1 } = elements[lastElemIndex];
const updatedElement = createElement(x1, y1, clientX, clientY, "connect");
//overwrite the previous element with the new x2, y2 coordinates of mouse move
const elementsCopy = [...elements];
elementsCopy[lastElemIndex] = updatedElement;
setElements(elementsCopy);
};
const handleMouseUp = () => {
setDrawing(false);
};
return (
<canvas
id="canvas"
width={window.innerWidth}
height={window.innerHeight}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
>
Canvas
</canvas>
);
};
export default App;
当我运行此代码时,当我单击并拖动鼠标时,它会产生以下输出:
当我启用 RoughJS 来绘制而不是普通画布时,线条工作正常。可以通过删除注释来启用 RoughJS 代码
EN ROUGH
。我完全迷失了为什么会发生这种事。
尝试
context.beginPath()
开始一条新路径,当您使用 Rough 时,它可能正在做的事情:
if (element.type === "connect") {
context.beginPath(); // <-- Added
完整示例:
const { useEffect, useLayoutEffect, useRef, useState } = React;
///*[EN ROUGH]*/import rough from 'roughjs';
///*[EN ROUGH]*/const generator = rough.generator();
const createElement = (x1, y1, x2, y2, type) => {
return { x1, y1, x2, y2, type };
};
const drawElement = (context, element) => {
if (element.type === "connect") {
context.beginPath(); // <-- Added
context.moveTo(element.x1, element.y1);
context.lineTo(element.x2, element.y2);
context.stroke();
///*[EN ROUGH]*/const line = generator.line(element.x1, element.y1, element.x2, element.y2);
///*[EN ROUGH]*/context.draw(line);
}
};
function App() {
const [elements, setElements] = useState([]);
const [drawing, setDrawing] = useState(false);
useLayoutEffect(() => {
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
///*[EN ROUGH]*/const context = rough.canvas(canvas);
//redraw all the components on re-render
elements.forEach((element) => {
drawElement(context, element);
});
});
const handleMouseDown = (event) => {
setDrawing(true);
const { clientX, clientY } = event;
const element = createElement(
clientX,
clientY,
clientX,
clientY,
"connect"
);
setElements((prevState) => [...prevState, element]);
};
const handleMouseMove = (event) => {
if (!drawing) return;
const { clientX, clientY } = event;
//index of the last element that was selected
const lastElemIndex = elements.length - 1;
const { x1, y1 } = elements[lastElemIndex];
const updatedElement = createElement(x1, y1, clientX, clientY, "connect");
//overwrite the previous element with the new x2, y2 coordinates of mouse move
const elementsCopy = [...elements];
elementsCopy[lastElemIndex] = updatedElement;
setElements(elementsCopy);
};
const handleMouseUp = () => {
setDrawing(false);
};
return (
<canvas
id="canvas"
width={window.innerWidth}
height={window.innerHeight}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
>
Canvas
</canvas>
);
};
ReactDOM.createRoot(document.querySelector("#app")).render(<App />);
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>