feat: ellipse rendering issue fix demo

dendrofen · Jan 10, 2025 · 6b4fefb · 6b4fefb
1 parent 15cd8a5
commit 6b4fefb
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/components/Canvas.js b/src/components/Canvas.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Group, Image, Layer, Line, Rect, Stage, Text } from "react-konva";
+import { Arc, Ellipse, Group, Image, Layer, Line, Rect, Stage, Text } from "react-konva";
 
 const CustomImage = ({ src, ...props }) => {
     const [image, setImage] = useState();
@@ -61,6 +61,18 @@ export default function Canvas() {
                     draggable
                 />
 
+                <Ellipse fill="red" radiusX={10} radiusY={10} x={width / 2} y={height / 2} />
+
+                <Text
+                    x={width / 3}
+                    y={height / 1.8}
+                    text="Use Arc, instead of Ellipse. Red - Ellipse, Green - Arcs. (see example)"
+
+                    width={width / 2}
+                />
+                <Arc outerRadius={10} angle={360} x={width / 3} y={height / 2} fill={'green'} strokeEnabled={false} />
+                <Arc outerRadius={10} angle={360} x={width / 1.5} y={height / 2} fill={'green'} strokeEnabled={false} />
+
                 {lines.map((points, key) =>
                     <Line
                         key={key}