변수명 수정

src/components/Roof2.jsx

@@ -34,7 +34,7 @@ export default function Roof2() {
         stroke: 'black',
         width: 400,
         height: 100,
-        isLengthText: true, // 이 속성이 true로 설정되면, 사각형의 각 선분의 길이를 표시하는 텍스트가 생성됩니다.
+        viewLengthText: true, // 이 속성이 true로 설정되면, 사각형의 각 선분의 길이를 표시하는 텍스트가 생성됩니다.
         selectable: false,
       })
 
@@ -49,7 +49,7 @@ export default function Roof2() {
       const line = new QLine([50, 50, 200, 200], {
         stroke: 'black',
         strokeWidth: 2,
-        isLengthText: true, // 이 속성이 true로 설정되면, 선분의 길이를 표시하는 텍스트가 생성됩니다.
+        viewLengthText: true, // 이 속성이 true로 설정되면, 선분의 길이를 표시하는 텍스트가 생성됩니다.
         selectable: false,
       })
 
@@ -72,12 +72,13 @@ export default function Roof2() {
           fill: 'transparent',
           stroke: 'black',
           strokeWidth: 2,
-          isLengthText: true, // 이 속성이 true로 설정되면, 다각형의 각 변의 길이를 표시하는 텍스트가 생성됩니다.
+          viewLengthText: true, // 이 속성이 true로 설정되면, 다각형의 각 변의 길이를 표시하는 텍스트가 생성됩니다.
           selectable: false,
         },
       )
 
       canvas?.add(polygon)
+      console.log(polygon.polygon)
 
       setTimeout(() => polygon.delete(), 500)
     }
