작업중

src/components/Roof2.jsx

@@ -1,11 +1,22 @@
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEffect } from 'react'
 import { Mode, useMode } from '@/hooks/useMode'
+import QRect from '@/components/fabric/QRect'
+import QLine from '@/components/fabric/QLine'
+import QPolygon from '@/components/fabric/QPolygon'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo } = useCanvas('canvas')
 
-  const { mode, changeMode, setCanvas, handleClear } = useMode()
+  const {
+    mode,
+    changeMode,
+    handleClear,
+    fillCellInPolygon,
+    zoomIn,
+    zoomOut,
+    zoom,
+  } = useMode()
 
   useEffect(() => {
     if (!canvas) {
@@ -14,6 +25,62 @@ export default function Roof2() {
     changeMode(canvas, mode)
   }, [canvas, mode])
 
+  const makeRect = () => {
+    if (canvas) {
+      const rect = new QRect({
+        left: 100,
+        top: 100,
+        fill: 'transparent',
+        stroke: 'black',
+        width: 400,
+        height: 100,
+        isLengthText: true, // 이 속성이 true로 설정되면, 사각형의 각 선분의 길이를 표시하는 텍스트가 생성됩니다.
+        selectable: false,
+      })
+
+      canvas?.add(rect)
+    }
+  }
+
+  const makeLine = () => {
+    if (canvas) {
+      const line = new QLine([50, 50, 200, 200], {
+        stroke: 'black',
+        strokeWidth: 2,
+        isLengthText: true, // 이 속성이 true로 설정되면, 선분의 길이를 표시하는 텍스트가 생성됩니다.
+        selectable: false,
+      })
+
+      canvas?.add(line)
+    }
+  }
+
+  const makePolygon = () => {
+    if (canvas) {
+      const polygon = new QPolygon(
+        [
+          { x: 100, y: 100 },
+          { x: 200, y: 200 },
+          { x: 200, y: 300 },
+          { x: 100, y: 300 },
+        ],
+        {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          isLengthText: true, // 이 속성이 true로 설정되면, 다각형의 각 변의 길이를 표시하는 텍스트가 생성됩니다.
+          selectable: false,
+        },
+      )
+
+      canvas?.add(polygon)
+
+      setTimeout(() => {
+        console.log(canvas?.getObjects())
+      }, 1000)
+    }
+  }
+
   return (
     <>
       {canvas && (
@@ -66,6 +133,43 @@ 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}
+          >
+            확대
+          </button>
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={zoomOut}
+          >
+            축소
+          </button>
+          현재 줌 : {zoom}%
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={makeRect}
+          >
+            사각형만들기
+          </button>
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={makeLine}
+          >
+            선 추가
+          </button>
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={makePolygon}
+          >
+            다각형 추가
+          </button>
         </div>
       )}
 

src/components/fabric/QLine.js

@@ -0,0 +1,36 @@
+export default class QLine extends fabric.Line {
+  length
+  constructor(points, option) {
+    super(points, option)
+
+    this.on('added', () => {
+      if (this.isLengthText) {
+        this.addLengthText()
+      }
+    })
+  }
+
+  addLengthText() {
+    const dx = this.x2 - this.x1
+    const dy = this.y2 - this.y1
+    const length = Math.sqrt(dx * dx + dy * dy)
+
+    this.length = length.toFixed(0)
+
+    const text = new fabric.Text(this.length, {
+      left: (this.x1 + this.x2) / 2,
+      top: (this.y1 + this.y2) / 2,
+      fontSize: 16,
+      selectable: false,
+    })
+
+    const group = new fabric.Group([this, text], {
+      selectable: false,
+      type: 'QLine',
+    })
+
+    this.canvas.add(group)
+    this.canvas.renderAll()
+    this.canvas.remove(this)
+  }
+}

src/components/fabric/QPolygon.js

@@ -0,0 +1,42 @@
+export default class QPolygon extends fabric.Polygon {
+  constructor(points, option) {
+    super(points, option)
+
+    this.on('added', () => {
+      if (this.isLengthText) {
+        this.addLengthText()
+      }
+    })
+  }
+
+  addLengthText() {
+    const groupItems = [this]
+
+    for (let i = 0; i < this.points.length; i++) {
+      const start = this.points[i]
+      const end = this.points[(i + 1) % this.points.length]
+
+      const dx = end.x - start.x
+      const dy = end.y - start.y
+      const length = Math.sqrt(dx * dx + dy * dy)
+
+      const text = new fabric.Text(length.toFixed(0), {
+        left: (start.x + end.x) / 2,
+        top: (start.y + end.y) / 2,
+        fontSize: 16,
+        selectable: false,
+      })
+
+      groupItems.push(text)
+    }
+
+    const group = new fabric.Group(groupItems, {
+      selectable: false,
+      type: 'QPolygon',
+    })
+
+    this.canvas.add(group)
+    this.canvas.renderAll()
+    this.canvas.remove(this)
+  }
+}

src/components/fabric/QRect.js

@@ -0,0 +1,58 @@
+export default class QRect extends fabric.Rect {
+  constructor(options) {
+    super(options)
+
+    this.on('added', () => {
+      if (this.isLengthText) {
+        this.addLengthText()
+      }
+    })
+  }
+
+  addLengthText() {
+    const lines = [
+      {
+        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 },
+      },
+    ]
+
+    const groupItems = [this]
+
+    lines.forEach((line) => {
+      const dx = line.end.x - line.start.x
+      const dy = line.end.y - line.start.y
+      const length = Math.sqrt(dx * dx + dy * dy)
+
+      const text = new fabric.Text(length.toFixed(0), {
+        left: (line.start.x + line.end.x) / 2,
+        top: (line.start.y + line.end.y) / 2,
+        fontSize: 16,
+        selectable: false,
+      })
+
+      groupItems.push(text)
+    })
+
+    const group = new fabric.Group(groupItems, {
+      selectable: false,
+      type: 'QRect',
+    })
+
+    this.canvas.add(group)
+    this.canvas.renderAll()
+    this.canvas.remove(this)
+  }
+}

src/hooks/useMode.js

@@ -1,4 +1,7 @@
 import { useRef, useState } from 'react'
+import QLine from '@/components/fabric/QLine'
+import QRect from '@/components/fabric/QRect'
+import QPolygon from '@/components/fabric/QPolygon'
 
 export const Mode = {
   DRAW_LINE: 'drawLine', // 기준선 긋기모드
@@ -14,6 +17,7 @@ export function useMode() {
   const historyPoints = useRef([])
   const historyLines = useRef([])
   const [canvas, setCanvas] = useState(null)
+  const [zoom, setZoom] = useState(100)
 
   const addEvent = (mode) => {
     switch (mode) {
@@ -44,6 +48,38 @@ export function useMode() {
   }
 
   const editMode = () => {
+    let distanceText = null // 거리를 표시하는 텍스트 객체를 저장할 변수
+    canvas?.on('mouse:move', function (options) {
+      const pointer = canvas?.getPointer(options.e)
+
+      if (historyLines.current.length === 0) return
+      const direction = getDirection(historyLines.current[0], pointer)
+
+      // 각 선과 마우스 위치 사이의 거리를 계산합니다.
+      const dx = historyLines.current[0].x1 - pointer.x
+      const dy = 0
+
+      const minDistance = Math.sqrt(dx * dx + dy * dy)
+
+      // 거리를 표시하는 텍스트 객체를 생성하거나 업데이트합니다.
+      if (distanceText) {
+        distanceText.set({
+          left: pointer.x,
+          top: pointer.y,
+          text: `${minDistance.toFixed(2)}`,
+        })
+      } else {
+        distanceText = new fabric.Text(`${minDistance.toFixed(2)}`, {
+          left: pointer.x,
+          top: pointer.y,
+          fontSize: 16,
+        })
+        canvas?.add(distanceText)
+      }
+
+      // 캔버스를 다시 그립니다.
+      canvas?.renderAll()
+    })
     canvas?.on('mouse:down', function (options) {
       const pointer = canvas?.getPointer(options.e)
       const circle = new fabric.Circle({
@@ -96,7 +132,7 @@ export function useMode() {
             }
           }
 
-          const line = new fabric.Line(
+          const line = new QLine(
             [
               points.current[0].left,
               points.current[0].top,
@@ -107,26 +143,12 @@ export function useMode() {
               stroke: 'black',
               strokeWidth: 2,
               selectable: false,
+              isLengthText: true,
               direction: getDirection(points.current[0], points.current[1]),
             },
           )
 
           historyLines.current.push(line)
-          const text = new fabric.Text(length.toString(), {
-            left:
-              (points.current[0].left +
-                points.current[0].left +
-                scaledVector.x) /
-              2,
-            top:
-              (points.current[0].top + points.current[0].top + scaledVector.y) /
-              2,
-            fontSize: 15,
-            originX: 'center',
-            originY: 'center',
-            selectable: false,
-          })
-
           // 라인의 끝에 점을 추가합니다.
           const endPointCircle = new fabric.Circle({
             radius: 1,
@@ -140,7 +162,6 @@ export function useMode() {
           })
 
           canvas?.add(line)
-          canvas?.add(text)
           canvas?.add(endPointCircle)
 
           historyPoints.current.push(endPointCircle)
@@ -198,11 +219,12 @@ export function useMode() {
     canvas?.on('mouse:down', function (options) {
       const pointer = canvas?.getPointer(options.e)
 
-      const line = new fabric.Line(
+      const line = new QLine(
         [pointer.x, 0, pointer.x, canvas.height], // y축에 1자 선을 그립니다.
         {
           stroke: 'black',
           strokeWidth: 2,
+          isLengthText: true,
           selectable: false,
         },
       )
@@ -219,7 +241,7 @@ export function useMode() {
       const pointer = canvas.getPointer(o.e)
       origX = pointer.x
       origY = pointer.y
-      rect = new fabric.Rect({
+      rect = new QRect({
         left: origX,
         top: origY,
         originX: 'left',
@@ -228,6 +250,7 @@ export function useMode() {
         height: pointer.y - origY,
         angle: 0,
         fill: 'transparent',
+        isLengthText: true,
         stroke: 'black',
         transparentCorners: false,
       })
@@ -281,7 +304,7 @@ export function useMode() {
       x: b.left - a.left,
       y: b.top - a.top,
     }
-    const line = new fabric.Line([a.left, a.top, b.left, b.top], {
+    const line = new QLine([a.left, a.top, b.left, b.top], {
       stroke: 'black',
       strokeWidth: 2,
       selectable: false,
@@ -289,20 +312,7 @@ export function useMode() {
     })
     historyLines.current.push(line)
 
-    const text = new fabric.Text(
-      Math.round(Math.sqrt(vector.x ** 2 + vector.y ** 2)).toString(),
-      {
-        left: (a.left + b.left) / 2,
-        top: (a.top + b.top) / 2,
-        fontSize: 15,
-        originX: 'center',
-        originY: 'center',
-        selectable: false,
-      },
-    )
-
     canvas?.add(line)
-    canvas?.add(text)
     canvas?.renderAll()
   }
 
@@ -318,9 +328,10 @@ export function useMode() {
     lines.forEach((line) => canvas.remove(line))
 
     // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
-    const polygon = new fabric.Polygon(points, {
+    const polygon = new QPolygon(points, {
       stroke: 'black',
       fill: 'transparent',
+      isLengthText: true,
       selectable: false,
     })
 
@@ -341,5 +352,93 @@ export function useMode() {
     historyLines.current = []
   }
 
-  return { mode, changeMode, setCanvas, handleClear }
+  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))
+  }
+
+  const zoomOut = () => {
+    canvas?.setZoom(canvas.getZoom() - 0.1)
+    setZoom(Math.ceil(zoom - 10))
+  }
+
+  return {
+    mode,
+    changeMode,
+    setCanvas,
+    handleClear,
+    fillCellInPolygon,
+    zoomIn,
+    zoomOut,
+    zoom,
+  }
 }