지붕모양 지그재그패턴 추가

src/components/Roof2.jsx

@@ -29,8 +29,19 @@ export default function Roof2() {
 
   const [showControl, setShowControl] = useState(false)
 
-  const { mode, changeMode, handleClear, fillCellInPolygon, zoomIn, zoomOut, zoom, togglePolygonLine, handleOuterlinesTest2, applyTemplateB } =
-    useMode()
+  const {
+    mode,
+    changeMode,
+    handleClear,
+    fillCellInPolygon,
+    zoomIn,
+    zoomOut,
+    zoom,
+    togglePolygonLine,
+    handleOuterlinesTest2,
+    applyTemplateB,
+    makeRoofPatternPolygon,
+  } = useMode()
 
   useEffect(() => {
     if (!canvas) {
@@ -240,6 +251,10 @@ export default function Roof2() {
     setShowControl(!showControl)
   }
 
+  const drawRoofPatterns = (roofStyle) => {
+    makeRoofPatternPolygon(roofStyle)
+  }
+
   return (
     <>
       {canvas && (
@@ -267,12 +282,11 @@ 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 className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(1)}>
+              지붕패턴1
+            </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
+              지붕패턴2
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
               텍스트박스 모드

src/hooks/useMode.js

@@ -2140,7 +2140,7 @@ export function useMode() {
     canvas.renderAll()
   }
 
-  const makeRoofPatternPolygon = () => {
+  const makeRoofPatternPolygon = (roofStyle) => {
     if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
       alert('객체가 비어있습니다.')
       return
@@ -2157,22 +2157,26 @@ export function useMode() {
 
     // 패턴 소스를 위한 임시 캔버스 생성
     const patternSourceCanvas = document.createElement('canvas')
-    patternSourceCanvas.width = 20 * ratio
-    patternSourceCanvas.height = 15 * ratio
+    patternSourceCanvas.width = 30 * ratio
+    patternSourceCanvas.height = 30 * ratio
     const ctx = patternSourceCanvas.getContext('2d')
 
     // 벽돌 패턴 그리기
     ctx.scale(ratio, ratio)
     ctx.strokeStyle = 'green'
-    ctx.lineWidth = 0.1
+    ctx.lineWidth = 0.2
 
     // 첫 번째 행 벽돌
-    ctx.strokeRect(0, 0, 20, 15)
-    // ctx.strokeRect(30, 20, 30, 20)
-
-    // // 두 번째 행 벽돌
-    // ctx.strokeRect(-30, 20, 60, 20)
-    // ctx.strokeRect(0, 40, 60, 20)
+    if (roofStyle === 2) {
+      //지그재그
+      // // 두 번째 행 벽돌
+      ctx.strokeRect(0, 0, 30, 15)
+      ctx.strokeRect(30, 15, 30, 15)
+      ctx.strokeRect(-15, 15, 30, 15)
+      ctx.strokeRect(0, 30, 30, 15)
+    } else {
+      ctx.strokeRect(0, 0, 30, 30) // 원패턴일때랑 지그재그일때랑은 다르게 들어가야함
+    }
 
     // 패턴 생성
     const pattern = new fabric.Pattern({
@@ -2190,14 +2194,14 @@ export function useMode() {
     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)
 
+    bigRoof.sendToBack() //객체를 가장 뒤로
+    middleRoof.sendToBack()
+    smallRoof.sendToBack()
+
     canvas.add(bigRoof) //캔버스 객체 추가
     canvas.add(middleRoof)
     canvas.add(smallRoof)
@@ -2214,5 +2218,6 @@ export function useMode() {
     zoom,
     togglePolygonLine,
     handleOuterlinesTest2,
+    makeRoofPatternPolygon,
   }
 }