지붕 패턴 1 적용

src/components/Roof2.jsx

@@ -267,6 +267,13 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
               템플릿(B 패턴)
             </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+              onClick={() => changeMode(canvas, Mode.ROOF_PATTERN)}
+            >
+              지붕패턴
+            </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>

src/hooks/useMode.js

@@ -14,6 +14,7 @@ export const Mode = {
   PATTERNB: 'patternb',
   TEXTBOX: 'textbox',
   DRAW_RECT: 'drawRect',
+  ROOF_PATTERN: 'roofPattern',
   DEFAULT: 'default',
 }
 
@@ -57,6 +58,9 @@ export function useMode() {
       case 'drawRect':
         drawRectMode()
         break
+      case 'roofPattern':
+        makeRoofPatternPolygon()
+        break
     }
   }
 
@@ -890,34 +894,6 @@ export function useMode() {
     return rtnLines
   }
 
-  const makeRoofPatternPolygon = (pointsObj, canvas) => {
-    const commonOption = {
-      fill: 'red',
-      opacity: 0.2,
-      selectable: false,
-      fontSize: 15, // fontSize는 필요에 따라 조정
-    }
-
-    const bigRoof = new QPolygon(pointsObj.bigRoofPolygon, commonOption)
-    const middleRoof = new QPolygon(pointsObj.middleRoofPolygon, commonOption)
-    const smallRoof = new QPolygon(pointsObj.smallRoofPolygon, commonOption)
-
-    setRoofPolygonPattern({ bigRoof, middleRoof, smallRoof })
-
-    bigRoof.sendToBack() //객체를 가장 뒤로
-    middleRoof.sendToBack()
-    smallRoof.sendToBack()
-
-    bigRoof.setViewLengthText(false) //치수 필요없음
-    middleRoof.setViewLengthText(false)
-    smallRoof.setViewLengthText(false)
-
-    canvas.add(bigRoof) //캔버스 객체 추가
-    canvas.add(middleRoof)
-    canvas.add(smallRoof)
-    canvas.renderAll()
-  }
-
   const applyTemplateA = () => {
     changeMode(canvas, Mode.EDIT)
     const polygon = drawWallPolygon()
@@ -1298,8 +1274,7 @@ export function useMode() {
           { x: outLines[4].x2, y: outLines[4].y2 },
           { x: outLines[4].x1, y: outLines[4].y1 },
         ]
-
-        makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas)
+        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       } else {
         //아래쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1449,8 +1424,7 @@ export function useMode() {
           { x: outLines[1].x2, y: outLines[1].y2 },
           { x: outLines[1].x1, y: outLines[1].y1 },
         ]
-
-        makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas)
+        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       }
     } else {
       if (horizontalDirection === 'left') {
@@ -1595,7 +1569,7 @@ export function useMode() {
           { x: outLines[3].x1, y: outLines[3].y1 },
         ]
 
-        makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas)
+        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       } else {
         //윗쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1740,7 +1714,7 @@ export function useMode() {
           { x: outLines[1].x1, y: outLines[1].y1 },
         ]
 
-        makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas)
+        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       }
     }
 
@@ -2166,6 +2140,70 @@ export function useMode() {
     canvas.renderAll()
   }
 
+  const makeRoofPatternPolygon = () => {
+    if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
+      alert('객체가 비어있습니다.')
+      return
+    }
+
+    //내부 선 점선으로 변경
+    roofPolygonPattern.lines.forEach((line, index) => {
+      line.line.set('strokeDashArray', [10, 5, 2, 5])
+      line.line.set('stroke', 'blue')
+      line.line.set('strokeWidth', 1)
+    })
+
+    var ratio = window.devicePixelRatio || 1
+
+    // 패턴 소스를 위한 임시 캔버스 생성
+    const patternSourceCanvas = document.createElement('canvas')
+    patternSourceCanvas.width = 20 * ratio
+    patternSourceCanvas.height = 15 * ratio
+    const ctx = patternSourceCanvas.getContext('2d')
+
+    // 벽돌 패턴 그리기
+    ctx.scale(ratio, ratio)
+    ctx.strokeStyle = 'green'
+    ctx.lineWidth = 0.1
+
+    // 첫 번째 행 벽돌
+    ctx.strokeRect(0, 0, 20, 15)
+    // ctx.strokeRect(30, 20, 30, 20)
+
+    // // 두 번째 행 벽돌
+    // ctx.strokeRect(-30, 20, 60, 20)
+    // ctx.strokeRect(0, 40, 60, 20)
+
+    // 패턴 생성
+    const pattern = new fabric.Pattern({
+      source: patternSourceCanvas,
+      repeat: 'repeat',
+    })
+
+    const commonOption = {
+      fill: pattern,
+      selectable: false,
+      fontSize: 15, // fontSize는 필요에 따라 조정
+    }
+
+    const bigRoof = new QPolygon(roofPolygonPattern.bigRoofPolygon, commonOption)
+    const middleRoof = new QPolygon(roofPolygonPattern.middleRoofPolygon, commonOption)
+    const smallRoof = new QPolygon(roofPolygonPattern.smallRoofPolygon, commonOption)
+
+    bigRoof.sendToBack() //객체를 가장 뒤로
+    middleRoof.sendToBack()
+    smallRoof.sendToBack()
+
+    bigRoof.setViewLengthText(false) //치수 필요없음
+    middleRoof.setViewLengthText(false)
+    smallRoof.setViewLengthText(false)
+
+    canvas.add(bigRoof) //캔버스 객체 추가
+    canvas.add(middleRoof)
+    canvas.add(smallRoof)
+    canvas.renderAll()
+  }
+
   return {
     mode,
     changeMode,