From 17424457a9e047d1d4a8daf03d703ecb0fe43b9f Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Thu, 11 Jul 2024 15:33:49 +0900 Subject: [PATCH] =?UTF-8?q?6=EA=B0=81=ED=98=95=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 22 ++- src/components/fabric/QPolygon.js | 239 +++++++++++++++++++++++++++++- src/hooks/useMode.js | 2 +- 3 files changed, 252 insertions(+), 11 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 5d1b997f..95414216 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -136,14 +136,20 @@ export default function Roof2() { if (canvas) { const polygon = new QPolygon( [ - { x: 198.5, y: 735 }, - { x: 698.5, y: 735 }, - { x: 698.5, y: 585 }, - { x: 448.5, y: 585 }, - { x: 448.5, y: 435 }, - { x: 698.5, y: 435 }, - { x: 698.5, y: 235 }, - { x: 198.5, y: 235 }, + // { x: 198.5, y: 735 }, + // { x: 698.5, y: 735 }, + // { x: 698.5, y: 585 }, + // { x: 448.5, y: 585 }, + // { x: 448.5, y: 435 }, + // { x: 698.5, y: 435 }, + // { x: 698.5, y: 235 }, + // { x: 198.5, y: 235 }, + { x: 100, y: 100 }, + { x: 800, y: 100 }, + { x: 800, y: 800 }, + { x: 500, y: 800 }, + { x: 500, y: 400 }, + { x: 100, y: 400 }, ], { fill: 'transparent', diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 7892b5e6..b9a20111 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -33,6 +33,7 @@ export default class QPolygon extends fabric.Group { const polygon = new fabric.Polygon(sortPoints, options) super([polygon], {}) + this.fontSize = options.fontSize this.points = sortPoints this.polygon = polygon @@ -354,7 +355,7 @@ export default class QPolygon extends fabric.Group { } #drawHelpLineInRect(chon) { - let type + let type = 1 let smallestLength = Infinity let maxLength = 0 @@ -530,7 +531,241 @@ export default class QPolygon extends fabric.Group { } } - #drawHelpLineInHexagon(chon) {} + #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 + // 용마루 끝점을 위해 필요한 점 2개 + let vPoint3, vPoint4 + + if (type === 1) { + lines = [this.lines[0], this.lines[3]] + lines2 = [this.lines[1], this.lines[4]] + 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, + } + vPoint3 = { + x: lines2[0].x2 + lines[0].length / 2, + y: lines2[0].y2 - lines[0].length / 2, + } + vPoint4 = { + x: lines2[1].x2 - lines[1].length / 2, + y: lines2[1].y2 + lines[1].length / 2, + } + } else if (type === 2) { + lines = [this.lines[2], this.lines[5]] + lines2 = [this.lines[0], this.lines[3]] + 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, + } + vPoint3 = { + x: lines2[0].x2 + lines[0].length / 2, + y: lines2[0].y2 - lines[0].length / 2, + } + vPoint4 = { + x: lines2[1].x2 - lines[1].length / 2, + y: lines2[1].y2 + lines[1].length / 2, + } + } else if (type === 3) { + lines = [this.lines[1], this.lines[4]] + lines2 = [this.lines[2], this.lines[5]] + 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, + } + vPoint3 = { + x: lines2[0].x2 - lines[0].length / 2, + y: lines2[0].y2 - lines[0].length / 2, + } + vPoint4 = { + x: lines2[1].x2 + lines[1].length / 2, + y: lines2[1].y2 + lines[1].length / 2, + } + } else if (type === 4) { + lines = [this.lines[0], this.lines[3]] + lines2 = [this.lines[1], this.lines[4]] + 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, + } + vPoint3 = { + x: lines2[0].x2 - lines[0].length / 2, + y: lines2[0].y2 - lines[0].length / 2, + } + vPoint4 = { + x: lines2[1].x2 + lines[1].length / 2, + y: lines2[1].y2 + lines[1].length / 2, + } + } + + const realLine1 = new QLine( + [lines[0].x1, lines[0].y1, vPoint1.x, vPoint1.y], + { fontSize: this.fontSize, stroke: 'black', 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: 'black', strokeWidth: 1 }, + getRoofHypotenuse(lines[1].length / 2), + ) + + const realLine3 = new QLine( + [lines[1].x1, lines[1].y1, vPoint2.x, vPoint2.y], + { fontSize: this.fontSize, stroke: 'black', 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: 'black', strokeWidth: 1 }, + getRoofHypotenuse(lines[1].length / 2), + ) + + // 옆으로 누워있는 지붕의 높이 + const realLine5 = new QLine( + [vPoint1.x, vPoint1.y, centerPoint1.x, centerPoint1.y], + { + fontSize: this.fontSize, + stroke: 'black', + 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: 'black', + strokeWidth: 1, + strokeDashArray: [5, 5], + }, + getRoofHeight(lines[1].length / 2, getDegreeByChon(chon)), + ) + + // 용마루 보조선 + const ridgeHelpLine1 = new QLine( + [lines2[0].x2, lines2[0].y2, vPoint3.x, vPoint3.y], + { + fontSize: this.fontSize, + stroke: 'black', + strokeWidth: 1, + }, + getRoofHypotenuse(lines[0].length / 2), + ) + + // 용마루 보조선 + const ridgeHelpLine2 = new QLine( + [lines2[1].x2, lines2[1].y2, vPoint4.x, vPoint4.y], + { + fontSize: this.fontSize, + stroke: 'black', + strokeWidth: 1, + }, + getRoofHypotenuse(lines[1].length / 2), + ) + + // 용마루 + const ridge1 = new QLine([vPoint1.x, vPoint1.y, vPoint3.x, vPoint3.y], { + fontSize: this.fontSize, + stroke: 'black', + strokeWidth: 1, + }) + + // 용마루 + const ridge2 = new QLine([vPoint2.x, vPoint2.y, vPoint4.x, vPoint4.y], { + fontSize: this.fontSize, + stroke: 'black', + strokeWidth: 1, + }) + + console.log(vPoint3, vPoint4) + const ridgeEndLine = new QLine( + [vPoint3.x, vPoint3.y, vPoint4.x, vPoint4.y], + { + fontSize: this.fontSize, + stroke: 'black', + strokeWidth: 1, + }, + ) + + 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() + } #drawHelpLineInOctagon(chon) {} } diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index c8db2ac6..ae925db0 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -856,7 +856,7 @@ export function useMode() { const roof = makePolygon(offsetPoints) setRoof(roof) - // roof.drawHelpLine() + roof.drawHelpLine() } const togglePolygonLine = (obj) => {