From 4b3a18eec646b4518db3ad3922e2b55550ea7e16 Mon Sep 17 00:00:00 2001 From: Jaeyoung Lee Date: Thu, 18 Jul 2024 17:23:41 +0900 Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/fabric/QPolygon.js | 144 +++++++++++++++++++++++++++--- 1 file changed, 132 insertions(+), 12 deletions(-) diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 93d39298..e928ba3f 100644 --- a/src/components/fabric/QPolygon.js +++ b/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' + } + } + } }