From 64e69f2c0d254027f8c237535632e7d25dee8966 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Wed, 17 Jul 2024 14:06:49 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 14 +-- src/components/fabric/QPolygon.js | 178 +++++++++++++++++++++++++----- 2 files changed, 158 insertions(+), 34 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 1aa80094..5854523e 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -151,12 +151,12 @@ export default function Roof2() { ] const type3 = [ - { x: 200, y: 150 }, - { x: 200, y: 650 }, - { x: 450, y: 650 }, - { x: 450, y: 500 }, - { x: 650, y: 500 }, - { x: 650, y: 150 }, + { x: 200, y: 100 }, + { x: 200, y: 800 }, + { x: 500, y: 800 }, + { x: 500, y: 300 }, + { x: 800, y: 300 }, + { x: 800, y: 100 }, ] const type4 = [ @@ -169,7 +169,7 @@ export default function Roof2() { ] if (canvas) { const polygon = new QPolygon( - type1, + type4, { fill: 'transparent', stroke: 'black', diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 512149f3..93d39298 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -326,7 +326,7 @@ export default class QPolygon extends fabric.Group { this.canvas.requestRenderAll() } - // 보조선 그리기 사각형에서만 + // 보조선 그리기 drawHelpLine(chon = 4) { if (!this.isValid()) { return @@ -580,12 +580,25 @@ export default class QPolygon extends fabric.Group { // 용마루 시작점과 만나는 지붕의 중앙 let centerPoint1, centerPoint2 + // 가장 긴 라인 + let longestLines + // 용마루 길이 let ridgeLength = 0 - let ridgePoint1, ridgePoint2 + 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]] + longestLines = [this.lines[4], this.lines[5]] + ridgeLength1 = lines2[0].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, @@ -603,12 +616,37 @@ export default class QPolygon extends fabric.Group { y: (lines[1].y1 + lines[1].y2) / 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] + 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], + ] } 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, @@ -626,12 +664,38 @@ export default class QPolygon extends fabric.Group { y: (lines[1].y1 + lines[1].y2) / 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] + 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]] + longestLines = [this.lines[0], this.lines[5]] + ridgeLength1 = this.lines[3].length + ridgeLength2 = longestLines[0].length - lines[0].length vPoint1 = { x: lines[0].x1 + lines[0].length / 2, y: lines[0].y1 - lines[0].length / 2, @@ -649,12 +713,38 @@ export default class QPolygon extends fabric.Group { y: (lines[1].y1 + lines[1].y2) / 2, } - ridgeLength = Math.min(this.lines[2].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] + ridgeEndPoint1 = [ + vPoint1.x, + vPoint1.y, + vPoint1.x, + vPoint1.y - ridgeLength2, + ] + + ridgeEndPoint2 = [ + vPoint2.x, + vPoint2.y, + vPoint2.x - ridgeLength1, + vPoint2.y, + ] + + 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 === 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, @@ -672,9 +762,32 @@ export default class QPolygon extends fabric.Group { y: (lines[1].y1 + lines[1].y2) / 2, } - ridgeLength = Math.min(this.lines[4].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] + 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( @@ -727,7 +840,7 @@ export default class QPolygon extends fabric.Group { // 용마루 보조선 const ridgeHelpLine1 = new QLine( - [lines2[0].x2, lines2[0].y2, ridgePoint1[2], ridgePoint1[3]], + ridgeHelpLinePoint1, { fontSize: this.fontSize, stroke: 'blue', @@ -738,7 +851,7 @@ export default class QPolygon extends fabric.Group { // 용마루 보조선 const ridgeHelpLine2 = new QLine( - [lines2[1].x2, lines2[1].y2, ridgePoint2[2], ridgePoint2[3]], + ridgeHelpLinePoint2, { fontSize: this.fontSize, stroke: 'blue', @@ -748,21 +861,32 @@ export default class QPolygon extends fabric.Group { ) // 용마루 - const ridge1 = new QLine(ridgePoint1, { - 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(ridgePoint2, { - 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( - [ridgePoint1[2], ridgePoint1[3], ridgePoint2[2], ridgePoint2[3]], + [ + ridgeEndPoint1[2], + ridgeEndPoint1[3], + ridgeEndPoint2[2], + ridgeEndPoint2[3], + ], { fontSize: this.fontSize, stroke: 'blue',