다각형 테스트 중

src/components/fabric/QPolygon.js

@@ -531,6 +531,7 @@ export default class QPolygon extends fabric.Group {
       this.canvas.add(ridge)
     }
   }
+
   #drawHelpLineInHexagon2(chon) {
     const oneSideLines = [...this.lines].map((line) => {
       let newX1, newY1, newX2, newY2
@@ -747,6 +748,7 @@ export default class QPolygon extends fabric.Group {
       this.canvas.renderAll()
     })
   }
+
   #drawHelpLineInHexagon(chon) {
     const historyLines = []
     const helpPoints = []
@@ -892,7 +894,7 @@ export default class QPolygon extends fabric.Group {
   #drawHelpLineInOctagon(chon) {
     this.drawRoofRidge()
     this.drawHips()
-    this.connectLinePoint()
+    // this.connectLinePoint()
   }
 
   /*마루 그리기
@@ -907,6 +909,9 @@ export default class QPolygon extends fabric.Group {
     let startXPoint, startYPoint, endXPoint, endYPoint
     let dVector, ridgeMaxLength, ridgeMinLength, ridgeRun
 
+    let maxSquare = this.getLargestSquareCoordinate()
+    console.log(maxSquare)
+
     this.lines.forEach(
       (value, index) => {
         if (index === 0) {
@@ -929,12 +934,18 @@ export default class QPolygon extends fabric.Group {
           nextLine = this.lines[index + 1]
           nextWall = this.wall.lines[index + 1]
         }
-        if (this.getLineDirection(prevLine) !== this.getLineDirection(nextLine)) {
+
+        console.log('currentWall.length < currentLine.length')
+        console.log(currentWall.length, currentLine.length)
+        if (this.getLineDirection(prevLine) !== this.getLineDirection(nextLine) && currentWall.length < currentLine.length) {
+          console.log(currentWall.length <= prevWall.length)
+          console.log(currentWall.length <= nextWall.length)
           if (currentWall.length <= prevWall.length && currentWall.length <= nextWall.length) {
-            ridgeMaxLength = Math.min(prevLine.length, currentLine.length, nextLine.length)
+            ridgeMaxLength = Math.min(prevLine.length, nextLine.length)
-            ridgeMinLength = Math.max(prevLine.length, currentLine.length, nextLine.length) - currentLine.length
+            ridgeMinLength = Math.max(prevLine.length, nextLine.length) - currentLine.length
             ridgeRun = ridgeMinLength < ridgeMaxLength ? ridgeMinLength : ridgeMaxLength
             dVector = this.getDirectionForDegree(prevLine, currentLine)
+            console.log(ridgeMinLength, ridgeMaxLength, ridgeRun)
             switch (dVector) {
               case 45:
                 startXPoint = currentLine.x1 + (currentLine.length / 2)
@@ -961,6 +972,9 @@ export default class QPolygon extends fabric.Group {
                 endYPoint = startYPoint
                 break
             }
+            console.log('startXPoint, startYPoint, endXPoint, endYPoint')
+            console.log(startXPoint, startYPoint, endXPoint, endYPoint)
+
             if (this.ridges.length < this.getMaxRidge(this.lines.length)) {
               const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], {
                 fontSize: this.fontSize,
@@ -969,22 +983,23 @@ export default class QPolygon extends fabric.Group {
               })
               this.addWithUpdate(ridge)
               this.ridges.push(ridge)
+
+              // 마루와 연결될 추녀마루을 그려준다.
+              const leftHip = new QLine([currentLine.x1, currentLine.y1, startXPoint, startYPoint], {
+                fontSize: this.fontSize,
+                stroke: 'red',
+                strokeWidth: 1,
+              })
+              const rightHip = new QLine([currentLine.x2, currentLine.y2, startXPoint, startYPoint], {
+                fontSize: this.fontSize,
+                stroke: 'red',
+                strokeWidth: 1,
+              })
+              this.addWithUpdate(leftHip)
+              this.addWithUpdate(rightHip)
+              this.hips.push(leftHip)
+              this.hips.push(rightHip)
             }
-            //마루와 연결될 추녀마루을 그려준다.
-            const leftHip = new QLine([currentLine.x1, currentLine.y1, startXPoint, startYPoint], {
-              fontSize: this.fontSize,
-              stroke: 'red',
-              strokeWidth: 1,
-            })
-            const rightHip = new QLine([currentLine.x2, currentLine.y2, startXPoint, startYPoint], {
-              fontSize: this.fontSize,
-              stroke: 'red',
-              strokeWidth: 1,
-            })
-            this.addWithUpdate(leftHip)
-            this.addWithUpdate(rightHip)
-            this.hips.push(leftHip)
-            this.hips.push(rightHip)
           }
         }
       },
@@ -994,7 +1009,7 @@ export default class QPolygon extends fabric.Group {
   }
 
   drawHips() {
-    let prevLine, currentLine, nextLine, endXPoint, endYPoint
+    let prevLine, currentLine, nextLine
     this.lines.forEach(
       (value, index) => {
         if (index === 0) {
@@ -1012,17 +1027,97 @@ export default class QPolygon extends fabric.Group {
           nextLine = this.lines[index + 1]
         }
         if (!this.isAlreadyHip(currentLine)) {
+          let endXPoint, endYPoint
+          let dVector = this.getDirectionForDegree(prevLine, currentLine)
+          let linesXCoordinate = []
+          console.log('hip dVector : ' + dVector)
+          switch (dVector) {
+            case 45:
+              this.lines.forEach((line) => {
+                if ((currentLine.x1 < line.x1 || currentLine.x1 < line.x2)
+                  && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
+                  console.log('line.x1 : ' + line.x1 + ' line.x2 : ' + line.x2)
+                  if (currentLine.x1 !== line.x1) {
+                    linesXCoordinate.push(line.x1)
+                  }
+                  if (currentLine.x1 !== line.x2) {
+                    linesXCoordinate.push(line.x2)
+                  }
+                }
+              })
+              break
+            case 135:
+              this.lines.forEach((line) => {
+                console.log('currentLine.x1 < line.x1 || currentLine.x1 < line.x2')
+                console.log(currentLine.x1 + '<' + line.x1 + '||' + currentLine.x1 + '<' + line.x2)
+                console.log('line.y1 < currentLine.y1 || line.y2 < currentLine.y1')
+                console.log(line.y1 + '<' + currentLine.y1 + '||' + line.y2 + '<' + currentLine.y1)
+                if ((currentLine.x1 < line.x1 || currentLine.x1 < line.x2)
+                  && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
+                  if (currentLine.x1 !== line.x1) {
+                    linesXCoordinate.push(line.x1)
+                  }
+                  if (currentLine.x1 !== line.x2) {
+                    linesXCoordinate.push(line.x2)
+                  }
+                }
+              })
+              break
+            case 225:
+              this.lines.forEach((line) => {
+                if ((line.x1 < currentLine.x1 || line.x2 < currentLine.x1)
+                  && (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) {
+                  if (currentLine.x1 !== line.x1) {
+                    linesXCoordinate.push(line.x1)
+                  }
+                  if (currentLine.x1 !== line.x2) {
+                    linesXCoordinate.push(line.x2)
+                  }
+                }
+              })
+              break
+            case 315:
+              this.lines.forEach((line) => {
+                if ((line.x1 < currentLine.x1 || line.x2 < currentLine.x1)
+                  && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
+                  if (currentLine.x1 !== line.x1) {
+                    linesXCoordinate.push(line.x1)
+                  }
+                  if (currentLine.x1 !== line.x2) {
+                    linesXCoordinate.push(line.x2)
+                  }
+                }
+              })
+              break
+          }
+
+          console.log(linesXCoordinate)
+          console.log(new Set(linesXCoordinate))
+          if (linesXCoordinate.length > 0) {
+            // linesXCoordinate = Math.min.apply(null, linesXCoordinate)
+            // linesXCoordinate = new Set(linesXCoordinate)
+            console.log(currentLine.x1, Math.min.apply(null, linesXCoordinate))
+
+          }
           this.ridges.forEach(ridge => {
             if (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)) {
               endXPoint = ridge.x1
               endYPoint = ridge.y1
-            }
+              console.log('currentLine.x1, currentLine.y1')
-            if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)) {
+              console.log(currentLine.x1, currentLine.y1)
-              endXPoint = ridge.x2
+            } else {
-              endYPoint = ridge.y2
+              if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)) {
+                endXPoint = ridge.x2
+                endYPoint = ridge.y2
+                console.log('currentLine.x2, currentLine.x2')
+                console.log(currentLine.x2, currentLine.x2)
+              } else {
+                console.log('todo')
+              }
             }
             // TODO [ljyoung] : 마루와 만나지 않는 hip 계산
           })
+          console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint)
 
           const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], {
             fontSize: this.fontSize,
@@ -1038,6 +1133,56 @@ export default class QPolygon extends fabric.Group {
     this.canvas.renderAll()
   }
 
+  /*
+    안쪽으로 들어간 모양의 기준을 잡기 위해 가장긴 x좌표와 y좌표를 구한다.
+   */
+  getLargestSquareCoordinate() {
+    let arrX = []
+    let arrY = []
+
+    this.points.forEach(point => {
+      arrX.push(point.x)
+      arrY.push(point.y)
+    })
+
+    let minX = Math.min.apply(null, arrX)
+    let minY = Math.min.apply(null, arrY)
+    let maxX = Math.max.apply(null, arrX)
+    let maxY = Math.max.apply(null, arrY)
+
+    return { minX: minX, minY: minY, maxX: maxX, maxY: maxY }
+  }
+
+  /*
+    두 선의 교차점이 존재하는지 확인한다.
+   */
+  findIntersection(line1, line2) {
+    const [x1, y1, x2, y2] = line1 // 첫 번째 선의 두 점
+    const [x3, y3, x4, y4] = line2 // 두 번째 선의 두 점
+
+    // 선의 방정식의 계수 계산
+    const A1 = y2 - y1
+    const B1 = x1 - x2
+    const C1 = A1 * x1 + B1 * y1
+
+    const A2 = y4 - y3
+    const B2 = x3 - x4
+    const C2 = A2 * x3 + B2 * y3
+
+    const determinant = A1 * B2 - A2 * B1
+
+    if (determinant === 0) {
+      // 두 선이 평행하거나 일직선일 경우
+      console.log('두 직선은 평행하거나 일직선입니다.')
+      return null
+    }
+
+    const x = (B1 * C2 - B2 * C1) / determinant
+    const y = (A1 * C2 - A2 * C1) / determinant
+
+    return { x, y }
+  }
+
   /*
     추녀마루(hip) 중복방지를 위해 마루와 함께 그려진 추녀마루를 확인한다
    */
@@ -1100,9 +1245,11 @@ export default class QPolygon extends fabric.Group {
         }
       }
     })
-    // TODO [ljyoung] : 중복라인제거
+    //중복라인제거
-    console.log(missedLine)
+    missedLine = [
-    missedLine.forEach(p => {
+      ...new Set(missedLine.map((line) => JSON.stringify(line))),
+    ].map((line) => JSON.parse(line))
+    missedLine.forEach((p, index) => {
       const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
         fontSize: this.fontSize,
         stroke: 'green',