테스트중

src/components/Roof2.jsx

@@ -6,7 +6,7 @@ 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 { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 
@@ -179,8 +179,19 @@ export default function Roof2() {
       { x: 1088, y: 991 },
       { x: 1088, y: 42 },
     ]
+
+    const eightPoint = [
+      { x: 240, y: 130 },
+      { x: 240, y: 630 },
+      { x: 640, y: 630 },
+      { x: 640, y: 480 },
+      { x: 440, y: 480 },
+      { x: 440, y: 280 },
+      { x: 740, y: 280 },
+      { x: 740, y: 130 },
+    ]
     if (canvas) {
-      const polygon = new QPolygon(type4, {
+      const polygon = new QPolygon(eightPoint, {
         fill: 'transparent',
         stroke: 'black',
         strokeWidth: 1,
@@ -226,7 +237,7 @@ export default function Roof2() {
   }
 
   const addBackgroundInPolygon = (polygon) => {
-    fabric.Image.fromURL('assets/img/check2.png', function (img) {
+    fabric.Image.fromURL('assets/img/check2.png', function(img) {
       // 패턴 객체를 생성합니다.
       const pattern = new fabric.Pattern({
         source: img.getElement(),
@@ -260,7 +271,8 @@ export default function Roof2() {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
-            <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={fillCellInPolygon}>
+            <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`}
+                    onClick={fillCellInPolygon}>
               모드 DEFAULT
             </Button>
             <Button
@@ -270,25 +282,32 @@ export default function Roof2() {
             >
               기준선 긋기 모드
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.EDIT)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`}
+                    onClick={() => changeMode(canvas, Mode.EDIT)}>
               에디팅모드
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEMPLATE)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+                    onClick={() => changeMode(canvas, Mode.TEMPLATE)}>
               템플릿(기둥)
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNA)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+                    onClick={() => changeMode(canvas, Mode.PATTERNA)}>
               템플릿(A 패턴)
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+                    onClick={() => changeMode(canvas, Mode.PATTERNB)}>
               템플릿(B 패턴)
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(1)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+                    onClick={() => drawRoofPatterns(1)}>
               지붕패턴1
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
+                    onClick={() => drawRoofPatterns(2)}>
               지붕패턴2
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`}
+                    onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>
             <Button

src/components/fabric/QPolygon.js

@@ -893,7 +893,7 @@ export default class QPolygon extends fabric.Group {
 
   #drawHelpLineInOctagon(chon) {
     this.drawRoofRidge()
-    this.drawHips()
+    // this.drawHips()
     // this.connectLinePoint()
   }
 
@@ -910,7 +910,7 @@ export default class QPolygon extends fabric.Group {
     let dVector, ridgeMaxLength, ridgeMinLength, ridgeRun
 
     let maxSquare = this.getLargestSquareCoordinate()
-    console.log(maxSquare)
+    // console.log(maxSquare)
 
     this.lines.forEach(
       (value, index) => {
@@ -935,72 +935,84 @@ export default class QPolygon extends fabric.Group {
           nextWall = this.wall.lines[index + 1]
         }
 
-        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)
+          dVector = this.getDirectionForDegree(prevLine, currentLine)
-          console.log(currentWall.length <= nextWall.length)
+          let prevLineLength, currentLineLength, nextLineLength
-          if (currentWall.length <= prevWall.length && currentWall.length <= nextWall.length) {
-            ridgeMaxLength = Math.min(prevLine.length, nextLine.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)
-                startYPoint = currentLine.y1 - (currentLine.length / 2)
-                endXPoint = startXPoint
-                endYPoint = startYPoint - ridgeRun
-                break
-              case 135:
-                startXPoint = currentLine.x1 + (currentLine.length / 2)
-                startYPoint = currentLine.y1 + (currentLine.length / 2)
-                endXPoint = startXPoint + ridgeRun
-                endYPoint = startYPoint
-                break
-              case 225:
-                startXPoint = currentLine.x1 - (currentLine.length / 2)
-                startYPoint = currentLine.y1 + (currentLine.length / 2)
-                endXPoint = startXPoint
-                endYPoint = startYPoint + ridgeRun
-                break
-              case 315:
-                startXPoint = currentLine.x1 - (currentLine.length / 2)
-                startYPoint = currentLine.y1 - (currentLine.length / 2)
-                endXPoint = startXPoint - ridgeRun
-                endYPoint = startYPoint
-                break
-            }
-            console.log('startXPoint, startYPoint, endXPoint, endYPoint')
-            console.log(startXPoint, startYPoint, endXPoint, endYPoint)
 
-            if (this.ridges.length < this.getMaxRidge(this.lines.length)) {
+          this.getRoofBaseLine(prevLine, currentLine, nextLine, dVector)
-              const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], {
-                fontSize: this.fontSize,
-                stroke: 'blue',
-                strokeWidth: 1,
-              })
-              this.addWithUpdate(ridge)
-              this.ridges.push(ridge)
 
-              // 마루와 연결될 추녀마루을 그려준다.
+
-              const leftHip = new QLine([currentLine.x1, currentLine.y1, startXPoint, startYPoint], {
+          // let acrossLine = this.getAcrossLine(currentLine, dVector)
-                fontSize: this.fontSize,
+          // if (acrossLine !== null) {
-                stroke: 'red',
+          //   console.log(currentWall.length - acrossLine.length)
-                strokeWidth: 1,
+          //   console.log('acrossLine : ' + acrossLine.length)
-              })
+          //   console.log((currentWall.length - acrossLine.length) + '<=' + prevWall.length + '&&' + (currentWall.length - acrossLine.length) + '<=' + nextWall.length)
-              const rightHip = new QLine([currentLine.x2, currentLine.y2, startXPoint, startYPoint], {
+          // }
-                fontSize: this.fontSize,
+          // 마루는 세개의 벽중에서 가장 길 수 없다.
-                stroke: 'red',
+          /* if ((currentWall.length <= prevWall.length && currentWall.length <= nextWall.length)
-                strokeWidth: 1,
+             // || (acrossLine !== null && (currentWall.length - acrossLine.length <= prevWall.length || currentWall.length - acrossLine.length <= nextWall.length))
-              })
+           ) {
-              this.addWithUpdate(leftHip)
+
-              this.addWithUpdate(rightHip)
+             console.log('currentLine.length : ' + currentLine.length)
-              this.hips.push(leftHip)
+             ridgeMaxLength = Math.min(prevLine.length, nextLine.length)
-              this.hips.push(rightHip)
+             ridgeMinLength = Math.max(prevLine.length, nextLine.length) - currentLine.length
-            }
+             ridgeRun = ridgeMinLength < ridgeMaxLength ? ridgeMinLength : ridgeMaxLength
-          }
+             console.log(ridgeMinLength, ridgeMaxLength, ridgeRun)
+             switch (dVector) {
+               case 45:
+                 startXPoint = currentLine.x1 + (currentLine.length / 2)
+                 startYPoint = currentLine.y1 - (currentLine.length / 2)
+                 endXPoint = startXPoint
+                 endYPoint = startYPoint
+                 break
+               case 135:
+                 startXPoint = currentLine.x1 + (currentLine.length / 2)
+                 startYPoint = currentLine.y1 + (currentLine.length / 2)
+                 endXPoint = startXPoint
+                 endYPoint = startYPoint
+                 break
+               case 225:
+                 startXPoint = currentLine.x1 - (currentLine.length / 2)
+                 startYPoint = currentLine.y1 + (currentLine.length / 2)
+                 endXPoint = startXPoint
+                 endYPoint = startYPoint
+                 break
+               case 315:
+                 startXPoint = currentLine.x1 - (currentLine.length / 2)
+                 startYPoint = currentLine.y1 - (currentLine.length / 2)
+                 endXPoint = startXPoint
+                 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,
+                 stroke: 'blue',
+                 strokeWidth: 1,
+               })
+               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)
+             }
+           }*/
         }
       },
     )
@@ -1035,8 +1047,7 @@ export default class QPolygon extends fabric.Group {
             case 45:
               this.lines.forEach((line) => {
                 if ((currentLine.x1 < line.x1 || currentLine.x1 < line.x2)
-                  && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
+                  && (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) {
-                  console.log('line.x1 : ' + line.x1 + ' line.x2 : ' + line.x2)
                   if (currentLine.x1 !== line.x1) {
                     linesXCoordinate.push(line.x1)
                   }
@@ -1048,10 +1059,6 @@ export default class QPolygon extends fabric.Group {
               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) {
@@ -1066,7 +1073,7 @@ export default class QPolygon extends fabric.Group {
             case 225:
               this.lines.forEach((line) => {
                 if ((line.x1 < currentLine.x1 || line.x2 < currentLine.x1)
-                  && (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) {
+                  && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
                   if (currentLine.x1 !== line.x1) {
                     linesXCoordinate.push(line.x1)
                   }
@@ -1079,7 +1086,7 @@ export default class QPolygon extends fabric.Group {
             case 315:
               this.lines.forEach((line) => {
                 if ((line.x1 < currentLine.x1 || line.x2 < currentLine.x1)
-                  && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
+                  && (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) {
                   if (currentLine.x1 !== line.x1) {
                     linesXCoordinate.push(line.x1)
                   }
@@ -1090,33 +1097,59 @@ export default class QPolygon extends fabric.Group {
               })
               break
           }
-
+          console.log('dVector : ', dVector)
-          console.log(linesXCoordinate)
+          console.log('currentLine.x1 : ' + currentLine.x1 + ' , linesXCoordinate :', Math.min.apply(null, linesXCoordinate))
-          console.log(new Set(linesXCoordinate))
+          let lineMaxHypotenuse
           if (linesXCoordinate.length > 0) {
-            // linesXCoordinate = Math.min.apply(null, linesXCoordinate)
+            lineMaxHypotenuse = Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - Math.min.apply(null, linesXCoordinate))))
-            // linesXCoordinate = new Set(linesXCoordinate)
+            console.log(currentLine.x1, lineMaxHypotenuse)
-            console.log(currentLine.x1, Math.min.apply(null, linesXCoordinate))
-
           }
+          console.log('lineMaxHypotenuse : ', lineMaxHypotenuse)
+
           this.ridges.forEach(ridge => {
-            if (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)) {
+            console.log('getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1)) : ' + Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) + ' <=  lineMaxHypotenuse : ' + lineMaxHypotenuse)
+            if (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)
+              && Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) {
               endXPoint = ridge.x1
               endYPoint = ridge.y1
-              console.log('currentLine.x1, currentLine.y1')
+              console.log('X1')
-              console.log(currentLine.x1, currentLine.y1)
-            } else {
-              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 계산
+            if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)
+              && getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) {
+              endXPoint = ridge.x2
+              endYPoint = ridge.y2
+              console.log('X2')
+            }
+
           })
+          // TODO [ljyoung] : 마루와 만나지 않는 hip 계산
+          console.log('endXPoint : ' + endXPoint + ' , endYPoint : ' + endYPoint)
+          if (endXPoint === undefined || endYPoint === undefined) {
+            console.log('todo')
+            // endXPoint = currentLine.x1 + lineMaxHypotenuse / 2
+            // endYPoint = currentLine.y1 + lineMaxHypotenuse / 2
+            console.log('currentLine.x1 : ' + currentLine.x1 + ' , ' +
+              'this.getReverseHypothenuse(lineMaxHypotenuse): ' + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+            switch (dVector) {
+              case 45:
+                endXPoint = Math.abs(currentLine.x1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+                endYPoint = Math.abs(currentLine.y1 - this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+                break
+              case 135:
+                endXPoint = Math.abs(currentLine.x1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+                endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+                break
+              case 225:
+                endXPoint = Math.abs(currentLine.x1 - this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+                endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+                break
+              case 315:
+                endXPoint = Math.abs(currentLine.x1 - this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+                endYPoint = Math.abs(currentLine.y1 - this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
+                break
+            }
+          }
+          console.log(currentLine)
           console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint)
 
           const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], {
@@ -1129,7 +1162,6 @@ export default class QPolygon extends fabric.Group {
         }
       },
     )
-
     this.canvas.renderAll()
   }
 
@@ -1153,6 +1185,199 @@ export default class QPolygon extends fabric.Group {
     return { minX: minX, minY: minY, maxX: maxX, maxY: maxY }
   }
 
+  /*
+    피타고라스 정리를 이용하여 빗변의 길이를 알때 나머지 변의 길이를 구한다.
+   */
+  getReverseHypotenuse(line) {
+    return Math.sqrt(Math.pow(line, 2) / 2)
+  }
+
+  getRoofBaseLine(prevLine, currentLine, nextLine, dVector) {
+    let prevLineLength, currentLineLength, nextLineLength
+
+    let objectX = {}
+    let objectY = {}
+    let arrLine = []
+
+    let currentPolygon = []
+    const testXArr = [currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2]
+    const testYArr = [currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2]
+    let minX = Math.min.apply(null, testXArr)
+    let maxX = Math.max.apply(null, testXArr)
+    let minY = Math.min.apply(null, testYArr)
+    let maxY = Math.max.apply(null, testYArr)
+    let inside = false
+
+    console.log('testXArr : ' + testXArr, 'min : ', Math.min.apply(null, testXArr), 'max : ', Math.max.apply(null, testXArr))
+    console.log('testYArr : ' + testYArr, 'min : ', Math.min.apply(null, testYArr), 'max : ', Math.max.apply(null, testYArr))
+
+    console.log('currentLine.length : ' + currentLine.length, 'dVector : ' + dVector)
+    console.log('x1,y1 :', currentLine.x1, currentLine.y1, ', x2,y2 : ', currentLine.x2
+      , currentLine.y2, ', x3,y3 : ', nextLine.x2, nextLine.y2, ', x4,y4 : ', prevLine.x1, prevLine.y1)
+
+    //X좌표 기준점을 구한다.
+    objectX = { x1: currentLine.x1, x2: currentLine.x2, x3: nextLine.x2, x4: prevLine.x1 }
+    //Y좌표 기준점을 구한다.
+    objectY = { y1: currentLine.y1, y2: currentLine.y2, y3: nextLine.y2, y4: prevLine.y1 }
+
+    console.log('objectX : ', objectX)
+    console.log('objectY : ', objectY)
+
+    let lineDirection = this.getLineDirection(currentLine)
+
+    arrLine = this.lines.filter((line) => {
+      console.log('line.length : ' + line.length)
+      console.log(minX < line.x1 && line.x2 < maxX && minY < line.y1 && line.y2 < maxY)
+      return minX < line.x1 && line.x2 < maxX && minY < line.y1 && line.y2 < maxY
+      /*   if (dVector === 45 || dVector === 135) {
+           console.log('objectX.x1 < line.x1 && objectX.x1 < line.x2', objectX.x1 < line.x1, objectX.x1 < line.x2)
+           console.log('objectY.y1, objectY.y3, line.y1 =', objectY.y1, objectY.y3, line.y1)
+           console.log('objectY.y1, objectY.y4, line.y2 =', objectY.y1, objectY.y4, line.y2)
+           console.log('this.isBetween(objectY.y1, objectY.y3, line.y1) :', this.isBetween(objectY.y1, objectY.y3, line.y1))
+           console.log('this.isBetween(objectY.y1, objectY.y4, line.y2) : ', this.isBetween(objectY.y1, objectY.y4, line.y2))
+           console.log((objectX.x1 < line.x1 && objectX.x1 < line.x2)
+             && (this.isBetween(objectY.y1, objectY.y2, line.y1) || this.isBetween(objectY.y1, objectY.y2, line.y1)))
+           return (objectX.x1 < line.x1 && objectX.x1 < line.x2)
+             && (this.isBetween(objectY.y1, objectY.y3, line.y1) || this.isBetween(objectY.y1, objectY.y4, line.y2))
+         }
+         if (dVector === 225 || dVector === 315) {
+           console.log('objectY.y1 < line.y1 && objectY.y1 < line.y2', objectY.y1 < line.y1, objectY.y1 < line.y2)
+           console.log('objectX.x1, objectX.x3, line.x1 =', objectX.x1, objectX.x3, line.x1)
+           console.log('objectX.x1, objectX.x4, line.x2 =', objectX.x1, objectX.x4, line.x2)
+           console.log((objectY.y1 < line.y1 && objectY.y1 < line.y2)
+             && (this.isBetween(objectX.x1, objectX.x3, line.x1) || this.isBetween(objectX.x1, objectX.x4, line.x2)))
+           return (objectY.y1 < line.y1 && objectY.y1 < line.y2)
+             && (this.isBetween(objectX.x1, objectX.x3, line.x1) || this.isBetween(objectX.x1, objectX.x4, line.x2))
+         }*/
+    })
+
+    console.log('arrLine : ' + arrLine.length)
+
+    function isPointInPolygon(polygon, point) {
+      const [x, y] = point
+      let inside = false
+
+      for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        const [xi, yi] = polygon[i]
+        const [xj, yj] = polygon[j]
+
+        const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)
+        if (intersect) inside = !inside
+      }
+
+      return inside
+    }
+
+  }
+
+  /*
+  a와 b 사이에 c가 있는지 확인한다.
+   */
+  isBetween(a, b, c) {
+    return (a < c && c < b) || (b < c && c < a)
+  }
+
+  /*
+    라인과 마주하는 다른 라인과의 가장 가까운 거리를 구한다.
+   */
+  getAcrossLine(currentLine, dVector) {
+    let lineDirection = this.getLineDirection(currentLine)
+    let acrossLines = []
+
+    if (lineDirection === 't' || lineDirection === 'b') {
+      if (dVector === 45 || dVector === 135) {
+        console.log('45, 135 : currentLine을 기준으로 오른쪽에서 찾는다.')
+        acrossLines = this.lines.filter(line => {
+          if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r')
+            && (currentLine.x1 < line.x1 || currentLine.x1 < line.x2)) {
+            return line
+          }
+        })
+        if (acrossLines.length > 0) {
+          acrossLines = acrossLines.reduce((a, b) => {
+            return a.x1 < b.x1 ? a : b
+          })
+        }
+      }
+      if (dVector === 225 || dVector === 315) {
+        console.log('225, 315 : currentLine을 기준으로 왼쪽에서 찾는다.')
+        acrossLines = this.lines.filter(line => {
+          if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r')
+            && (line.x1 < currentLine.x1 || line.x2 < currentLine.x1)) {
+            return line
+          }
+        })
+        if (acrossLines.length > 0) {
+          acrossLines = acrossLines.reduce((a, b) => {
+            return b.x1 < a.x1 ? a : b
+          })
+        }
+      }
+    }
+    if (lineDirection === 'l' || lineDirection === 'r') {
+      if (dVector === 45 || dVector === 315) {
+        console.log('45, 315 : currentLine을 기준으로 위에서 찾는다.')
+        acrossLines = this.lines.filter(line => {
+          if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b')
+            && (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) {
+            console.log(line)
+            return line
+          }
+        })
+        if (acrossLines.length > 0) {
+          acrossLines = acrossLines.reduce((a, b) => {
+            return b.y1 < a.y1 ? a : b
+          })
+        }
+      }
+      if (dVector === 135 || dVector === 225) {
+        console.log('135, 225 : currentLine을 기준으로 아래에서 찾는다.')
+        acrossLines = this.lines.filter(line => {
+          if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b')
+            && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
+            return line
+          }
+        })
+        if (acrossLines.length > 0) {
+          acrossLines = acrossLines.reduce((a, b) => {
+            return a.y1 < b.y1 ? a : b
+          })
+        }
+      }
+    }
+
+    console.log('acrossLines : ', acrossLines)
+    if (acrossLines.length > 0) {
+      if (lineDirection === 't' || lineDirection === 'b') {
+        // 현재 라인의 y1, y2의 최소값과 최대값으로 정렬한다.
+        const [minY, maxY] = currentLine.y1 < currentLine.y2 ? [currentLine.y1, currentLine.y2] : [currentLine.y2, currentLine.y1]
+        const y1InRange = acrossLines.y1 < maxY && acrossLines.y1 > minY
+        const y2InRange = acrossLines.y2 < maxY && acrossLines.y2 > minY
+
+        // console.log('y1InRange : ' + y1InRange, 'y1InRange : ' + y1InRange)
+        if (y1InRange && y2InRange) {
+          return null
+        } else {
+          return acrossLines
+        }
+      }
+      if (lineDirection === 'r' || lineDirection === 'l') {
+        const [minX, maxX] = currentLine.x1 < currentLine.x2 ? [currentLine.x1, currentLine.x2] : [currentLine.x2, currentLine.x1]
+        const x1InRange = acrossLines.x1 < maxX && acrossLines.x1 > minX
+        const x2InRange = acrossLines.x2 < maxX && acrossLines.x2 > minX
+        console.log('x1InRange :' + x1InRange, 'x1InRange : ' + x2InRange)
+        if (x1InRange && x2InRange) {
+          console.log('null')
+          return null
+        } else {
+          console.log('acrossLines')
+          return acrossLines
+        }
+      }
+    }
+    return null
+  }
+
   /*
     두 선의 교차점이 존재하는지 확인한다.
    */
@@ -1266,12 +1491,14 @@ export default class QPolygon extends fabric.Group {
     hip의 시작은 처마꼭지점이며 끝은 마루이기 때문에 힙의 끝 좌표와 비교한다.
    */
   findConnectionLineCount(x, y) {
+    console.log(this.hips)
     let count = 0
     this.hips.forEach((hip, index) => {
       if (x === hip.x2 && y === hip.y2) {
         count++
       }
     })
+    console.log(count)
     return count
   }