템플릿 기둥 작업중

src/components/Roof2.jsx

@@ -208,7 +208,7 @@ export default function Roof2() {
     ]
 
     if (canvas) {
-      const polygon = new QPolygon(type2, {
+      const polygon = new QPolygon(eightPoint, {
         fill: 'transparent',
         stroke: 'black',
         strokeWidth: 1,

src/util/canvas-util.js

@@ -629,3 +629,23 @@ export function calculateDistance(point, line) {
 function calculateDistancePoint(point1, point2) {
   return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))
 }
+
+/**
+ * {x, y} 형태의 배열을 받아 중복된 점을 제거하는 함수
+ * @param points
+ * @returns {*[]}
+ */
+export function removeDuplicatePoints(points) {
+  const uniquePoints = []
+  const seen = new Set()
+
+  points.forEach((point) => {
+    const identifier = `${point.x}:${point.y}`
+    if (!seen.has(identifier)) {
+      seen.add(identifier)
+      uniquePoints.push(point)
+    }
+  })
+
+  return uniquePoints
+}

src/util/qpolygon-utils.js

@@ -1,7 +1,7 @@
 import { fabric } from 'fabric'
 import QPolygon from '@/components/fabric/QPolygon'
 import { QLine } from '@/components/fabric/QLine'
-import { calculateIntersection, calculateIntersection2, distanceBetweenPoints, findIntersection1 } from '@/util/canvas-util'
+import { calculateIntersection, calculateIntersection2, distanceBetweenPoints, findIntersection1, removeDuplicatePoints } from '@/util/canvas-util'
 
 export const defineQPloygon = () => {
   fabric.QPolygon = fabric.util.createClass(fabric.Group, {})
@@ -123,8 +123,8 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => {
     let previousIndex = index === 0 ? polygon.lines.length - 1 : index - 1
     const maxLength = Math.max(polygon.lines[index].length, polygon.lines[previousIndex].length)
 
-    newX2 = Math.floor(x1 + (maxLength / 2 + polygon.points.length * 20) * Math.cos(angle))
+    newX2 = Math.floor(x1 + (maxLength / 2 + polygon.points.length * 10) * Math.cos(angle))
-    newY2 = Math.floor(y1 + (maxLength / 2 + polygon.points.length * 20) * Math.sin(angle))
+    newY2 = Math.floor(y1 + (maxLength / 2 + polygon.points.length * 10) * Math.sin(angle))
 
     const line = new QLine([x1, y1, newX2, newY2], {
       fontSize: polygon.fontSize,
@@ -135,7 +135,6 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => {
     polygon.canvas.add(line)
     helpLines.push(line)
     polygon.canvas.renderAll()
-    debugger
   })
 
   helpLines.forEach((line, index) => {
@@ -186,22 +185,14 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => {
   // 안만나는 선들
   const notInterSectionLines = helpLines.filter((line) => !line.isAlreadyInterSection)
   const ridgeEndPoints = []
-  const interSectionPoints = []
+  let interSectionPoints = []
 
   notInterSectionLines.forEach((line, index) => {
     let subCenterLines
-    if (maxHorizontalLineLength > maxVerticalLineLength) {
+    if (Math.abs(line.degree) < 90) {
-      if (Math.abs(line.degree) < 90) {
+      subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'vertical')
-        subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'horizontal')
-      } else {
-        subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'vertical')
-      }
     } else {
-      if (Math.abs(line.degree) < 90) {
+      subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'horizontal')
-        subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'vertical')
-      } else {
-        subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'horizontal')
-      }
     }
 
     centerLines.forEach((centerLine) => {
@@ -212,33 +203,62 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => {
       }
 
       ridgeStartPoints.forEach((point) => {
-        if (Math.abs(interSectionPoint.x - point.x) <= 2 || Math.abs(interSectionPoint.y - point.y) <= 2) {
+        line.interSectionPoints.push(interSectionPoint)
-          line.interSectionPoints.push(interSectionPoint)
+        interSectionPoints.push(interSectionPoint)
-          interSectionPoints.push(interSectionPoint)
 
-          const newLine = new QLine([line.x1, line.y1, interSectionPoint.x, interSectionPoint.y], {
+        const newLine = new QLine([line.x1, line.y1, interSectionPoint.x, interSectionPoint.y], {
-            stroke: 'black',
+          stroke: 'black',
-            fontSize: polygon.fontSize,
+          fontSize: polygon.fontSize,
-          })
+        })
 
-          const circle = new fabric.Circle({
+        const circle = new fabric.Circle({
-            radius: 3,
+          radius: 3,
-            fill: 'blue',
+          fill: 'blue',
-            left: interSectionPoint.x - 3,
+          left: interSectionPoint.x - 3,
-            top: interSectionPoint.y - 3,
+          top: interSectionPoint.y - 3,
-          })
+        })
-          polygon.canvas.add(circle)
+        polygon.canvas.add(circle)
-          polygon.canvas.add(newLine)
+        polygon.canvas.add(newLine)
 
-          polygon.canvas.remove(line)
+        polygon.canvas.remove(line)
 
-          line.set({ isAlreadyInterSection: true })
+        line.set({ isAlreadyInterSection: true })
-        }
       })
     })
   })
 
-  ridgeStartPoints.forEach((point, index) => {
+  interSectionPoints = removeDuplicatePoints(interSectionPoints)
+
+  const startRidgePoint = ridgeStartPoints[0]
+
+  const endRidgePoint = ridgeStartPoints[ridgeStartPoints.length - 1]
+
+  let step = 0
+
+  while (true) {
+    if (step % 2 === 0) {
+      const nextPoint = interSectionPoints.find((point) => point.x === startRidgePoint.x || point.y === startRidgePoint.y)
+
+      if (nextPoint) {
+        const ridge = new QLine([startRidgePoint.x, startRidgePoint.y, nextPoint.x, nextPoint.y], {
+          stroke: 'green',
+          fontSize: polygon.fontSize,
+        })
+        polygon.canvas.add(ridge)
+        polygon.canvas.renderAll()
+      }
+
+      console.log('nextPoint', nextPoint)
+      console.log('startRidgePoint', startRidgePoint)
+    } else {
+    }
+
+    step++
+
+    break
+  }
+
+  /*ridgeStartPoints.forEach((point, index) => {
     for (let i = index + 1; i < ridgeStartPoints.length; i++) {
       const currentPoint = ridgeStartPoints[index]
       const nextPoint = ridgeStartPoints[i]
@@ -253,9 +273,9 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => {
         break
       }
     }
-  })
+  })*/
 
-  ridgeStartPoints.forEach((point, index) => {
+  /*ridgeStartPoints.forEach((point, index) => {
     let arrivalPoint
     let distance = Infinity
     let startPoint
@@ -285,11 +305,11 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => {
       ridgeEndPoints.push(arrivalPoint)
       polygon.canvas.add(ridge)
       polygon.canvas.add(helpLine)
-      polygon.canvas.remove(line)
+      // polygon.canvas.remove(line)
       polygon.canvas.renderAll()
       debugger
     }
-  })
+  })*/
 
   /*for (let i = 0; i < ridgeEndPoints.length; i = i + 2) {
     const currentRidgeEndPoint = ridgeEndPoints[i]
@@ -301,7 +321,6 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => {
 
     polygon.canvas.add(ridgeConnectLine)
     polygon.canvas.renderAll()
-    debugger
   }*/
 }