From d529e9414346757821f159dc2780b41be8046b49 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Thu, 11 Jul 2024 17:00:29 +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 | 51 +++++++++++++++------- src/components/fabric/QPolygon.js | 72 +++++++++++++------------------ 2 files changed, 64 insertions(+), 59 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 95414216..a4b80b6f 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -133,24 +133,43 @@ export default function Roof2() { }, [verticalSize, horizontalSize]) const makeQPolygon = () => { + const type1 = [ + { x: 100, y: 100 }, + { x: 800, y: 100 }, + { x: 800, y: 800 }, + { x: 500, y: 800 }, + { x: 500, y: 400 }, + { x: 100, y: 400 }, + ] + const type2 = [ + { x: 100, y: 100 }, + { x: 100, y: 1000 }, + { x: 1000, y: 1000 }, + { x: 1000, y: 600 }, + { x: 550, y: 600 }, + { x: 550, y: 100 }, + ] + + const type3 = [ + { x: 100, y: 50 }, + { x: 100, y: 650 }, + { x: 450, y: 650 }, + { x: 450, y: 400 }, + { x: 700, y: 400 }, + { x: 700, y: 50 }, + ] + + const type4 = [ + { x: 153.96209743461895, y: 446.46989831140326 }, + { x: 153.96209743461895, y: 796.879061239893 }, + { x: 754.3712603631087, y: 796.879061239893 }, + { x: 754.3712603631087, y: 196.46989831140326 }, + { x: 403.962097434619, y: 196.46989831140326 }, + { x: 403.962097434619, y: 446.46989831140326 }, + ] 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: 100, y: 100 }, - { x: 800, y: 100 }, - { x: 800, y: 800 }, - { x: 500, y: 800 }, - { x: 500, y: 400 }, - { x: 100, y: 400 }, - ], + type4, { fill: 'transparent', stroke: 'black', diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index b9a20111..7310456e 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -30,6 +30,7 @@ export default class QPolygon extends fabric.Group { } const sortPoints = sortedPoints(points) + console.log(sortPoints) const polygon = new fabric.Polygon(sortPoints, options) super([polygon], {}) @@ -545,9 +546,10 @@ export default class QPolygon extends fabric.Group { let vPoint1, vPoint2 // 용마루 시작점과 만나는 지붕의 중앙 let centerPoint1, centerPoint2 - // 용마루 끝점을 위해 필요한 점 2개 - let vPoint3, vPoint4 + // 용마루 길이 + let ridgeLength = 0 + let ridgePoint1, ridgePoint2 if (type === 1) { lines = [this.lines[0], this.lines[3]] lines2 = [this.lines[1], this.lines[4]] @@ -567,14 +569,10 @@ export default class QPolygon extends fabric.Group { 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, - } + + ridgeLength = Math.min(this.lines[1].length, this.lines[2].length) + ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength, vPoint1.y] + ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y - ridgeLength] } else if (type === 2) { lines = [this.lines[2], this.lines[5]] lines2 = [this.lines[0], this.lines[3]] @@ -594,14 +592,10 @@ export default class QPolygon extends fabric.Group { 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, - } + + ridgeLength = Math.min(this.lines[3].length, this.lines[4].length) + ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x - ridgeLength, vPoint1.y] + ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength] } else if (type === 3) { lines = [this.lines[1], this.lines[4]] lines2 = [this.lines[2], this.lines[5]] @@ -621,14 +615,10 @@ export default class QPolygon extends fabric.Group { 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, - } + + ridgeLength = Math.min(this.lines[0].length, this.lines[3].length) + ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x, vPoint1.y - ridgeLength] + ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x - ridgeLength, vPoint2.y] } else if (type === 4) { lines = [this.lines[0], this.lines[3]] lines2 = [this.lines[1], this.lines[4]] @@ -648,14 +638,10 @@ export default class QPolygon extends fabric.Group { 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, - } + + ridgeLength = Math.min(this.lines[2].length, this.lines[5].length) + ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength, vPoint1.y] + ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength] } const realLine1 = new QLine( @@ -667,7 +653,7 @@ export default class QPolygon extends fabric.Group { 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), + getRoofHypotenuse(lines[0].length / 2), ) const realLine3 = new QLine( @@ -682,7 +668,7 @@ export default class QPolygon extends fabric.Group { getRoofHypotenuse(lines[1].length / 2), ) - // 옆으로 누워있는 지붕의 높이 + // 옆으로 누워있는 지붕의 높이 점선 const realLine5 = new QLine( [vPoint1.x, vPoint1.y, centerPoint1.x, centerPoint1.y], { @@ -694,7 +680,7 @@ export default class QPolygon extends fabric.Group { getRoofHeight(lines[0].length / 2, getDegreeByChon(chon)), ) - // 옆으로 누워있는 지붕의 높이 + // 옆으로 누워있는 지붕의 높이 점선 const realLine6 = new QLine( [vPoint2.x, vPoint2.y, centerPoint2.x, centerPoint2.y], { @@ -708,7 +694,7 @@ export default class QPolygon extends fabric.Group { // 용마루 보조선 const ridgeHelpLine1 = new QLine( - [lines2[0].x2, lines2[0].y2, vPoint3.x, vPoint3.y], + [lines2[1].x2, lines2[1].y2, ridgePoint1[2], ridgePoint1[3]], { fontSize: this.fontSize, stroke: 'black', @@ -719,7 +705,7 @@ export default class QPolygon extends fabric.Group { // 용마루 보조선 const ridgeHelpLine2 = new QLine( - [lines2[1].x2, lines2[1].y2, vPoint4.x, vPoint4.y], + [lines2[0].x2, lines2[0].y2, ridgePoint2[2], ridgePoint2[3]], { fontSize: this.fontSize, stroke: 'black', @@ -729,22 +715,21 @@ export default class QPolygon extends fabric.Group { ) // 용마루 - const ridge1 = new QLine([vPoint1.x, vPoint1.y, vPoint3.x, vPoint3.y], { + const ridge1 = new QLine(ridgePoint1, { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1, }) // 용마루 - const ridge2 = new QLine([vPoint2.x, vPoint2.y, vPoint4.x, vPoint4.y], { + const ridge2 = new QLine(ridgePoint2, { fontSize: this.fontSize, stroke: 'black', strokeWidth: 1, }) - console.log(vPoint3, vPoint4) const ridgeEndLine = new QLine( - [vPoint3.x, vPoint3.y, vPoint4.x, vPoint4.y], + [ridgePoint1[2], ridgePoint1[3], ridgePoint2[2], ridgePoint2[3]], { fontSize: this.fontSize, stroke: 'black', @@ -765,6 +750,7 @@ export default class QPolygon extends fabric.Group { this.addWithUpdate(ridgeEndLine) this.canvas.renderAll() + console.log(JSON.stringify(this.points)) } #drawHelpLineInOctagon(chon) {}