보조선 수정

src/components/Roof2.jsx

@@ -151,12 +151,12 @@ export default function Roof2() {
     ]
 
     const type3 = [
-      { x: 200, y: 150 },
+      { x: 200, y: 100 },
-      { x: 200, y: 650 },
+      { x: 200, y: 800 },
-      { x: 450, y: 650 },
+      { x: 500, y: 800 },
-      { x: 450, y: 500 },
+      { x: 500, y: 300 },
-      { x: 650, y: 500 },
+      { x: 800, y: 300 },
-      { x: 650, y: 150 },
+      { x: 800, y: 100 },
     ]
 
     const type4 = [
@@ -169,7 +169,7 @@ export default function Roof2() {
     ]
     if (canvas) {
       const polygon = new QPolygon(
-        type1,
+        type4,
         {
           fill: 'transparent',
           stroke: 'black',

src/components/fabric/QPolygon.js

@@ -326,7 +326,7 @@ export default class QPolygon extends fabric.Group {
     this.canvas.requestRenderAll()
   }
 
-  // 보조선 그리기 사각형에서만
+  // 보조선 그리기
   drawHelpLine(chon = 4) {
     if (!this.isValid()) {
       return
@@ -580,12 +580,25 @@ export default class QPolygon extends fabric.Group {
     // 용마루 시작점과 만나는 지붕의 중앙
     let centerPoint1, centerPoint2
 
+    // 가장 긴 라인
+    let longestLines
+
     // 용마루 길이
     let ridgeLength = 0
-    let ridgePoint1, ridgePoint2
+    let ridgeStartPoint1, ridgeStartPoint2
+
+    let ridgeEndPoint1, ridgeEndPoint2
+
+    let ridgeLength1, ridgeLength2
+
+    let ridgeHelpLinePoint1, ridgeHelpLinePoint2
+
     if (type === 1) {
       lines = [this.lines[0], this.lines[3]]
       lines2 = [this.lines[1], this.lines[4]]
+      longestLines = [this.lines[4], this.lines[5]]
+      ridgeLength1 = lines2[0].length
+      ridgeLength2 = longestLines[0].length - lines[1].length
       vPoint1 = {
         x: lines[0].x1 + lines[0].length / 2,
         y: lines[0].y1 + lines[0].length / 2,
@@ -603,12 +616,37 @@ export default class QPolygon extends fabric.Group {
         y: (lines[1].y1 + lines[1].y2) / 2,
       }
 
-      ridgeLength = Math.min(this.lines[1].length, this.lines[2].length)
+      ridgeEndPoint1 = [
-      ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength, vPoint1.y]
+        vPoint1.x,
-      ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y - ridgeLength]
+        vPoint1.y,
+        vPoint1.x + ridgeLength1,
+        vPoint1.y,
+      ]
+      ridgeEndPoint2 = [
+        vPoint2.x,
+        vPoint2.y,
+        vPoint2.x,
+        vPoint2.y - ridgeLength2,
+      ]
+
+      ridgeHelpLinePoint1 = [
+        lines2[0].x2,
+        lines2[0].y2,
+        ridgeEndPoint1[2],
+        ridgeEndPoint1[3],
+      ]
+      ridgeHelpLinePoint2 = [
+        lines2[1].x2,
+        lines2[1].y2,
+        ridgeEndPoint2[2],
+        ridgeEndPoint2[3],
+      ]
     } else if (type === 2) {
       lines = [this.lines[2], this.lines[5]]
       lines2 = [this.lines[0], this.lines[3]]
+      longestLines = [this.lines[0], this.lines[1]]
+      ridgeLength1 = lines2[1].length
+      ridgeLength2 = longestLines[0].length - lines[1].length
       vPoint1 = {
         x: lines[0].x1 - lines[0].length / 2,
         y: lines[0].y1 - lines[0].length / 2,
@@ -626,12 +664,38 @@ export default class QPolygon extends fabric.Group {
         y: (lines[1].y1 + lines[1].y2) / 2,
       }
 
-      ridgeLength = Math.min(this.lines[3].length, this.lines[4].length)
+      ridgeEndPoint1 = [
-      ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x - ridgeLength, vPoint1.y]
+        vPoint1.x,
-      ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength]
+        vPoint1.y,
+        vPoint1.x - ridgeLength1,
+        vPoint1.y,
+      ]
+
+      ridgeEndPoint2 = [
+        vPoint2.x,
+        vPoint2.y,
+        vPoint2.x,
+        vPoint2.y + ridgeLength2,
+      ]
+
+      ridgeHelpLinePoint1 = [
+        lines2[1].x2,
+        lines2[1].y2,
+        ridgeEndPoint1[2],
+        ridgeEndPoint1[3],
+      ]
+      ridgeHelpLinePoint2 = [
+        lines2[0].x2,
+        lines2[0].y2,
+        ridgeEndPoint2[2],
+        ridgeEndPoint2[3],
+      ]
     } else if (type === 3) {
       lines = [this.lines[1], this.lines[4]]
       lines2 = [this.lines[2], this.lines[5]]
+      longestLines = [this.lines[0], this.lines[5]]
+      ridgeLength1 = this.lines[3].length
+      ridgeLength2 = longestLines[0].length - lines[0].length
       vPoint1 = {
         x: lines[0].x1 + lines[0].length / 2,
         y: lines[0].y1 - lines[0].length / 2,
@@ -649,12 +713,38 @@ export default class QPolygon extends fabric.Group {
         y: (lines[1].y1 + lines[1].y2) / 2,
       }
 
-      ridgeLength = Math.min(this.lines[2].length, this.lines[3].length)
+      ridgeEndPoint1 = [
-      ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x, vPoint1.y - ridgeLength]
+        vPoint1.x,
-      ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x - ridgeLength, vPoint2.y]
+        vPoint1.y,
+        vPoint1.x,
+        vPoint1.y - ridgeLength2,
+      ]
+
+      ridgeEndPoint2 = [
+        vPoint2.x,
+        vPoint2.y,
+        vPoint2.x - ridgeLength1,
+        vPoint2.y,
+      ]
+
+      ridgeHelpLinePoint1 = [
+        lines2[1].x2,
+        lines2[1].y2,
+        ridgeEndPoint1[2],
+        ridgeEndPoint1[3],
+      ]
+      ridgeHelpLinePoint2 = [
+        lines2[0].x2,
+        lines2[0].y2,
+        ridgeEndPoint2[2],
+        ridgeEndPoint2[3],
+      ]
     } else if (type === 4) {
       lines = [this.lines[0], this.lines[3]]
       lines2 = [this.lines[1], this.lines[4]]
+      longestLines = [this.lines[1], this.lines[2]]
+      ridgeLength1 = longestLines[0].length - lines[0].length
+      ridgeLength2 = this.lines[4].length
       vPoint1 = {
         x: lines[0].x1 + lines[0].length / 2,
         y: lines[0].y1 + lines[0].length / 2,
@@ -672,9 +762,32 @@ export default class QPolygon extends fabric.Group {
         y: (lines[1].y1 + lines[1].y2) / 2,
       }
 
-      ridgeLength = Math.min(this.lines[4].length, this.lines[5].length)
+      ridgeEndPoint1 = [
-      ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength, vPoint1.y]
+        vPoint1.x,
-      ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength]
+        vPoint1.y,
+        vPoint1.x + ridgeLength1,
+        vPoint1.y,
+      ]
+
+      ridgeEndPoint2 = [
+        vPoint2.x,
+        vPoint2.y,
+        vPoint2.x,
+        vPoint2.y + ridgeLength2,
+      ]
+
+      ridgeHelpLinePoint1 = [
+        lines2[0].x2,
+        lines2[0].y2,
+        ridgeEndPoint1[2],
+        ridgeEndPoint1[3],
+      ]
+      ridgeHelpLinePoint2 = [
+        lines2[1].x2,
+        lines2[1].y2,
+        ridgeEndPoint2[2],
+        ridgeEndPoint2[3],
+      ]
     }
 
     const realLine1 = new QLine(
@@ -727,7 +840,7 @@ export default class QPolygon extends fabric.Group {
 
     // 용마루 보조선
     const ridgeHelpLine1 = new QLine(
-      [lines2[0].x2, lines2[0].y2, ridgePoint1[2], ridgePoint1[3]],
+      ridgeHelpLinePoint1,
       {
         fontSize: this.fontSize,
         stroke: 'blue',
@@ -738,7 +851,7 @@ export default class QPolygon extends fabric.Group {
 
     // 용마루 보조선
     const ridgeHelpLine2 = new QLine(
-      [lines2[1].x2, lines2[1].y2, ridgePoint2[2], ridgePoint2[3]],
+      ridgeHelpLinePoint2,
       {
         fontSize: this.fontSize,
         stroke: 'blue',
@@ -748,21 +861,32 @@ export default class QPolygon extends fabric.Group {
     )
 
     // 용마루
-    const ridge1 = new QLine(ridgePoint1, {
+    const ridge1 = new QLine(
-      fontSize: this.fontSize,
+      [vPoint1.x, vPoint1.y, ridgeEndPoint1[2], ridgeEndPoint1[3]],
-      stroke: 'blue',
+      {
-      strokeWidth: 1,
+        fontSize: this.fontSize,
-    })
+        stroke: 'blue',
+        strokeWidth: 1,
+      },
+    )
 
     // 용마루
-    const ridge2 = new QLine(ridgePoint2, {
+    const ridge2 = new QLine(
-      fontSize: this.fontSize,
+      [vPoint2.x, vPoint2.y, ridgeEndPoint2[2], ridgeEndPoint2[3]],
-      stroke: 'blue',
+      {
-      strokeWidth: 1,
+        fontSize: this.fontSize,
-    })
+        stroke: 'blue',
+        strokeWidth: 1,
+      },
+    )
 
     const ridgeEndLine = new QLine(
-      [ridgePoint1[2], ridgePoint1[3], ridgePoint2[2], ridgePoint2[3]],
+      [
+        ridgeEndPoint1[2],
+        ridgeEndPoint1[3],
+        ridgeEndPoint2[2],
+        ridgeEndPoint2[3],
+      ],
       {
         fontSize: this.fontSize,
         stroke: 'blue',