From 9cf523dac48d705e3e58a5ec8e3149cc8e280ffd Mon Sep 17 00:00:00 2001 From: Jaeyoung Lee Date: Mon, 22 Jul 2024 18:35:19 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8B=A4=EA=B0=81=ED=98=95=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/fabric/QPolygon.js | 201 ++++++++++++++++++++++++++---- 1 file changed, 174 insertions(+), 27 deletions(-) diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index c394677d..a9c462ab 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -531,6 +531,7 @@ export default class QPolygon extends fabric.Group { this.canvas.add(ridge) } } + #drawHelpLineInHexagon2(chon) { const oneSideLines = [...this.lines].map((line) => { let newX1, newY1, newX2, newY2 @@ -747,6 +748,7 @@ export default class QPolygon extends fabric.Group { this.canvas.renderAll() }) } + #drawHelpLineInHexagon(chon) { const historyLines = [] const helpPoints = [] @@ -892,7 +894,7 @@ export default class QPolygon extends fabric.Group { #drawHelpLineInOctagon(chon) { this.drawRoofRidge() this.drawHips() - this.connectLinePoint() + // this.connectLinePoint() } /*마루 그리기 @@ -907,6 +909,9 @@ export default class QPolygon extends fabric.Group { let startXPoint, startYPoint, endXPoint, endYPoint let dVector, ridgeMaxLength, ridgeMinLength, ridgeRun + let maxSquare = this.getLargestSquareCoordinate() + console.log(maxSquare) + this.lines.forEach( (value, index) => { if (index === 0) { @@ -929,12 +934,18 @@ export default class QPolygon extends fabric.Group { nextLine = this.lines[index + 1] nextWall = this.wall.lines[index + 1] } - if (this.getLineDirection(prevLine) !== this.getLineDirection(nextLine)) { + + console.log('currentWall.length < currentLine.length') + console.log(currentWall.length, currentLine.length) + if (this.getLineDirection(prevLine) !== this.getLineDirection(nextLine) && currentWall.length < currentLine.length) { + console.log(currentWall.length <= prevWall.length) + console.log(currentWall.length <= nextWall.length) if (currentWall.length <= prevWall.length && currentWall.length <= nextWall.length) { - ridgeMaxLength = Math.min(prevLine.length, currentLine.length, nextLine.length) - ridgeMinLength = Math.max(prevLine.length, currentLine.length, nextLine.length) - currentLine.length + ridgeMaxLength = Math.min(prevLine.length, nextLine.length) + ridgeMinLength = Math.max(prevLine.length, nextLine.length) - currentLine.length ridgeRun = ridgeMinLength < ridgeMaxLength ? ridgeMinLength : ridgeMaxLength dVector = this.getDirectionForDegree(prevLine, currentLine) + console.log(ridgeMinLength, ridgeMaxLength, ridgeRun) switch (dVector) { case 45: startXPoint = currentLine.x1 + (currentLine.length / 2) @@ -961,6 +972,9 @@ export default class QPolygon extends fabric.Group { endYPoint = startYPoint break } + console.log('startXPoint, startYPoint, endXPoint, endYPoint') + console.log(startXPoint, startYPoint, endXPoint, endYPoint) + if (this.ridges.length < this.getMaxRidge(this.lines.length)) { const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], { fontSize: this.fontSize, @@ -969,22 +983,23 @@ export default class QPolygon extends fabric.Group { }) this.addWithUpdate(ridge) this.ridges.push(ridge) + + // 마루와 연결될 추녀마루을 그려준다. + const leftHip = new QLine([currentLine.x1, currentLine.y1, startXPoint, startYPoint], { + fontSize: this.fontSize, + stroke: 'red', + strokeWidth: 1, + }) + const rightHip = new QLine([currentLine.x2, currentLine.y2, startXPoint, startYPoint], { + fontSize: this.fontSize, + stroke: 'red', + strokeWidth: 1, + }) + this.addWithUpdate(leftHip) + this.addWithUpdate(rightHip) + this.hips.push(leftHip) + this.hips.push(rightHip) } - //마루와 연결될 추녀마루을 그려준다. - const leftHip = new QLine([currentLine.x1, currentLine.y1, startXPoint, startYPoint], { - fontSize: this.fontSize, - stroke: 'red', - strokeWidth: 1, - }) - const rightHip = new QLine([currentLine.x2, currentLine.y2, startXPoint, startYPoint], { - fontSize: this.fontSize, - stroke: 'red', - strokeWidth: 1, - }) - this.addWithUpdate(leftHip) - this.addWithUpdate(rightHip) - this.hips.push(leftHip) - this.hips.push(rightHip) } } }, @@ -994,7 +1009,7 @@ export default class QPolygon extends fabric.Group { } drawHips() { - let prevLine, currentLine, nextLine, endXPoint, endYPoint + let prevLine, currentLine, nextLine this.lines.forEach( (value, index) => { if (index === 0) { @@ -1012,17 +1027,97 @@ export default class QPolygon extends fabric.Group { nextLine = this.lines[index + 1] } if (!this.isAlreadyHip(currentLine)) { + let endXPoint, endYPoint + let dVector = this.getDirectionForDegree(prevLine, currentLine) + let linesXCoordinate = [] + console.log('hip dVector : ' + dVector) + switch (dVector) { + case 45: + this.lines.forEach((line) => { + if ((currentLine.x1 < line.x1 || currentLine.x1 < line.x2) + && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) { + console.log('line.x1 : ' + line.x1 + ' line.x2 : ' + line.x2) + if (currentLine.x1 !== line.x1) { + linesXCoordinate.push(line.x1) + } + if (currentLine.x1 !== line.x2) { + linesXCoordinate.push(line.x2) + } + } + }) + break + case 135: + this.lines.forEach((line) => { + console.log('currentLine.x1 < line.x1 || currentLine.x1 < line.x2') + console.log(currentLine.x1 + '<' + line.x1 + '||' + currentLine.x1 + '<' + line.x2) + console.log('line.y1 < currentLine.y1 || line.y2 < currentLine.y1') + console.log(line.y1 + '<' + currentLine.y1 + '||' + line.y2 + '<' + currentLine.y1) + if ((currentLine.x1 < line.x1 || currentLine.x1 < line.x2) + && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) { + if (currentLine.x1 !== line.x1) { + linesXCoordinate.push(line.x1) + } + if (currentLine.x1 !== line.x2) { + linesXCoordinate.push(line.x2) + } + } + }) + break + case 225: + this.lines.forEach((line) => { + if ((line.x1 < currentLine.x1 || line.x2 < currentLine.x1) + && (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) { + if (currentLine.x1 !== line.x1) { + linesXCoordinate.push(line.x1) + } + if (currentLine.x1 !== line.x2) { + linesXCoordinate.push(line.x2) + } + } + }) + break + case 315: + this.lines.forEach((line) => { + if ((line.x1 < currentLine.x1 || line.x2 < currentLine.x1) + && (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) { + if (currentLine.x1 !== line.x1) { + linesXCoordinate.push(line.x1) + } + if (currentLine.x1 !== line.x2) { + linesXCoordinate.push(line.x2) + } + } + }) + break + } + + console.log(linesXCoordinate) + console.log(new Set(linesXCoordinate)) + if (linesXCoordinate.length > 0) { + // linesXCoordinate = Math.min.apply(null, linesXCoordinate) + // linesXCoordinate = new Set(linesXCoordinate) + console.log(currentLine.x1, Math.min.apply(null, linesXCoordinate)) + + } this.ridges.forEach(ridge => { if (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)) { endXPoint = ridge.x1 endYPoint = ridge.y1 - } - if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)) { - endXPoint = ridge.x2 - endYPoint = ridge.y2 + console.log('currentLine.x1, currentLine.y1') + console.log(currentLine.x1, currentLine.y1) + } else { + if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)) { + endXPoint = ridge.x2 + endYPoint = ridge.y2 + console.log('currentLine.x2, currentLine.x2') + console.log(currentLine.x2, currentLine.x2) + } else { + console.log('todo') + } } // TODO [ljyoung] : 마루와 만나지 않는 hip 계산 }) + console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint) const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], { fontSize: this.fontSize, @@ -1038,6 +1133,56 @@ export default class QPolygon extends fabric.Group { this.canvas.renderAll() } + /* + 안쪽으로 들어간 모양의 기준을 잡기 위해 가장긴 x좌표와 y좌표를 구한다. + */ + getLargestSquareCoordinate() { + let arrX = [] + let arrY = [] + + this.points.forEach(point => { + arrX.push(point.x) + arrY.push(point.y) + }) + + let minX = Math.min.apply(null, arrX) + let minY = Math.min.apply(null, arrY) + let maxX = Math.max.apply(null, arrX) + let maxY = Math.max.apply(null, arrY) + + return { minX: minX, minY: minY, maxX: maxX, maxY: maxY } + } + + /* + 두 선의 교차점이 존재하는지 확인한다. + */ + findIntersection(line1, line2) { + const [x1, y1, x2, y2] = line1 // 첫 번째 선의 두 점 + const [x3, y3, x4, y4] = line2 // 두 번째 선의 두 점 + + // 선의 방정식의 계수 계산 + const A1 = y2 - y1 + const B1 = x1 - x2 + const C1 = A1 * x1 + B1 * y1 + + const A2 = y4 - y3 + const B2 = x3 - x4 + const C2 = A2 * x3 + B2 * y3 + + const determinant = A1 * B2 - A2 * B1 + + if (determinant === 0) { + // 두 선이 평행하거나 일직선일 경우 + console.log('두 직선은 평행하거나 일직선입니다.') + return null + } + + const x = (B1 * C2 - B2 * C1) / determinant + const y = (A1 * C2 - A2 * C1) / determinant + + return { x, y } + } + /* 추녀마루(hip) 중복방지를 위해 마루와 함께 그려진 추녀마루를 확인한다 */ @@ -1100,9 +1245,11 @@ export default class QPolygon extends fabric.Group { } } }) - // TODO [ljyoung] : 중복라인제거 - console.log(missedLine) - missedLine.forEach(p => { + //중복라인제거 + missedLine = [ + ...new Set(missedLine.map((line) => JSON.stringify(line))), + ].map((line) => JSON.parse(line)) + missedLine.forEach((p, index) => { const line = new QLine([p.x1, p.y1, p.x2, p.y2], { fontSize: this.fontSize, stroke: 'green',