From 6e81cd4ffd65e47d4cc8cf913ebb9773fcc37260 Mon Sep 17 00:00:00 2001 From: Jaeyoung Lee Date: Tue, 6 Aug 2024 13:51:21 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8B=A4=EA=B0=81=ED=98=95=20=EB=AA=A8?= =?UTF-8?q?=EC=9E=84=EC=A7=80=EB=B6=95=20=EA=B3=84=EC=82=B0=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 3 +- src/components/fabric/QPolygon.js | 4 +- src/util/qpolygon-utils.js | 156 +++++++++++++----------------- 3 files changed, 68 insertions(+), 95 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 3838c158..84948589 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -10,7 +10,6 @@ import { QLine } from '@/components/fabric/QLine' import { getCanvasState, insertCanvasState } from '@/lib/canvas' import { calculateIntersection } from '@/util/canvas-util' import { QPolygon } from '@/components/fabric/QPolygon' -import offsetPolygon from '@/util/qpolygon-utils' export default function Roof2() { const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas') @@ -276,7 +275,7 @@ export default function Roof2() { { x: 450, y: 850 }, ] - const polygon = new QPolygon(eightPoint3, { + const polygon = new QPolygon(type1, { fill: 'transparent', stroke: 'green', strokeWidth: 1, diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index fb3e4efb..2005395c 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -2,7 +2,7 @@ import { fabric } from 'fabric' import { v4 as uuidv4 } from 'uuid' import { QLine } from '@/components/fabric/QLine' import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util' -import { calculateAngle, dividePolygon, drawHelpLineInHexagon,drawHippedRoof } from '@/util/qpolygon-utils' +import { calculateAngle, drawHippedRoof } from '@/util/qpolygon-utils' export const QPolygon = fabric.util.createClass(fabric.Polygon, { type: 'QPolygon', @@ -356,6 +356,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { }) }, divideLine() { - dividePolygon(this) + //dividePolygon(this) }, }) diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index 97caa5db..149f1ca6 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -1,6 +1,13 @@ import { fabric } from 'fabric' import { QLine } from '@/components/fabric/QLine' -import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDirectionByPoint, getAdjacent, getRoofHypotenuse } from '@/util/canvas-util' +import { + calculateIntersection, + distanceBetweenPoints, + findClosestPoint, + getAdjacent, + getDirectionByPoint, + getRoofHypotenuse, +} from '@/util/canvas-util' import { QPolygon } from '@/components/fabric/QPolygon' const TWO_PI = Math.PI * 2 @@ -957,7 +964,7 @@ export default function offsetPolygon(vertices, offset) { export const drawHippedRoof = (polygon, chon) => { drawRoofRidge(polygon) - // drawHips(polygon) + drawHips(polygon) // connectLinePoint(polygon) } /*마루 그리기 @@ -1081,14 +1088,20 @@ const drawRoofRidge = (polygon) => { let ridgeLengthToWall, ridgeBaseLength, ridgeLengthToAcrossLine, ridgeMaxLength + console.log('currentWall : ', currentWall.length) + console.log('innerPointLine : ', innerPointLine) if (innerPointLine !== undefined) { if (currentWall.direction === 'top' || currentWall.direction === 'bottom') { + console.log('currentWall : ', currentWall) + console.log('acrossLine : ', acrossLine) if (innerPointLine.y1 === innerPointLine.y2) { - ridgeBaseLength = - Math.abs(currentWall.y1 - innerPointLine.y1) < Math.abs(currentWall.y1 - innerPointLine.y2) - ? Math.abs(currentWall.y1 - innerPointLine.y1) - : Math.abs(currentWall.y1 - innerPointLine.y2) + console.log('innerPointLine : ', innerPointLine) + ridgeBaseLength = Math.abs(currentWall.y1 - innerPointLine.y1) ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength + ridgeLengthToWall = Math.min( + Math.max(Math.abs(currentWall.x1 - innerPointLine.x1), Math.abs(currentWall.x1 - innerPointLine.x2)), + ridgeLengthToWall, + ) ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1) ridgeMaxLength = Math.max( prevWall.length, @@ -1105,6 +1118,16 @@ const drawRoofRidge = (polygon) => { ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1) ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) } + console.log( + 'ridgeBaseLength : ', + ridgeBaseLength, + ' ridgeLengthToWall : ', + ridgeLengthToWall, + ' ridgeLengthToAcrossLine : ', + ridgeLengthToAcrossLine, + 'ridgeMaxLength : ', + ridgeMaxLength, + ) if (ridgeBaseLength > 0) { if (ridgeLengthToWall <= ridgeLengthToAcrossLine) { if (nextWall.direction === 'right') { @@ -1121,7 +1144,7 @@ const drawRoofRidge = (polygon) => { endXPoint = acrossLine.x1 - ridgeBaseLength / 2 } if (nextWall.direction === 'left') { - startXPoint = currentWall.x1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2 + startXPoint = acrossLine.x1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2 endXPoint = startXPoint - ridgeLengthToAcrossLine } } @@ -1136,10 +1159,15 @@ const drawRoofRidge = (polygon) => { } } if (currentWall.direction === 'right' || currentWall.direction === 'left') { + console.log('currentWall.length : ', currentWall.length) if (innerPointLine.x1 === innerPointLine.x2) { ridgeBaseLength = Math.abs(currentWall.x1 - innerPointLine.x1) ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1) + ridgeLengthToWall = Math.min( + Math.max(Math.abs(currentWall.y1 - innerPointLine.y1), Math.abs(currentWall.y1 - innerPointLine.y2)), + ridgeLengthToWall, + ) ridgeMaxLength = Math.max( prevWall.length, nextWall.length, @@ -1155,6 +1183,14 @@ const drawRoofRidge = (polygon) => { ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1) ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.y1 - acrossLine.y1)) } + console.log( + 'ridgeBaseLength : ', + ridgeBaseLength, + ' ridgeLengthToWall : ', + ridgeLengthToWall, + ' ridgeLengthToAcrossLine : ', + ridgeLengthToAcrossLine, + ) if (ridgeBaseLength > 0) { if (ridgeLengthToWall <= ridgeLengthToAcrossLine) { if (nextWall.direction === 'top') { @@ -1250,6 +1286,7 @@ const drawRoofRidge = (polygon) => { } } } + console.log(startXPoint, startYPoint, endXPoint, endYPoint) if ( // polygon.ridges.length < getMaxRidge(lines.length) && ridgeBaseLength <= ridgeMaxLength && @@ -1274,6 +1311,7 @@ const drawRoofRidge = (polygon) => { }) //중복 제거 polygon.ridges = polygon.ridges.filter((ridge, index, self) => index === self.findIndex((t) => t.x1 === ridge.x1 && t.y1 === ridge.y1)) + console.log('polygon.ridges', polygon.ridges) } const drawHips = (polygon) => { /* @@ -1786,6 +1824,8 @@ const drawHips = (polygon) => { adjacent = getAdjacent(hypotenuse) + console.log('dVector : ', dVector) + switch (dVector) { case 45: endXPoint = currentLine.x1 + adjacent @@ -1818,86 +1858,6 @@ const drawHips = (polygon) => { // this.canvas.renderAll() } -const getRoofBaseLine = (polygon, prevLine, currentLine, nextLine, dVector) => { - let minX = Math.min(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2) - let maxX = Math.max(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2) - let minY = Math.min(currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2) - let maxY = Math.max(currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2) - - let lineCoordinate = [ - { x: minX, y: minY }, - { x: minX, y: maxY }, - { x: maxX, y: maxY }, - { x: maxX, y: minY }, - ] - - let innerPointLine = polygon.lines.filter((line) => { - if (getPointInPolygon(lineCoordinate, { x: line.x1, y: line.y1 })) { - return line - } - }) - - let coordinateLength - let innerPointX - - console.log('innerPointLine : ', innerPointLine) - - if (innerPointLine.length > 0) { - innerPointX = innerPointLine.reduce((a, b) => { - return a.x1 < b.x1 ? a : b - }) - } - - if (dVector === 45 || dVector === 225) { - if (innerPointX !== undefined) { - coordinateLength = Math.abs(currentLine.y1 - innerPointX.y1) - } else { - coordinateLength = Math.abs(lineCoordinate[0].y - lineCoordinate[2].y) - } - //계산된 좌표길이가 마루를 작성 할 최소 기준에 미치지 못하면 그릴수 없다. - if (coordinateLength < currentLine.length) { - return { - minLineLength: coordinateLength, - currentLineLength: currentLine.length, - maxLineLength: coordinateLength, - } - } else { - return { - minLineLength: Math.min(prevLine.length, nextLine.length), - currentLineLength: currentLine.length, - maxLineLength: coordinateLength, - } - } - } - if (dVector === 135 || dVector === 315) { - if (innerPointX !== undefined) { - coordinateLength = Math.abs(currentLine.x1 - innerPointX.x1) - } else { - coordinateLength = Math.abs(lineCoordinate[0].x - lineCoordinate[2].x) - } - //계산된 좌표길이가 마루를 작성 할 최소 기준에 미치지 못하면 그릴수 없다. - if (coordinateLength < currentLine.length) { - return { - minLineLength: coordinateLength, - currentLineLength: currentLine.length, - maxLineLength: coordinateLength, - } - } else { - return { - minLineLength: Math.min(prevLine.length, nextLine.length), - currentLineLength: currentLine.length, - maxLineLength: coordinateLength, - } - } - } - - return { - minLineLength: 0, - currentLineLength: currentLine.length, - maxLineLength: 0, - } -} - const getPointInPolygon = (polygon, point) => { let inside = false let minX = Math.min(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x), @@ -1999,18 +1959,32 @@ const connectLinePoint = (polygon) => { missedPoints.push({ x: ridge.x2, y: ridge.y2 }) } }) + + console.log('missedPoints : ', missedPoints) + console.log( + polygon.hips.filter((hip) => { + let count = 0 + count += polygon.ridges.filter((ridge) => (ridge.x1 === hip.x2 && ridge.y1 === hip.y2) || (ridge.x2 === hip.x2 && ridge.y2 === hip.y2)).length + + count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length + if (count < 3) { + return hip + } + }), + ) //추녀마루 polygon.hips.forEach((hip) => { let count = 0 count += polygon.ridges.filter((ridge) => (ridge.x1 === hip.x2 && ridge.y1 === hip.y2) || (ridge.x2 === hip.x2 && ridge.y2 === hip.y2)).length - count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length + count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length if (count < 3) { missedPoints.push({ x: hip.x2, y: hip.y2 }) } }) let missedLine = [] + console.log('missedPoints : ', missedPoints) //중복포인트제거 missedPoints = [...new Set(missedPoints.map((line) => JSON.stringify(line)))].map((line) => JSON.parse(line)) @@ -2050,14 +2024,14 @@ const connectLinePoint = (polygon) => { missedLine.forEach((p, index) => { const line = new QLine([p.x1, p.y1, p.x2, p.y2], { fontSize: polygon.fontSize, - stroke: 'green', + stroke: 'purple', strokeWidth: 1, }) polygon.canvas.add(line) polygon.innerLines.push(line) }) - missedPoints = [] + /*missedPoints = [] missedLine = [] polygon.innerLines.forEach((line, index) => { @@ -2117,7 +2091,7 @@ const connectLinePoint = (polygon) => { }) polygon.canvas.add(line) polygon.innerLines.push(line) - }) + })*/ } /*