jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Design: 캔버스 anchor 사이즈 변경

Browse Source
This commit is contained in:
jhynsoo 2024-09-03 16:46:49 +09:00
parent a1336d84f4
commit 730435b36a
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/ImageCanvas/LabelRect.tsx
View File

@ -58,7 +58,7 @@ export default function LabelRect({
keepRatio={false} keepRatio={false}
ref={trRef} ref={trRef}
rotateEnabled={false} rotateEnabled={false}
anchorSize={4} anchorSize={8}
rotateAnchorCursor="pointer" rotateAnchorCursor="pointer"
rotateAnchorOffset={20} rotateAnchorOffset={20}
ignoreStroke={true} ignoreStroke={true}

13
frontend/src/components/ImageCanvas/PolygonTransformer.tsx
View File

@ -34,15 +34,14 @@ export default function PolygonTransformer({ coordinates, setCoordinates, stage
}; };
const handleMouseOver = (e: Konva.KonvaEventObject<MouseEvent>) => { const handleMouseOver = (e: Konva.KonvaEventObject<MouseEvent>) => {
const circle = e.target as Konva.Circle; const circle = e.target as Konva.Circle;
circle.strokeWidth(2);
circle.radius(4); circle.radius(7);
stage.batchDraw(); stage.batchDraw();
}; };
const handleMouseOut = (e: Konva.KonvaEventObject<MouseEvent>) => { const handleMouseOut = (e: Konva.KonvaEventObject<MouseEvent>) => {
const circle = e.target as Konva.Circle; const circle = e.target as Konva.Circle;
const stage = circle.getStage();
circle.strokeWidth(1); circle.radius(5);
circle.radius(2);
stage?.batchDraw(); stage?.batchDraw();
}; };
@ -77,6 +76,7 @@ export default function PolygonTransformer({ coordinates, setCoordinates, stage
strokeScaleEnabled={true} strokeScaleEnabled={true}
closed closed
zIndex={1} zIndex={1}
perfectDrawEnabled={false}
/> />
{coordinates.map((point, index) => { {coordinates.map((point, index) => {
return ( return (
@ -84,7 +84,7 @@ export default function PolygonTransformer({ coordinates, setCoordinates, stage
key={index} key={index}
x={point[0]} x={point[0]}
y={point[1]} y={point[1]}
radius={2} radius={5}
stroke="#00a1ff" stroke="#00a1ff"
strokeWidth={1} strokeWidth={1}
fill="white" fill="white"
@ -93,6 +93,7 @@ export default function PolygonTransformer({ coordinates, setCoordinates, stage
onMouseOver={handleMouseOver} onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut} onMouseOut={handleMouseOut}
scale={{ x: 1 / stage.getAbsoluteScale().x, y: 1 / stage.getAbsoluteScale().y }} scale={{ x: 1 / stage.getAbsoluteScale().x, y: 1 / stage.getAbsoluteScale().y }}
perfectDrawEnabled={false}
/> />
); );
})} })}