import 정리

src/components/Roof2.jsx

@@ -6,10 +6,10 @@ import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
 
 import RangeSlider from './ui/RangeSlider'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState } from 'recoil'
-import { canvasAtom, canvasListState, canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
+import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
-import { getTests, getCanvasState, insertCanvasState } from '@/lib/canvas'
+import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection2 } from '@/util/canvas-util'
 
 export default function Roof2() {
@@ -208,7 +208,7 @@ export default function Roof2() {
     ]
 
     if (canvas) {
-      const polygon = new QPolygon(type1, {
+      const polygon = new QPolygon(eightPoint, {
         fill: 'transparent',
         stroke: 'black',
         strokeWidth: 1,

src/components/fabric/QLine.js

@@ -1,5 +1,5 @@
 import { fabric } from 'fabric'
-import { getDirection, getDirectionByPoint } from '@/util/canvas-util'
+import { getDirectionByPoint } from '@/util/canvas-util'
 
 export class QLine extends fabric.Group {
   line

src/util/qpolygon-utils.js

@@ -1,19 +1,7 @@
 import { fabric } from 'fabric'
 import QPolygon from '@/components/fabric/QPolygon'
 import { QLine } from '@/components/fabric/QLine'
-import {
+import { calculateIntersection2, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
-  calculateDistance,
-  calculateIntersection,
-  calculateIntersection2,
-  distanceBetweenPoints,
-  findClosestLineToPoint,
-  findClosestPoint,
-  findClosestPointWithDifferentXY,
-  findIntersection1,
-  getRoofHypotenuse,
-  removeDuplicatePoints,
-} from '@/util/canvas-util'
-import { help } from 'mathjs'
 
 export const defineQPloygon = () => {
   fabric.QPolygon = fabric.util.createClass(fabric.Group, {})
@@ -58,7 +46,9 @@ export const drawHelpLineInHexagon = (polygon, chon) => {
     const angle1 = Math.atan2(wallLine.y1 - line.y1, wallLine.x1 - line.x1)
     const angle2 = Math.atan2(wallLine.y2 - line.y2, wallLine.x2 - line.x2)
 
-    const helpLineLength = Math.min(line.length)
+    // line을 이등변 삼각형의 밑변으로 보고 높이를 구한다.
+
+    const helpLineLength = Math.sqrt(Math.pow(line.length, 2) - Math.pow(line.length / 2, 2)) - 50
 
     const firstX2 = Math.floor(line.x1 + helpLineLength * Math.cos(angle1))
     const firstY2 = Math.floor(line.y1 + helpLineLength * Math.sin(angle1))
@@ -142,6 +132,7 @@ export const drawHelpLineInHexagon = (polygon, chon) => {
   helpLines = helpLines.filter((line) => line.relatedPoints?.length > 0)
 
   ridgeStartPoints.forEach((point) => {
+    point.alreadyIntersected = false
     // x 혹은 y가 같으면서 가장 가까운 점을 찾는다.
     let arrivalPoint
     let hipLine
@@ -183,6 +174,8 @@ export const drawHelpLineInHexagon = (polygon, chon) => {
 
       polygon.canvas.renderAll()
       ridgeEndPoints.push(arrivalPoint)
+
+      point.alreadyIntersected = true
     }
   })
 
@@ -241,6 +234,21 @@ export const drawHelpLineInHexagon = (polygon, chon) => {
     polygon.canvas.add(line)
     polygon.canvas.renderAll()
   }
+
+  const notIntersectedRidgeStartPoints = ridgeStartPoints.filter((point) => !point.alreadyIntersected)
+  // 만나지 않은 마루 시작점
+  while (notIntersectedRidgeStartPoints.length > 0) {
+    const point = notIntersectedRidgeStartPoints.shift()
+    const closestPoint = findClosestPoint(point, notIntersectedRidgeStartPoints)
+    if (!closestPoint) continue
+    const line = new QLine([point.x, point.y, closestPoint.x, closestPoint.y], {
+      stroke: 'purple',
+      fontSize: polygon.fontSize,
+    })
+
+    polygon.canvas.add(line)
+    polygon.canvas.renderAll()
+  }
 }
 
 export const drawCenterLines = (polygon) => {