I am trying to create an application to practice drawing Kanji. I am using svg to draw the lines. I can draw one polyline but it is all connected. I need to draw multiple separate lines. I am using a 2d array of points for each line. When I create the array of lines it does not render anything. It does not render any lines or basic shapes I even tried
tags just to see if what rendering and nothing.
I have tried rendering in box svg directly and in separate function. Separate function is shown here. I am not sure why the single line renders but I cannot get the 2d array to render anything. The data does seem to be transferring properly (ie. I am getting x and y points from array).
code:
import { useState, useEffect } from "react";
export default DrawKanji = ({ advance, randomSet }) => {
const [stroke, setStroke] = useState([]);
const [kanji, setKanji] = useState([]);
const [draw, setDraw] = useState(false);
useEffect(() => {
console.log("run");
}, [kanji, stroke]);
const clearPractice = () => {
setKanji([]);
};
const handleMouseDown = (event) => {
const { clientX, clientY } = event;
//let offset = document.getElementById("svg").getBoundingClientRect();
setDraw(true);
/*
setPoints([
...points,
{ x: clientX - offset.left, y: clientY - offset.top },
]);*/
};
const handleMouseMove = (event) => {
const { clientX, clientY } = event;
let offset = document.getElementById("svg").getBoundingClientRect();
if (draw) {
setStroke([
...stroke,
{ x: clientX - offset.left, y: clientY - offset.top },
]);
}
};
const handleMouseUp = () => {
//setPoints([]);
let newKanji = kanji;
newKanji.push(stroke);
setKanji(newKanji);
setStroke([]);
console.log(`kanji: ${JSON.stringify(kanji)}`);
setDraw(false);
};
const drawLine = (
<>
{kanji.forEach((line) => {
<polyline
point={line.map((point) => `${point.x},${point.y}`).join(" ")}
/>;
})}
</>
);
return (
<>
<p>{`${JSON.stringify(stroke[1])}`}</p>
<button onClick={advance} name="previous" disabled={randomSet}>
Previous
</button>
<svg
id="svg"
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
width="109px"
hanging="100px"
style={{ border: "1px solid black" }}
>
{drawLine}
</svg>
<button onClick={advance} name="next">
Next
</button>
<p>
<button onClick={clearPractice}>Clear</button>
</p>
</>
);
};
Thanks in advance for any help or advice you can give.