테스트중

src/components/fabric/QPolygon.js

@@ -23,7 +23,11 @@ export default class QPolygon extends fabric.Group {
   shape = 0 // 점 6개일때의 shape 모양
   helpPoints = []
   helpLines = []
+
   constructor(points, options, canvas) {
+    if (points.length !== 4 && points.length !== 6) {
+      throw new Error('Points must be 4 or 6.')
+    }
     if (points.length !== 4 && points.length !== 6) {
       throw new Error('Points must be 4 or 6.')
     }
@@ -69,7 +73,7 @@ export default class QPolygon extends fabric.Group {
       this.#updateLengthText()
     })
 
-    this.on('selected', function () {
+    this.on('selected', function() {
       // 모든 컨트롤 떼기
 
       Object.keys(this.controls).forEach((controlKey) => {
@@ -249,7 +253,7 @@ export default class QPolygon extends fabric.Group {
 
       let xInt =
         ((point.y - vertex1.y) * (vertex2.x - vertex1.x)) /
-          (vertex2.y - vertex1.y) +
+        (vertex2.y - vertex1.y) +
         vertex1.x
       if (xInt < point.x) {
         intersects++
@@ -328,19 +332,21 @@ export default class QPolygon extends fabric.Group {
 
   // 보조선 그리기
   drawHelpLine(chon = 4) {
+    console.log(chon)
     if (!this.isValid()) {
       return
     }
 
-    if (this.lines.length === 4) {
-      this.#drawHelpLineInRect(chon)
-    } else if (this.lines.length === 6) {
-      // TODO : 6각형
-      this.#drawHelpLineInHexagon(chon)
-    } else if (this.lines.length === 8) {
-      // TODO : 8각형
-      this.#drawHelpLineInOctagon(chon)
-    }
+    /* if (this.lines.length === 4) {
+       this.#drawHelpLineInRect(chon)
+     } else if (this.lines.length === 6) {
+       // TODO : 6각형
+       this.#drawHelpLineInHexagon(chon)
+     } else if (this.lines.length === 8) {
+       // TODO : 8각형
+       this.#drawHelpLineInOctagon(chon)
+     }*/
+    this.#drawHelpLineInOctagon(chon)
   }
 
   /**
@@ -920,5 +926,119 @@ export default class QPolygon extends fabric.Group {
     this.canvas.renderAll()
   }
 
-  #drawHelpLineInOctagon(chon) {}
+  #drawHelpLineInOctagon(chon) {
+    console.log(this.lines)
+
+    let prevLine, currentLine, nextLine
+    let point
+
+    this.lines.forEach(
+      (value, index) => {
+        if (index === 0) {
+          prevLine = this.lines[this.lines.length - 1]
+        } else {
+          prevLine = this.lines[index - 1]
+        }
+        currentLine = this.lines[index]
+
+        if (index === this.lines.length - 1) {
+          nextLine = this.lines[0]
+        } else if (index === this.lines.length) {
+          nextLine = this.lines[0]
+        } else {
+          nextLine = this.lines[index + 1]
+        }
+        // point = this.getPointBetweenLine(currentLine, nextLine)
+
+        this.getRoofRidge(prevLine, currentLine, nextLine)
+
+      },
+    )
+  }
+
+  getRoofRidge(prevLine, currentLine, nextLine) {
+    console.log(prevLine)
+    console.log(this.getLineDirection(prevLine), this.getLineDirection(currentLine), this.getLineDirection(nextLine))
+    if (this.getLineDirection(prevLine) !== this.getLineDirection(nextLine)) {
+
+    }
+  }
+
+  getPointBetweenLine(line1, line2) {
+    let dVector = this.getDirectionForDegree(line1, line2)
+    let xp = line1.x2, yp = line1.y2
+
+    console.log(xp, yp)
+
+    // let alpha = 45.0 * Math.PI / 180
+    // let a = c * Math.sin(alpha)
+
+    switch (dVector) {
+      case 45:
+
+        break
+    }
+
+    return 'a'
+  }
+
+  getDirectionForDegree(line1, line2) {
+    let degree = this.getLineDirection(line1) + this.getLineDirection(line2)
+    let vector
+
+    switch (degree) {
+      case 'rb':
+        vector = 45
+        break
+      case 'br':
+        vector = 45
+        break
+      case  'lb':
+        vector = 135
+        break
+      case  'bl':
+        vector = 135
+        break
+      case  'lt':
+        vector = 225
+        break
+      case 'tl':
+        vector = 225
+        break
+      case  'rt':
+        vector = 315
+        break
+      case  'tr':
+        vector = 315
+        break
+    }
+
+    return vector
+  }
+
+  getLineDirection(line) {
+    let x1, x2, y1, y2, xp, yp
+    x1 = Math.round(line.x1)
+    x2 = Math.round(line.x2)
+    y1 = Math.round(line.y1)
+    y2 = Math.round(line.y2)
+
+    xp = x1 - x2
+    yp = y1 - y2
+
+    if (xp === 0) {
+      if (yp < 0) {
+        return 'b'
+      } else {
+        return 't'
+      }
+    }
+    if (yp === 0) {
+      if (xp < 0) {
+        return 'r'
+      } else {
+        return 'l'
+      }
+    }
+  }
 }