qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

캔버스 축소 확대 시 line 짧아지는 현상 수정

Browse Source
This commit is contained in:
hyojun.choi 2024-09-04 14:34:33 +09:00
parent 0fa10237da
commit 2d510bbe02
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Roof2.jsx
View File

@ -710,10 +710,11 @@ export default function Roof2(props) {
<Button className="m-1 p-2" onClick={handleClear}> <Button className="m-1 p-2" onClick={handleClear}>
clear clear
</Button> </Button>
{/*<Button className="m-1 p-2" onClick={zoomIn}> {
확대 <Button className="m-1 p-2" onClick={zoomIn}>
</Button> 확대
*/} </Button>
}
<Button className="m-1 p-2" onClick={zoomOut}> <Button className="m-1 p-2" onClick={zoomOut}>
축소 축소
</Button> </Button>

13
src/hooks/useMode.js
View File

@ -81,8 +81,9 @@ export function useMode() {
// } // }
if (!canvas) return if (!canvas) return
setCanvas(canvas) setCanvas(canvas)
canvas?.off('mouse:move')
canvas?.on('mouse:move', drawMouseLines) canvas?.on('mouse:move', drawMouseLines)
}, [canvas]) // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 함 }, [canvas, zoom]) // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 함
useEffect(() => { useEffect(() => {
if (canvas?.getObjects().find((obj) => obj.name === 'connectLine')) { if (canvas?.getObjects().find((obj) => obj.name === 'connectLine')) {
@ -278,7 +279,7 @@ export function useMode() {
} }
// 가로선을 그립니다. // 가로선을 그립니다.
const horizontalLine = new fabric.Line([0, newY, canvasSize.horizontal, newY], { const horizontalLine = new fabric.Line([0, newY, 2 * canvas.width, newY], {
stroke: 'red', stroke: 'red',
strokeWidth: 1, strokeWidth: 1,
selectable: false, selectable: false,
@ -286,7 +287,7 @@ export function useMode() {
}) })
// 세로선을 그립니다. // 세로선을 그립니다.
const verticalLine = new fabric.Line([newX, 0, newX, canvasSize.vertical], { const verticalLine = new fabric.Line([newX, 0, newX, 2 * canvas.height], {
stroke: 'red', stroke: 'red',
strokeWidth: 1, strokeWidth: 1,
selectable: false, selectable: false,
@ -1138,11 +1139,17 @@ export function useMode() {
} }
const zoomIn = () => { const zoomIn = () => {
if (canvas.getZoom() + 0.1 > 1.6) {
return
}
canvas?.setZoom(canvas.getZoom() + 0.1) canvas?.setZoom(canvas.getZoom() + 0.1)
setZoom(Math.round(zoom + 10)) setZoom(Math.round(zoom + 10))
} }
const zoomOut = () => { const zoomOut = () => {
if (canvas.getZoom() - 0.1 < 0.5) {
return
}
canvas?.setZoom(canvas.getZoom() - 0.1) canvas?.setZoom(canvas.getZoom() - 0.1)
setZoom(Math.ceil(zoom - 10)) setZoom(Math.ceil(zoom - 10))
} }