polygon Qline추가 및 currentPoints 수정

src/components/Roof2.jsx

@@ -45,6 +45,7 @@ export default function Roof2() {
     zoomIn,
     zoomOut,
     zoom,
+    togglePolygonLine,
   } = useMode()
 
   useEffect(() => {
@@ -147,16 +148,18 @@ export default function Roof2() {
           strokeWidth: 1,
           selectable: true,
           fontSize: fontSize,
+          name: 'QPolygon1',
         },
         canvas, // 필수로 넣어줘야 함
       )
 
       canvas?.add(polygon)
 
-      polygon.drawOuterLine(-50)
+      polygon.drawRoof(-50)
       addBackgroundInPolygon(polygon)
 
-      console.log(polygon.outerPolygon)
+      const lines = togglePolygonLine(polygon)
+      togglePolygonLine(lines[0])
     }
   }
 
@@ -192,11 +195,19 @@ export default function Roof2() {
       })
 
       polygon.fillBackground(pattern)
-
-      console.log(polygon)
     })
   }
 
+  function PolygonToLine() {
+    const polygon = canvas?.getActiveObject()
+
+    if (polygon.type !== 'QPolygon') {
+      return
+    }
+
+    const lines = togglePolygonLine(polygon)
+  }
+
   return (
     <>
       {canvas && (
@@ -297,6 +308,9 @@ export default function Roof2() {
             <Button className="m-1 p-2" onClick={makeQLine}>
               QLine
             </Button>
+            <Button className="m-1 p-2" onClick={PolygonToLine}>
+              PolygonToLine
+            </Button>
           </div>
           <div className="flex justify-center flex-col items-center">
             <div className="m-2 p-2 w-80">

src/components/fabric/QLine.js

@@ -11,6 +11,7 @@ export class QLine extends fabric.Group {
   y2
   direction
   type = 'QLine'
+  parent
 
   constructor(points, option) {
     const [x1, y1, x2, y2] = points
@@ -28,6 +29,8 @@ export class QLine extends fabric.Group {
     this.line = line
     this.fontSize = option.fontSize
     this.direction = option.direction
+    this.parent = option.parent
+
     this.#init()
     this.#addControl()
   }

src/components/fabric/QPolygon.js

@@ -1,15 +1,22 @@
 import { fabric } from 'fabric'
-import { distanceBetweenPoints } from '@/util/canvas-util'
+import {
+  distanceBetweenPoints,
+  getDirection,
+  getDirectionByPoint,
+} from '@/util/canvas-util'
+import { QLine } from '@/components/fabric/QLine'
 
 export default class QPolygon extends fabric.Group {
   type = 'QPolygon'
   polygon
   points
   texts = []
+  lines = []
   canvas
   fontSize
   qCells = []
   outerPolygon
+  name
   constructor(points, options, canvas) {
     if (!options.fontSize) {
       throw new Error('Font size is required.')
@@ -19,15 +26,31 @@ export default class QPolygon extends fabric.Group {
     }
 
     const polygon = new fabric.Polygon(points, options)
+
     super([polygon], {})
 
     this.fontSize = options.fontSize
     this.points = points
     this.polygon = polygon
-    // this.canvas = canvas
+    this.name = options.name
 
     this.#init()
     this.#addEvent()
+    this.#initLines()
+  }
+
+  #initLines() {
+    this.points.forEach((point, i) => {
+      const nextPoint = this.points[(i + 1) % this.points.length]
+      const line = new QLine([point.x, point.y, nextPoint.x, nextPoint.y], {
+        stroke: 'black',
+        strokeWidth: 1,
+        fontSize: this.fontSize,
+        direction: getDirectionByPoint(point, nextPoint),
+      })
+
+      this.lines.push(line)
+    })
   }
 
   #init() {
@@ -241,19 +264,28 @@ export default class QPolygon extends fabric.Group {
     const scaleX = this.scaleX
     const scaleY = this.scaleY
 
+    const left = this.left
+    const top = this.top
+
+    // 시작점
+    const point = this.points[0]
+
+    const movingX = left - point.x * scaleX
+    const movingY = top - point.y * scaleY
+
     return this.points.map((point) => {
       return {
-        x: point.x * scaleX,
-        y: point.y * scaleY,
+        x: point.x * scaleX + movingX,
+        y: point.y * scaleY + movingY,
       }
     })
   }
 
   /**
-   * 외곽선 그리기
+   * 지붕 그리기
    * @param offset
    */
-  drawOuterLine(offset = -10) {
+  drawRoof(offset = -10) {
     const points = this.getCurrentPoints()
     const offsetPoints = []
     for (let i = 0; i < points.length; i++) {

src/hooks/useMode.js

@@ -5,6 +5,7 @@ import {
   getStartIndex,
   rearrangeArray,
   findTopTwoIndexesByDistance,
+  getDirection,
 } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
 import { fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
@@ -313,33 +314,11 @@ export function useMode() {
     })
   }
 
-  /**
-   * 두 점 사이의 방향을 반환합니다.
-   */
-  const getDirection = (a, b) => {
-    const vector = {
-      x: b.left - a.left,
-      y: b.top - a.top,
-    }
-
-    if (Math.abs(vector.x) > Math.abs(vector.y)) {
-      // x축 방향으로 더 많이 이동
-      return vector.x > 0 ? 'right' : 'left'
-    } else {
-      // y축 방향으로 더 많이 이동
-      return vector.y > 0 ? 'bottom' : 'top'
-    }
-  }
-
   /**
    * 두 점을 연결하는 선과 길이를 그립니다.
    * a : 시작점, b : 끝점
    */
   const drawLineWithLength = (a, b) => {
-    const vector = {
-      x: b.left - a.left,
-      y: b.top - a.top,
-    }
     const line = new QLine([a.left, a.top, b.left, b.top], {
       stroke: 'black',
       strokeWidth: 2,
@@ -800,7 +779,7 @@ export function useMode() {
 
       offsetPoints.push(offsetPoint)
     }
-    
+
     makePolygon(offsetPoints)
   }
 

src/util/canvas-util.js

@@ -225,3 +225,42 @@ export const getRoofHypotenuse = (base) => {
 export const getDegreeByChon = (chon) => {
   return chon * 5.45
 }
+
+/**
+ * 두 점 사이의 방향을 반환합니다.
+ * @param a {fabric.Object}
+ * @param b {fabric.Object}
+ * @returns {string}
+ */
+export const getDirection = (a, b) => {
+  const vector = {
+    x: b.left - a.left,
+    y: b.top - a.top,
+  }
+
+  if (Math.abs(vector.x) > Math.abs(vector.y)) {
+    // x축 방향으로 더 많이 이동
+    return vector.x > 0 ? 'right' : 'left'
+  } else {
+    // y축 방향으로 더 많이 이동
+    return vector.y > 0 ? 'bottom' : 'top'
+  }
+}
+
+/**
+ * 두 점 사이의 방향을 반환합니다.
+ */
+export const getDirectionByPoint = (a, b) => {
+  const vector = {
+    x: b.x - a.x,
+    y: b.y - a.y,
+  }
+
+  if (Math.abs(vector.x) > Math.abs(vector.y)) {
+    // x축 방향으로 더 많이 이동
+    return vector.x > 0 ? 'right' : 'left'
+  } else {
+    // y축 방향으로 더 많이 이동
+    return vector.y > 0 ? 'bottom' : 'top'
+  }
+}