다각형 모임지붕 계산 중

src/components/Roof2.jsx

@@ -10,7 +10,6 @@ import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import offsetPolygon from '@/util/qpolygon-utils'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
@@ -276,7 +275,7 @@ export default function Roof2() {
       { x: 450, y: 850 },
     ]
 
-    const polygon = new QPolygon(eightPoint3, {
+    const polygon = new QPolygon(type1, {
       fill: 'transparent',
       stroke: 'green',
       strokeWidth: 1,

src/components/fabric/QPolygon.js

@@ -2,7 +2,7 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, dividePolygon, drawHelpLineInHexagon,drawHippedRoof } from '@/util/qpolygon-utils'
+import { calculateAngle, drawHippedRoof } from '@/util/qpolygon-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -356,6 +356,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     })
   },
   divideLine() {
-    dividePolygon(this)
+    //dividePolygon(this)
   },
 })

src/util/qpolygon-utils.js

@@ -1,6 +1,13 @@
 import { fabric } from 'fabric'
 import { QLine } from '@/components/fabric/QLine'
-import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDirectionByPoint, getAdjacent, getRoofHypotenuse } from '@/util/canvas-util'
+import {
+  calculateIntersection,
+  distanceBetweenPoints,
+  findClosestPoint,
+  getAdjacent,
+  getDirectionByPoint,
+  getRoofHypotenuse,
+} from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 
 const TWO_PI = Math.PI * 2