@@ -135,12 +136,6 @@ export default function Roof2() {
           >
             clear
           </button>
-          <button
-            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-            onClick={() => fillCellInPolygon()}
-          >
-            fillCellInPolygon
-          </button>
           <button
             className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
             onClick={zoomIn}

src/components/fabric/QLine.js

@@ -7,7 +7,7 @@ export default class QLine extends fabric.Line {
     super(points, option)
 
     this.on('added', () => {
-      if (this.isLengthText) {
+      if (this.viewLengthText) {
         this.#addLengthText()
       } else {
         this.#makeGroupItem([this])

src/components/fabric/QPolygon.js

@@ -1,12 +1,14 @@
 import { fabric } from 'fabric'
+import QRect from '@/components/fabric/QRect'
 export default class QPolygon extends fabric.Polygon {
   group
+  polygon
 
   constructor(points, option) {
     super(points, option)
-
+    this.polygon = this
     this.on('added', () => {
-      if (this.isLengthText) {
+      if (this.viewLengthText) {
         this.#addLengthText()
       } else {
         this.#makeGroupItem([this])
@@ -54,4 +56,51 @@ export default class QPolygon extends fabric.Polygon {
 
     this.#makeGroupItem(groupItems)
   }
+
+  fillCell(cell = { width: 50, height: 100 }) {
+    // QPolygon의 경계를 구합니다.
+    const bounds = this.group.getBoundingRect()
+
+    // 경계 내에서 cell의 크기에 맞게 반복합니다.
+    for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width) {
+      for (
+        let y = bounds.top;
+        y < bounds.top + bounds.height;
+        y += cell.height
+      ) {
+        // 각 위치에 cell을 생성합니다.
+        const rect = new QRect({
+          left: x,
+          top: y,
+          viewLengthText: true,
+          width: cell.width,
+          height: cell.height,
+          fill: 'transparent',
+          stroke: 'black',
+          selectable: false,
+        })
+
+        // 사각형의 각 꼭지점을 생성합니다.
+        const rectPoints = [
+          new fabric.Point(rect.left, rect.top),
+          new fabric.Point(rect.left + rect.width, rect.top),
+          new fabric.Point(rect.left, rect.top + rect.height),
+          new fabric.Point(rect.left + rect.width, rect.top + rect.height),
+        ]
+
+        // 모든 꼭지점이 사다리꼴 내부에 있는지 확인합니다.
+        const isInside = rectPoints.every((rectPoint) =>
+          this.group.containsPoint(rectPoint),
+        )
+
+        // 모든 꼭지점이 사다리꼴 내부에 있을 경우에만 사각형을 그립니다.
+        if (isInside) {
+          this.group.canvas.add(rect)
+        }
+      }
+    }
+
+    // 캔버스를 다시 그립니다.
+    this.group.canvas.renderAll()
+  }
 }

src/components/fabric/QRect.js

@@ -5,7 +5,7 @@ export default class QRect extends fabric.Rect {
     super(options)
 
     this.on('added', () => {
-      if (this.isLengthText) {
+      if (this.viewLengthText) {
         this.#addLengthText()
       } else {
         this.#makeGroupItem([this])
@@ -36,14 +36,6 @@ export default class QRect extends fabric.Rect {
         start: { x: this.left, y: this.top },
         end: { x: this.left + this.width, y: this.top },
       },
-      {
-        start: { x: this.left + this.width, y: this.top },
-        end: { x: this.left + this.width, y: this.top + this.height },
-      },
-      {
-        start: { x: this.left + this.width, y: this.top + this.height },
-        end: { x: this.left, y: this.top + this.height },
-      },
       {
         start: { x: this.left, y: this.top + this.height },
         end: { x: this.left, y: this.top },

src/hooks/useMode.js

@@ -143,7 +143,7 @@ export function useMode() {
               stroke: 'black',
               strokeWidth: 2,
               selectable: false,
-              isLengthText: true,
+              viewLengthText: true,
               direction: getDirection(points.current[0], points.current[1]),
             },
           )
@@ -224,7 +224,7 @@ export function useMode() {
         {
           stroke: 'black',
           strokeWidth: 2,
-          isLengthText: true,
+          viewLengthText: true,
           selectable: false,
         },
       )
@@ -280,7 +280,7 @@ export function useMode() {
         width: pointer.x - origX,
         height: pointer.y - origY,
         angle: 0,
-        isLengthText: true,
+        viewLengthText: true,
         fill: 'transparent',
         stroke: 'black',
         transparentCorners: false,
@@ -322,7 +322,7 @@ export function useMode() {
       stroke: 'black',
       strokeWidth: 2,
       selectable: false,
-      isLengthText: true,
+      viewLengthText: true,
       direction: getDirection(a, b),
     })
     historyLines.current.push(line)
@@ -348,12 +348,14 @@ export function useMode() {
     const polygon = new QPolygon(points, {
       stroke: 'black',
       fill: 'transparent',
-      isLengthText: true,
+      viewLengthText: true,
       selectable: false,
     })
 
     // 새로운 다각형 객체를 캔버스에 추가합니다.
     canvas.add(polygon)
+
+    polygon.fillCell()
   }
 
   /**
@@ -366,77 +368,8 @@ export function useMode() {
     historyLines.current = []
   }
 
-  const fillCellInPolygon = (
-    polygon = null,
-    cell = { width: 50, height: 100 },
-    padding = 20,
-  ) => {
-    if (!polygon) {
-      polygon = canvas?.getObjects().find((obj) => obj.type === 'polygon')
-      if (!polygon) {
-        alert('다각형을 먼저 그려주세요')
-        return
-      }
-    }
-    const polygonWidth = polygon.width - 2 * padding
-    const polygonHeight = polygon.height - 2 * padding
-
-    const numRectanglesWidth = Math.floor(polygonWidth / (cell.width + padding))
-    const numRectanglesHeight = Math.floor(
-      polygonHeight / (cell.height + padding),
-    )
-
-    const points = polygon.get('points') // 다각형의 각 꼭지점을 가져옵니다.
-    const lines = []
-
-    for (let i = 0; i < points.length; i++) {
-      const start = points[i]
-      const end = points[(i + 1) % points.length] // 다각형이 닫히도록 마지막 점과 첫번째 점을 연결합니다.
-
-      const line = new fabric.Line([start.x, start.y, end.x, end.y], {
-        stroke: 'black',
-        selectable: false,
-      })
-
-      lines.push(line)
-    }
-
-    for (let i = 0; i < numRectanglesWidth; i++) {
-      for (let j = 0; j < numRectanglesHeight; j++) {
-        const rect = new fabric.Rect({
-          left: i * (cell.width + padding) + polygon.left + padding,
-          top: j * (cell.height + padding) + polygon.top + padding,
-          width: cell.width,
-          height: cell.height,
-          fill: 'transparent',
-          stroke: 'red',
-        })
-
-        // 사각형의 각 꼭지점을 생성합니다.
-        const rectPoints = [
-          new fabric.Point(rect.left, rect.top),
-          new fabric.Point(rect.left + rect.width, rect.top),
-          new fabric.Point(rect.left, rect.top + rect.height),
-          new fabric.Point(rect.left + rect.width, rect.top + rect.height),
-        ]
-
-        // 모든 꼭지점이 다각형 내부에 있는지 확인합니다.
-        const isInside = rectPoints.every((rectPoint) =>
-          polygon.containsPoint(rectPoint),
-        )
-
-        // 모든 꼭지점이 다각형 내부에 있을 경우에만 사각형을 그립니다.
-        if (isInside) {
-          canvas.add(rect)
-        }
-      }
-    }
-    canvas.renderAll()
-  }
-
   const zoomIn = () => {
     canvas?.setZoom(canvas.getZoom() + 0.1)
-
     setZoom(Math.round(zoom + 10))
   }
 
@@ -450,7 +383,6 @@ export function useMode() {
     changeMode,
     setCanvas,
     handleClear,
-    fillCellInPolygon,
     zoomIn,
     zoomOut,
     zoom,