6각형 작업중

src/components/Roof2.jsx

@@ -136,14 +136,20 @@ export default function Roof2() {
     if (canvas) {
       const polygon = new QPolygon(
         [
-          { x: 198.5, y: 735 },
+          // { x: 198.5, y: 735 },
-          { x: 698.5, y: 735 },
+          // { x: 698.5, y: 735 },
-          { x: 698.5, y: 585 },
+          // { x: 698.5, y: 585 },
-          { x: 448.5, y: 585 },
+          // { x: 448.5, y: 585 },
-          { x: 448.5, y: 435 },
+          // { x: 448.5, y: 435 },
-          { x: 698.5, y: 435 },
+          // { x: 698.5, y: 435 },
-          { x: 698.5, y: 235 },
+          // { x: 698.5, y: 235 },
-          { x: 198.5, y: 235 },
+          // { x: 198.5, y: 235 },
+          { x: 100, y: 100 },
+          { x: 800, y: 100 },
+          { x: 800, y: 800 },
+          { x: 500, y: 800 },
+          { x: 500, y: 400 },
+          { x: 100, y: 400 },
         ],
         {
           fill: 'transparent',

src/components/fabric/QPolygon.js

@@ -33,6 +33,7 @@ export default class QPolygon extends fabric.Group {
     const polygon = new fabric.Polygon(sortPoints, options)
 
     super([polygon], {})
+
     this.fontSize = options.fontSize
     this.points = sortPoints
     this.polygon = polygon
@@ -354,7 +355,7 @@ export default class QPolygon extends fabric.Group {
   }
 
   #drawHelpLineInRect(chon) {
-    let type
+    let type = 1
     let smallestLength = Infinity
     let maxLength = 0
 
@@ -530,7 +531,241 @@ export default class QPolygon extends fabric.Group {
     }
   }
 
-  #drawHelpLineInHexagon(chon) {}
+  #drawHelpLineInHexagon(chon) {
+    let type = this.shape
+
+    // 1 = 0, 3
+    // 2 = 2, 5
+    // 3 = 1, 4
+    // 4 = 0, 3
+
+    // 라인 기준점 1,2
+    let lines, lines2
+    // 용마루 시작점 2개
+    let vPoint1, vPoint2
+    // 용마루 시작점과 만나는 지붕의 중앙
+    let centerPoint1, centerPoint2
+    // 용마루 끝점을 위해 필요한 점 2개
+    let vPoint3, vPoint4
+
+    if (type === 1) {
+      lines = [this.lines[0], this.lines[3]]
+      lines2 = [this.lines[1], this.lines[4]]
+      vPoint1 = {
+        x: lines[0].x1 + lines[0].length / 2,
+        y: lines[0].y1 + lines[0].length / 2,
+      }
+      vPoint2 = {
+        x: lines[1].x1 + lines[1].length / 2,
+        y: lines[1].y1 - lines[1].length / 2,
+      }
+      centerPoint1 = {
+        x: (lines[0].x1 + lines[0].x2) / 2,
+        y: (lines[0].y1 + lines[0].y2) / 2,
+      }
+      centerPoint2 = {
+        x: (lines[1].x1 + lines[1].x2) / 2,
+        y: (lines[1].y1 + lines[1].y2) / 2,
+      }
+      vPoint3 = {
+        x: lines2[0].x2 + lines[0].length / 2,
+        y: lines2[0].y2 - lines[0].length / 2,
+      }
+      vPoint4 = {
+        x: lines2[1].x2 - lines[1].length / 2,
+        y: lines2[1].y2 + lines[1].length / 2,
+      }
+    } else if (type === 2) {
+      lines = [this.lines[2], this.lines[5]]
+      lines2 = [this.lines[0], this.lines[3]]
+      vPoint1 = {
+        x: lines[0].x1 - lines[0].length / 2,
+        y: lines[0].y1 - lines[0].length / 2,
+      }
+      vPoint2 = {
+        x: lines[1].x1 - lines[1].length / 2,
+        y: lines[1].y1 + lines[1].length / 2,
+      }
+      centerPoint1 = {
+        x: (lines[0].x1 + lines[0].x2) / 2,
+        y: (lines[0].y1 + lines[0].y2) / 2,
+      }
+      centerPoint2 = {
+        x: (lines[1].x1 + lines[1].x2) / 2,
+        y: (lines[1].y1 + lines[1].y2) / 2,
+      }
+      vPoint3 = {
+        x: lines2[0].x2 + lines[0].length / 2,
+        y: lines2[0].y2 - lines[0].length / 2,
+      }
+      vPoint4 = {
+        x: lines2[1].x2 - lines[1].length / 2,
+        y: lines2[1].y2 + lines[1].length / 2,
+      }
+    } else if (type === 3) {
+      lines = [this.lines[1], this.lines[4]]
+      lines2 = [this.lines[2], this.lines[5]]
+      vPoint1 = {
+        x: lines[0].x1 + lines[0].length / 2,
+        y: lines[0].y1 - lines[0].length / 2,
+      }
+      vPoint2 = {
+        x: lines[1].x1 - lines[1].length / 2,
+        y: lines[1].y1 - lines[1].length / 2,
+      }
+      centerPoint1 = {
+        x: (lines[0].x1 + lines[0].x2) / 2,
+        y: (lines[0].y1 + lines[0].y2) / 2,
+      }
+      centerPoint2 = {
+        x: (lines[1].x1 + lines[1].x2) / 2,
+        y: (lines[1].y1 + lines[1].y2) / 2,
+      }
+      vPoint3 = {
+        x: lines2[0].x2 - lines[0].length / 2,
+        y: lines2[0].y2 - lines[0].length / 2,
+      }
+      vPoint4 = {
+        x: lines2[1].x2 + lines[1].length / 2,
+        y: lines2[1].y2 + lines[1].length / 2,
+      }
+    } else if (type === 4) {
+      lines = [this.lines[0], this.lines[3]]
+      lines2 = [this.lines[1], this.lines[4]]
+      vPoint1 = {
+        x: lines[0].x1 + lines[0].length / 2,
+        y: lines[0].y1 + lines[0].length / 2,
+      }
+      vPoint2 = {
+        x: lines[1].x1 - lines[1].length / 2,
+        y: lines[1].y1 + lines[1].length / 2,
+      }
+      centerPoint1 = {
+        x: (lines[0].x1 + lines[0].x2) / 2,
+        y: (lines[0].y1 + lines[0].y2) / 2,
+      }
+      centerPoint2 = {
+        x: (lines[1].x1 + lines[1].x2) / 2,
+        y: (lines[1].y1 + lines[1].y2) / 2,
+      }
+      vPoint3 = {
+        x: lines2[0].x2 - lines[0].length / 2,
+        y: lines2[0].y2 - lines[0].length / 2,
+      }
+      vPoint4 = {
+        x: lines2[1].x2 + lines[1].length / 2,
+        y: lines2[1].y2 + lines[1].length / 2,
+      }
+    }
+
+    const realLine1 = new QLine(
+      [lines[0].x1, lines[0].y1, vPoint1.x, vPoint1.y],
+      { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
+      getRoofHypotenuse(lines[0].length / 2),
+    )
+
+    const realLine2 = new QLine(
+      [lines[0].x2, lines[0].y2, vPoint1.x, vPoint1.y],
+      { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
+      getRoofHypotenuse(lines[1].length / 2),
+    )
+
+    const realLine3 = new QLine(
+      [lines[1].x1, lines[1].y1, vPoint2.x, vPoint2.y],
+      { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
+      getRoofHypotenuse(lines[1].length / 2),
+    )
+
+    const realLine4 = new QLine(
+      [lines[1].x2, lines[1].y2, vPoint2.x, vPoint2.y],
+      { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
+      getRoofHypotenuse(lines[1].length / 2),
+    )
+
+    // 옆으로 누워있는 지붕의 높이
+    const realLine5 = new QLine(
+      [vPoint1.x, vPoint1.y, centerPoint1.x, centerPoint1.y],
+      {
+        fontSize: this.fontSize,
+        stroke: 'black',
+        strokeWidth: 1,
+        strokeDashArray: [5, 5],
+      },
+      getRoofHeight(lines[0].length / 2, getDegreeByChon(chon)),
+    )
+
+    // 옆으로 누워있는 지붕의 높이
+    const realLine6 = new QLine(
+      [vPoint2.x, vPoint2.y, centerPoint2.x, centerPoint2.y],
+      {
+        fontSize: this.fontSize,
+        stroke: 'black',
+        strokeWidth: 1,
+        strokeDashArray: [5, 5],
+      },
+      getRoofHeight(lines[1].length / 2, getDegreeByChon(chon)),
+    )
+
+    // 용마루 보조선
+    const ridgeHelpLine1 = new QLine(
+      [lines2[0].x2, lines2[0].y2, vPoint3.x, vPoint3.y],
+      {
+        fontSize: this.fontSize,
+        stroke: 'black',
+        strokeWidth: 1,
+      },
+      getRoofHypotenuse(lines[0].length / 2),
+    )
+
+    // 용마루 보조선
+    const ridgeHelpLine2 = new QLine(
+      [lines2[1].x2, lines2[1].y2, vPoint4.x, vPoint4.y],
+      {
+        fontSize: this.fontSize,
+        stroke: 'black',
+        strokeWidth: 1,
+      },
+      getRoofHypotenuse(lines[1].length / 2),
+    )
+
+    // 용마루
+    const ridge1 = new QLine([vPoint1.x, vPoint1.y, vPoint3.x, vPoint3.y], {
+      fontSize: this.fontSize,
+      stroke: 'black',
+      strokeWidth: 1,
+    })
+
+    // 용마루
+    const ridge2 = new QLine([vPoint2.x, vPoint2.y, vPoint4.x, vPoint4.y], {
+      fontSize: this.fontSize,
+      stroke: 'black',
+      strokeWidth: 1,
+    })
+
+    console.log(vPoint3, vPoint4)
+    const ridgeEndLine = new QLine(
+      [vPoint3.x, vPoint3.y, vPoint4.x, vPoint4.y],
+      {
+        fontSize: this.fontSize,
+        stroke: 'black',
+        strokeWidth: 1,
+      },
+    )
+
+    this.addWithUpdate(realLine1)
+    this.addWithUpdate(realLine2)
+    this.addWithUpdate(realLine3)
+    this.addWithUpdate(realLine4)
+    this.addWithUpdate(realLine5)
+    this.addWithUpdate(realLine6)
+    this.addWithUpdate(ridgeHelpLine1)
+    this.addWithUpdate(ridgeHelpLine2)
+    this.addWithUpdate(ridge1)
+    this.addWithUpdate(ridge2)
+    this.addWithUpdate(ridgeEndLine)
+
+    this.canvas.renderAll()
+  }
 
   #drawHelpLineInOctagon(chon) {}
 }

src/hooks/useMode.js

@@ -856,7 +856,7 @@ export function useMode() {
 
     const roof = makePolygon(offsetPoints)
     setRoof(roof)
-    // roof.drawHelpLine()
+    roof.drawHelpLine()
   }
 
   const togglePolygonLine = (obj) => {