diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index bfd3c787..711b1a4a 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -319,7 +319,7 @@ export default class QPolygon extends fabric.Group { this.#drawHelpLineInRect(chon) } else if (this.lines.length === 6) { // TODO : 6각형 - this.#drawHelpLineInHexagon2(chon) + this.#drawHelpLineInHexagon(chon) } else if (this.lines.length === 8) { // TODO : 8각형 this.#drawHelpLineInOctagon(chon) @@ -527,262 +527,6 @@ export default class QPolygon extends fabric.Group { } #drawHelpLineInHexagon(chon) { - let type = this.shape - - // 1 = 0, 3 - // 2 = 2, 5 - // 3 = 1, 4 - // 4 = 0, 3 - - // 라인 기준점 1,2 - let lines, lines2 - // 용마루 시작점 2개 - let vPoint1, vPoint2 - // 용마루 시작점과 만나는 지붕의 중앙 - let centerPoint1, centerPoint2 - - // 가장 긴 라인 - let longestLines - - // 용마루 길이 - let ridgeLength = 0 - let ridgeStartPoint1, ridgeStartPoint2 - - let ridgeEndPoint1, ridgeEndPoint2 - - let ridgeLength1, ridgeLength2 - - let ridgeHelpLinePoint1, ridgeHelpLinePoint2 - - if (type === 1) { - lines = [this.lines[0], this.lines[3]] - lines2 = [this.lines[1], this.lines[4]] - - ridgeLength1 = this.lines[1].length > this.lines[2].length ? this.lines[5].length - this.lines[0].length : this.lines[1].length - ridgeLength2 = this.lines[1].length > this.lines[2].length ? this.lines[2].length : this.lines[4].length - this.lines[3].length - vPoint1 = { - x: lines[0].x1 + lines[0].length / 2, - y: lines[0].y1 + lines[0].length / 2, - } - vPoint2 = { - x: lines[1].x1 + lines[1].length / 2, - y: lines[1].y1 - lines[1].length / 2, - } - centerPoint1 = { - x: (lines[0].x1 + lines[0].x2) / 2, - y: (lines[0].y1 + lines[0].y2) / 2, - } - centerPoint2 = { - x: (lines[1].x1 + lines[1].x2) / 2, - y: (lines[1].y1 + lines[1].y2) / 2, - } - - ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength1, vPoint1.y] - ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y - ridgeLength2] - ridgeHelpLinePoint1 = - ridgeLength1 > ridgeLength2 - ? [lines2[0].x2, lines2[0].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] - : [lines2[0].x2, lines2[0].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]] - ridgeHelpLinePoint2 = - ridgeLength1 > ridgeLength2 - ? [lines2[1].x2, lines2[1].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]] - : [lines2[1].x2, lines2[1].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] - } else if (type === 2) { - lines = [this.lines[2], this.lines[5]] - lines2 = [this.lines[0], this.lines[3]] - longestLines = [this.lines[0], this.lines[1]] - ridgeLength1 = lines2[1].length - ridgeLength2 = longestLines[0].length - lines[1].length - vPoint1 = { - x: lines[0].x1 - lines[0].length / 2, - y: lines[0].y1 - lines[0].length / 2, - } - vPoint2 = { - x: lines[1].x1 - lines[1].length / 2, - y: lines[1].y1 + lines[1].length / 2, - } - centerPoint1 = { - x: (lines[0].x1 + lines[0].x2) / 2, - y: (lines[0].y1 + lines[0].y2) / 2, - } - centerPoint2 = { - x: (lines[1].x1 + lines[1].x2) / 2, - y: (lines[1].y1 + lines[1].y2) / 2, - } - - ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x - ridgeLength1, vPoint1.y] - - ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength2] - - ridgeHelpLinePoint1 = [lines2[1].x2, lines2[1].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]] - ridgeHelpLinePoint2 = [lines2[0].x2, lines2[0].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] - } else if (type === 3) { - lines = [this.lines[1], this.lines[4]] - lines2 = [this.lines[2], this.lines[5]] - ridgeLength1 = this.lines[2].length > this.lines[3].length ? this.lines[0].length - lines[0].length : this.lines[2].length - - ridgeLength2 = this.lines[2].length > this.lines[3].length ? this.lines[3].length : this.lines[5].length - lines[1].length - vPoint1 = { - x: lines[0].x1 + lines[0].length / 2, - y: lines[0].y1 - lines[0].length / 2, - } - vPoint2 = { - x: lines[1].x1 - lines[1].length / 2, - y: lines[1].y1 - lines[1].length / 2, - } - centerPoint1 = { - x: (lines[0].x1 + lines[0].x2) / 2, - y: (lines[0].y1 + lines[0].y2) / 2, - } - centerPoint2 = { - x: (lines[1].x1 + lines[1].x2) / 2, - y: (lines[1].y1 + lines[1].y2) / 2, - } - - ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x, vPoint1.y - ridgeLength1] - - ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x - ridgeLength2, vPoint2.y] - - ridgeHelpLinePoint1 = - ridgeLength1 > ridgeLength2 - ? [lines2[1].x2, lines2[1].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]] - : [lines2[1].x2, lines2[1].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] - ridgeHelpLinePoint2 = - ridgeLength1 > ridgeLength2 - ? [lines2[0].x2, lines2[0].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] - : [lines2[0].x2, lines2[0].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]] - } else if (type === 4) { - lines = [this.lines[0], this.lines[3]] - lines2 = [this.lines[1], this.lines[4]] - longestLines = [this.lines[1], this.lines[2]] - ridgeLength1 = longestLines[0].length - lines[0].length - ridgeLength2 = this.lines[4].length - vPoint1 = { - x: lines[0].x1 + lines[0].length / 2, - y: lines[0].y1 + lines[0].length / 2, - } - vPoint2 = { - x: lines[1].x1 - lines[1].length / 2, - y: lines[1].y1 + lines[1].length / 2, - } - centerPoint1 = { - x: (lines[0].x1 + lines[0].x2) / 2, - y: (lines[0].y1 + lines[0].y2) / 2, - } - centerPoint2 = { - x: (lines[1].x1 + lines[1].x2) / 2, - y: (lines[1].y1 + lines[1].y2) / 2, - } - - ridgeEndPoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength1, vPoint1.y] - - ridgeEndPoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength2] - - ridgeHelpLinePoint1 = [lines2[0].x2, lines2[0].y2, ridgeEndPoint1[2], ridgeEndPoint1[3]] - ridgeHelpLinePoint2 = [lines2[1].x2, lines2[1].y2, ridgeEndPoint2[2], ridgeEndPoint2[3]] - } - - const realLine1 = new QLine( - [lines[0].x1, lines[0].y1, vPoint1.x, vPoint1.y], - { fontSize: this.fontSize, stroke: 'blue', strokeWidth: 1 }, - getRoofHypotenuse(lines[0].length / 2), - ) - - const realLine2 = new QLine( - [lines[0].x2, lines[0].y2, vPoint1.x, vPoint1.y], - { fontSize: this.fontSize, stroke: 'blue', strokeWidth: 1 }, - getRoofHypotenuse(lines[0].length / 2), - ) - - const realLine3 = new QLine( - [lines[1].x1, lines[1].y1, vPoint2.x, vPoint2.y], - { fontSize: this.fontSize, stroke: 'blue', strokeWidth: 1 }, - getRoofHypotenuse(lines[1].length / 2), - ) - - const realLine4 = new QLine( - [lines[1].x2, lines[1].y2, vPoint2.x, vPoint2.y], - { fontSize: this.fontSize, stroke: 'blue', strokeWidth: 1 }, - getRoofHypotenuse(lines[1].length / 2), - ) - - // 옆으로 누워있는 지붕의 높이 점선 - const realLine5 = new QLine( - [vPoint1.x, vPoint1.y, centerPoint1.x, centerPoint1.y], - { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - strokeDashArray: [5, 5], - }, - getRoofHeight(lines[0].length / 2, getDegreeByChon(chon)), - ) - - // 옆으로 누워있는 지붕의 높이 점선 - const realLine6 = new QLine( - [vPoint2.x, vPoint2.y, centerPoint2.x, centerPoint2.y], - { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - strokeDashArray: [5, 5], - }, - getRoofHeight(lines[1].length / 2, getDegreeByChon(chon)), - ) - - // 용마루 보조선 - const ridgeHelpLine1 = new QLine(ridgeHelpLinePoint1, { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - }) - - // 용마루 보조선 - const ridgeHelpLine2 = new QLine(ridgeHelpLinePoint2, { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - }) - - // 용마루 - const ridge1 = new QLine([vPoint1.x, vPoint1.y, ridgeEndPoint1[2], ridgeEndPoint1[3]], { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - }) - - // 용마루 - const ridge2 = new QLine([vPoint2.x, vPoint2.y, ridgeEndPoint2[2], ridgeEndPoint2[3]], { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - }) - - const ridgeEndLine = new QLine( - [ridgeEndPoint1[2], ridgeEndPoint1[3], ridgeEndPoint2[2], ridgeEndPoint2[3]], - { - fontSize: this.fontSize, - stroke: 'blue', - strokeWidth: 1, - }, - Math.abs(realLine1.length - realLine3.length), - ) - this.helpLines = [realLine1, realLine2, realLine3, realLine4, realLine5, realLine6, ridge1, ridge2, ridgeEndLine] - this.addWithUpdate(realLine1) - this.addWithUpdate(realLine2) - this.addWithUpdate(realLine3) - this.addWithUpdate(realLine4) - this.addWithUpdate(realLine5) - this.addWithUpdate(realLine6) - this.addWithUpdate(ridgeHelpLine1) - this.addWithUpdate(ridgeHelpLine2) - this.addWithUpdate(ridge1) - this.addWithUpdate(ridge2) - this.addWithUpdate(ridgeEndLine) - - this.canvas.renderAll() - } - #drawHelpLineInHexagon2(chon) { const historyLines = [] const helpPoints = [] const notInterSectionLines = []