다각형 시도 중

src/components/Roof2.jsx

@@ -10,7 +10,6 @@ import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canv
 import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection2 } from '@/util/canvas-util'
-import { CustomLine } from '@/components/fabric/QLine'
 import { QPolygon } from '@/components/fabric/QPolygon'
 
 export default function Roof2() {
@@ -45,6 +44,7 @@ export default function Roof2() {
     handleOuterlinesTest2,
     applyTemplateB,
     makeRoofPatternPolygon,
+    drawRoofPolygon,
   } = useMode()
 
   // const [canvasState, setCanvasState] = useRecoilState(canvasAtom)
@@ -237,11 +237,32 @@ export default function Roof2() {
       { x: 350, y: 100 },
     ]
 
+    const complicatedType = [
+      { x: 100, y: 100 },
+      { x: 100, y: 1100 },
+      { x: 400, y: 1100 },
+      { x: 400, y: 800 },
+      { x: 700, y: 800 },
+      { x: 700, y: 1100 },
+      { x: 1000, y: 1100 },
+      { x: 1000, y: 600 },
+      { x: 700, y: 600 },
+      { x: 700, y: 300 },
+      { x: 1000, y: 300 },
+      { x: 1000, y: 100 },
+    ]
+
+    const diagonalType = [
+      { x: 100, y: 100 },
+      { x: 100, y: 600 },
+      { x: 600, y: 600 },
+      { x: 400, y: 100 }]
+
     if (canvas) {
-      const polygon = new QPolygon(type1A, {
+      const polygon = new QPolygon(diagonalType, {
         // const polygon = new QPolygon(eightPoint, {
         fill: 'transparent',
-        stroke: 'black',
+        stroke: 'green',
         strokeWidth: 1,
         selectable: true,
         fontSize: fontSize,
@@ -249,8 +270,9 @@ export default function Roof2() {
       })
 
       canvas?.add(polygon)
+      drawRoofPolygon(polygon)
 
-      handleOuterlinesTest2(polygon)
+      // handleOuterlinesTest2(polygon)
 
       // const lines = togglePolygonLine(polygon)
       // togglePolygonLine(lines[0])

src/hooks/useMode.js

@@ -1,9 +1,22 @@
 import { useEffect, useRef, useState } from 'react'
 import QRect from '@/components/fabric/QRect'
-import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
+import {
+  findTopTwoIndexesByDistance,
+  getCenterPoint,
+  getDirection,
+  getStartIndex,
+  rearrangeArray,
+} from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
 
-import { canvasSizeState, fontSizeState, roofPolygonPatternArrayState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
+import {
+  canvasSizeState,
+  fontSizeState,
+  roofPolygonPatternArrayState,
+  roofState,
+  sortedPolygonArray,
+  wallState,
+} from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -1156,6 +1169,11 @@ export function useMode() {
     roof.drawHelpLine()
   }
 
+  const drawRoofPolygon = (wall, offset = 71) => {
+    console.log(wall)
+    
+  }
+
   const togglePolygonLine = (obj) => {
     const rtnLines = []
     if (obj.type === 'QPolygon') {
@@ -2252,7 +2270,13 @@ export function useMode() {
           canvas.add(centerLine2)
           canvas.remove(outLines[idx]) //기존 라인 삭제
 
-          halfHoriCenterLinePoint.push({ index: idx, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
+          halfHoriCenterLinePoint.push({
+            index: idx,
+            x1: centerLine1.x1,
+            y1: centerLine1.y1,
+            x2: centerLine1.x2,
+            y2: centerLine1.y2,
+          }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
         }
       })
 
@@ -2453,7 +2477,13 @@ export function useMode() {
             canvas.add(centerLine2)
             canvas.remove(outline) //기존 라인 삭제
 
-            halfHoriCenterLinePoint.push({ index: index, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
+            halfHoriCenterLinePoint.push({
+              index: index,
+              x1: centerLine1.x1,
+              y1: centerLine1.y1,
+              x2: centerLine1.x2,
+              y2: centerLine1.y2,
+            }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
           }
         }
       })
@@ -3211,5 +3241,6 @@ export function useMode() {
     handleOuterlinesTest,
     handleOuterlinesTest2,
     makeRoofPatternPolygon,
+    drawRoofPolygon,
   }
 }