@@ -957,7 +964,7 @@ export default function offsetPolygon(vertices, offset) {
 
 export const drawHippedRoof = (polygon, chon) => {
   drawRoofRidge(polygon)
-  // drawHips(polygon)
+  drawHips(polygon)
   // connectLinePoint(polygon)
 }
 /*마루 그리기
@@ -1081,14 +1088,20 @@ const drawRoofRidge = (polygon) => {
 
       let ridgeLengthToWall, ridgeBaseLength, ridgeLengthToAcrossLine, ridgeMaxLength
 
+      console.log('currentWall : ', currentWall.length)
+      console.log('innerPointLine : ', innerPointLine)
       if (innerPointLine !== undefined) {
         if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
+          console.log('currentWall : ', currentWall)
+          console.log('acrossLine : ', acrossLine)
           if (innerPointLine.y1 === innerPointLine.y2) {
-            ridgeBaseLength =
+            console.log('innerPointLine : ', innerPointLine)
-              Math.abs(currentWall.y1 - innerPointLine.y1) < Math.abs(currentWall.y1 - innerPointLine.y2)
+            ridgeBaseLength = Math.abs(currentWall.y1 - innerPointLine.y1)
-                ? Math.abs(currentWall.y1 - innerPointLine.y1)
-                : Math.abs(currentWall.y1 - innerPointLine.y2)
             ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength
+            ridgeLengthToWall = Math.min(
+              Math.max(Math.abs(currentWall.x1 - innerPointLine.x1), Math.abs(currentWall.x1 - innerPointLine.x2)),
+              ridgeLengthToWall,
+            )
             ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1)
             ridgeMaxLength = Math.max(
               prevWall.length,
@@ -1105,6 +1118,16 @@ const drawRoofRidge = (polygon) => {
             ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1)
             ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1))
           }
+          console.log(
+            'ridgeBaseLength : ',
+            ridgeBaseLength,
+            ' ridgeLengthToWall : ',
+            ridgeLengthToWall,
+            ' ridgeLengthToAcrossLine : ',
+            ridgeLengthToAcrossLine,
+            'ridgeMaxLength : ',
+            ridgeMaxLength,
+          )
           if (ridgeBaseLength > 0) {
             if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
               if (nextWall.direction === 'right') {
@@ -1121,7 +1144,7 @@ const drawRoofRidge = (polygon) => {
                 endXPoint = acrossLine.x1 - ridgeBaseLength / 2
               }
               if (nextWall.direction === 'left') {
-                startXPoint = currentWall.x1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2
+                startXPoint = acrossLine.x1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2
                 endXPoint = startXPoint - ridgeLengthToAcrossLine
               }
             }
@@ -1136,10 +1159,15 @@ const drawRoofRidge = (polygon) => {
           }
         }
         if (currentWall.direction === 'right' || currentWall.direction === 'left') {
+          console.log('currentWall.length : ', currentWall.length)
           if (innerPointLine.x1 === innerPointLine.x2) {
             ridgeBaseLength = Math.abs(currentWall.x1 - innerPointLine.x1)
             ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength
             ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1)
+            ridgeLengthToWall = Math.min(
+              Math.max(Math.abs(currentWall.y1 - innerPointLine.y1), Math.abs(currentWall.y1 - innerPointLine.y2)),
+              ridgeLengthToWall,
+            )
             ridgeMaxLength = Math.max(
               prevWall.length,
               nextWall.length,
@@ -1155,6 +1183,14 @@ const drawRoofRidge = (polygon) => {
             ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1)
             ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.y1 - acrossLine.y1))
           }
+          console.log(
+            'ridgeBaseLength : ',
+            ridgeBaseLength,
+            ' ridgeLengthToWall : ',
+            ridgeLengthToWall,
+            ' ridgeLengthToAcrossLine : ',
+            ridgeLengthToAcrossLine,
+          )
           if (ridgeBaseLength > 0) {
             if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
               if (nextWall.direction === 'top') {
@@ -1250,6 +1286,7 @@ const drawRoofRidge = (polygon) => {
           }
         }
       }
+      console.log(startXPoint, startYPoint, endXPoint, endYPoint)
       if (
         // polygon.ridges.length < getMaxRidge(lines.length) &&
         ridgeBaseLength <= ridgeMaxLength &&
@@ -1274,6 +1311,7 @@ const drawRoofRidge = (polygon) => {
   })
   //중복 제거
   polygon.ridges = polygon.ridges.filter((ridge, index, self) => index === self.findIndex((t) => t.x1 === ridge.x1 && t.y1 === ridge.y1))
+  console.log('polygon.ridges', polygon.ridges)
 }
 const drawHips = (polygon) => {
   /*
@@ -1786,6 +1824,8 @@ const drawHips = (polygon) => {
 
       adjacent = getAdjacent(hypotenuse)
 
+      console.log('dVector : ', dVector)
+
       switch (dVector) {
         case 45:
           endXPoint = currentLine.x1 + adjacent
@@ -1818,86 +1858,6 @@ const drawHips = (polygon) => {
   // this.canvas.renderAll()
 }
 
-const getRoofBaseLine = (polygon, prevLine, currentLine, nextLine, dVector) => {
-  let minX = Math.min(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
-  let maxX = Math.max(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
-  let minY = Math.min(currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2)
-  let maxY = Math.max(currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2)
-
-  let lineCoordinate = [
-    { x: minX, y: minY },
-    { x: minX, y: maxY },
-    { x: maxX, y: maxY },
-    { x: maxX, y: minY },
-  ]
-
-  let innerPointLine = polygon.lines.filter((line) => {
-    if (getPointInPolygon(lineCoordinate, { x: line.x1, y: line.y1 })) {
-      return line
-    }
-  })
-
-  let coordinateLength
-  let innerPointX
-
-  console.log('innerPointLine : ', innerPointLine)
-
-  if (innerPointLine.length > 0) {
-    innerPointX = innerPointLine.reduce((a, b) => {
-      return a.x1 < b.x1 ? a : b
-    })
-  }
-
-  if (dVector === 45 || dVector === 225) {
-    if (innerPointX !== undefined) {
-      coordinateLength = Math.abs(currentLine.y1 - innerPointX.y1)
-    } else {
-      coordinateLength = Math.abs(lineCoordinate[0].y - lineCoordinate[2].y)
-    }
-    //계산된 좌표길이가 마루를 작성 할 최소 기준에 미치지 못하면 그릴수 없다.
-    if (coordinateLength < currentLine.length) {
-      return {
-        minLineLength: coordinateLength,
-        currentLineLength: currentLine.length,
-        maxLineLength: coordinateLength,
-      }
-    } else {
-      return {
-        minLineLength: Math.min(prevLine.length, nextLine.length),
-        currentLineLength: currentLine.length,
-        maxLineLength: coordinateLength,
-      }
-    }
-  }
-  if (dVector === 135 || dVector === 315) {
-    if (innerPointX !== undefined) {
-      coordinateLength = Math.abs(currentLine.x1 - innerPointX.x1)
-    } else {
-      coordinateLength = Math.abs(lineCoordinate[0].x - lineCoordinate[2].x)
-    }
-    //계산된 좌표길이가 마루를 작성 할 최소 기준에 미치지 못하면 그릴수 없다.
-    if (coordinateLength < currentLine.length) {
-      return {
-        minLineLength: coordinateLength,
-        currentLineLength: currentLine.length,
-        maxLineLength: coordinateLength,
-      }
-    } else {
-      return {
-        minLineLength: Math.min(prevLine.length, nextLine.length),
-        currentLineLength: currentLine.length,
-        maxLineLength: coordinateLength,
-      }
-    }
-  }
-
-  return {
-    minLineLength: 0,
-    currentLineLength: currentLine.length,
-    maxLineLength: 0,
-  }
-}
-
 const getPointInPolygon = (polygon, point) => {
   let inside = false
   let minX = Math.min(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x),
@@ -1999,18 +1959,32 @@ const connectLinePoint = (polygon) => {
       missedPoints.push({ x: ridge.x2, y: ridge.y2 })
     }
   })
+
+  console.log('missedPoints : ', missedPoints)
+  console.log(
+    polygon.hips.filter((hip) => {
+      let count = 0
+      count += polygon.ridges.filter((ridge) => (ridge.x1 === hip.x2 && ridge.y1 === hip.y2) || (ridge.x2 === hip.x2 && ridge.y2 === hip.y2)).length
+
+      count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length
+      if (count < 3) {
+        return hip
+      }
+    }),
+  )
   //추녀마루
   polygon.hips.forEach((hip) => {
     let count = 0
     count += polygon.ridges.filter((ridge) => (ridge.x1 === hip.x2 && ridge.y1 === hip.y2) || (ridge.x2 === hip.x2 && ridge.y2 === hip.y2)).length
-    count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length
 
+    count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length
     if (count < 3) {
       missedPoints.push({ x: hip.x2, y: hip.y2 })
     }
   })
 
   let missedLine = []
+  console.log('missedPoints : ', missedPoints)
 
   //중복포인트제거
   missedPoints = [...new Set(missedPoints.map((line) => JSON.stringify(line)))].map((line) => JSON.parse(line))
@@ -2050,14 +2024,14 @@ const connectLinePoint = (polygon) => {
   missedLine.forEach((p, index) => {
     const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
       fontSize: polygon.fontSize,
-      stroke: 'green',
+      stroke: 'purple',
       strokeWidth: 1,
     })
     polygon.canvas.add(line)
     polygon.innerLines.push(line)
   })
 
-  missedPoints = []
+  /*missedPoints = []
   missedLine = []
 
   polygon.innerLines.forEach((line, index) => {
@@ -2117,7 +2091,7 @@ const connectLinePoint = (polygon) => {
     })
     polygon.canvas.add(line)
     polygon.innerLines.push(line)
-  })
+  })*/
 }
 
 /*