6각형 작업중

src/components/Roof2.jsx

@@ -133,24 +133,43 @@ export default function Roof2() {
   }, [verticalSize, horizontalSize])
 
   const makeQPolygon = () => {
+    const type1 = [
+      { x: 100, y: 100 },
+      { x: 800, y: 100 },
+      { x: 800, y: 800 },
+      { x: 500, y: 800 },
+      { x: 500, y: 400 },
+      { x: 100, y: 400 },
+    ]
+    const type2 = [
+      { x: 100, y: 100 },
+      { x: 100, y: 1000 },
+      { x: 1000, y: 1000 },
+      { x: 1000, y: 600 },
+      { x: 550, y: 600 },
+      { x: 550, y: 100 },
+    ]
+
+    const type3 = [
+      { x: 100, y: 50 },
+      { x: 100, y: 650 },
+      { x: 450, y: 650 },
+      { x: 450, y: 400 },
+      { x: 700, y: 400 },
+      { x: 700, y: 50 },
+    ]
+
+    const type4 = [
+      { x: 153.96209743461895, y: 446.46989831140326 },
+      { x: 153.96209743461895, y: 796.879061239893 },
+      { x: 754.3712603631087, y: 796.879061239893 },
+      { x: 754.3712603631087, y: 196.46989831140326 },
+      { x: 403.962097434619, y: 196.46989831140326 },
+      { x: 403.962097434619, y: 446.46989831140326 },
+    ]
     if (canvas) {
       const polygon = new QPolygon(
-        [
+        type4,
-          // { x: 198.5, y: 735 },
-          // { x: 698.5, y: 735 },
-          // { x: 698.5, y: 585 },
-          // { x: 448.5, y: 585 },
-          // { x: 448.5, y: 435 },
-          // { x: 698.5, y: 435 },
-          // { x: 698.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',
           stroke: 'black',

src/components/fabric/QPolygon.js

@@ -30,6 +30,7 @@ export default class QPolygon extends fabric.Group {
     }
 
     const sortPoints = sortedPoints(points)
+    console.log(sortPoints)
     const polygon = new fabric.Polygon(sortPoints, options)
 
     super([polygon], {})
@@ -545,9 +546,10 @@ export default class QPolygon extends fabric.Group {
     let vPoint1, vPoint2
     // 용마루 시작점과 만나는 지붕의 중앙
     let centerPoint1, centerPoint2
-    // 용마루 끝점을 위해 필요한 점 2개
-    let vPoint3, vPoint4
 
+    // 용마루 길이
+    let ridgeLength = 0
+    let ridgePoint1, ridgePoint2
     if (type === 1) {
       lines = [this.lines[0], this.lines[3]]
       lines2 = [this.lines[1], this.lines[4]]
@@ -567,14 +569,10 @@ export default class QPolygon extends fabric.Group {
         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,
+      ridgeLength = Math.min(this.lines[1].length, this.lines[2].length)
-        y: lines2[0].y2 - lines[0].length / 2,
+      ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength, vPoint1.y]
-      }
+      ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y - ridgeLength]
-      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]]
@@ -594,14 +592,10 @@ export default class QPolygon extends fabric.Group {
         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,
+      ridgeLength = Math.min(this.lines[3].length, this.lines[4].length)
-        y: lines2[0].y2 - lines[0].length / 2,
+      ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x - ridgeLength, vPoint1.y]
-      }
+      ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength]
-      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]]
@@ -621,14 +615,10 @@ export default class QPolygon extends fabric.Group {
         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,
+      ridgeLength = Math.min(this.lines[0].length, this.lines[3].length)
-        y: lines2[0].y2 - lines[0].length / 2,
+      ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x, vPoint1.y - ridgeLength]
-      }
+      ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x - ridgeLength, vPoint2.y]
-      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]]
@@ -648,14 +638,10 @@ export default class QPolygon extends fabric.Group {
         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,
+      ridgeLength = Math.min(this.lines[2].length, this.lines[5].length)
-        y: lines2[0].y2 - lines[0].length / 2,
+      ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength, vPoint1.y]
-      }
+      ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength]
-      vPoint4 = {
-        x: lines2[1].x2 + lines[1].length / 2,
-        y: lines2[1].y2 + lines[1].length / 2,
-      }
     }
 
     const realLine1 = new QLine(
@@ -667,7 +653,7 @@ export default class QPolygon extends fabric.Group {
     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),
+      getRoofHypotenuse(lines[0].length / 2),
     )
 
     const realLine3 = new QLine(
@@ -682,7 +668,7 @@ export default class QPolygon extends fabric.Group {
       getRoofHypotenuse(lines[1].length / 2),
     )
 
-    // 옆으로 누워있는 지붕의 높이
+    // 옆으로 누워있는 지붕의 높이 점선
     const realLine5 = new QLine(
       [vPoint1.x, vPoint1.y, centerPoint1.x, centerPoint1.y],
       {
@@ -694,7 +680,7 @@ export default class QPolygon extends fabric.Group {
       getRoofHeight(lines[0].length / 2, getDegreeByChon(chon)),
     )
 
-    // 옆으로 누워있는 지붕의 높이
+    // 옆으로 누워있는 지붕의 높이 점선
     const realLine6 = new QLine(
       [vPoint2.x, vPoint2.y, centerPoint2.x, centerPoint2.y],
       {
@@ -708,7 +694,7 @@ export default class QPolygon extends fabric.Group {
 
     // 용마루 보조선
     const ridgeHelpLine1 = new QLine(
-      [lines2[0].x2, lines2[0].y2, vPoint3.x, vPoint3.y],
+      [lines2[1].x2, lines2[1].y2, ridgePoint1[2], ridgePoint1[3]],
       {
         fontSize: this.fontSize,
         stroke: 'black',
@@ -719,7 +705,7 @@ export default class QPolygon extends fabric.Group {
 
     // 용마루 보조선
     const ridgeHelpLine2 = new QLine(
-      [lines2[1].x2, lines2[1].y2, vPoint4.x, vPoint4.y],
+      [lines2[0].x2, lines2[0].y2, ridgePoint2[2], ridgePoint2[3]],
       {
         fontSize: this.fontSize,
         stroke: 'black',
@@ -729,22 +715,21 @@ export default class QPolygon extends fabric.Group {
     )
 
     // 용마루
-    const ridge1 = new QLine([vPoint1.x, vPoint1.y, vPoint3.x, vPoint3.y], {
+    const ridge1 = new QLine(ridgePoint1, {
       fontSize: this.fontSize,
       stroke: 'black',
       strokeWidth: 1,
     })
 
     // 용마루
-    const ridge2 = new QLine([vPoint2.x, vPoint2.y, vPoint4.x, vPoint4.y], {
+    const ridge2 = new QLine(ridgePoint2, {
       fontSize: this.fontSize,
       stroke: 'black',
       strokeWidth: 1,
     })
 
-    console.log(vPoint3, vPoint4)
     const ridgeEndLine = new QLine(
-      [vPoint3.x, vPoint3.y, vPoint4.x, vPoint4.y],
+      [ridgePoint1[2], ridgePoint1[3], ridgePoint2[2], ridgePoint2[3]],
       {
         fontSize: this.fontSize,
         stroke: 'black',
@@ -765,6 +750,7 @@ export default class QPolygon extends fabric.Group {
     this.addWithUpdate(ridgeEndLine)
 
     this.canvas.renderAll()
+    console.log(JSON.stringify(this.points))
   }
 
   #drawHelpLineInOctagon(chon) {}