From 9601c628243aea1d778bd8877337466b65d36ed5 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Wed, 24 Jul 2024 18:08:54 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8F=B4=EB=A6=AC=EA=B3=A4=20=ED=8C=A8?= =?UTF-8?q?=ED=84=B4=20=EB=B0=B0=EC=97=B4=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useMode.js | 238 +++++++++++++++++++++++++++++++------------ 1 file changed, 175 insertions(+), 63 deletions(-) diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index dab596c2..ef7c7cd0 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1290,6 +1290,11 @@ export function useMode() { let vertCenterLine let secondVertCenterLine let templatePolygonObj = {} + let roofPatternPolygonArray = [] + + let bigRoofPolygon = [] + let middleRoofPolygon = [] + let smallRoofPolygon = [] if (prevHighIndex === 1) { if (horizontalDirection === 'left') { @@ -1415,7 +1420,7 @@ export function useMode() { let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt) canvas.add(drawLastInLine2) - const bigRoofPolygon = [ + bigRoofPolygon = [ { x: outLines[2].x1, y: outLines[2].y1 }, { x: outLines[2].x2, y: outLines[2].y2 }, { x: outLines[0].x1, y: outLines[0].y1 }, @@ -1424,20 +1429,19 @@ export function useMode() { { x: outLines[1].x2, y: outLines[1].y2 }, ] - const middleRoofPolygon = [ + middleRoofPolygon = [ { x: outLines[0].x2, y: outLines[0].y2 }, { x: outLines[0].x1, y: outLines[0].y1 }, { x: outLines[3].x2, y: outLines[3].y2 }, { x: outLines[3].x1, y: outLines[3].y1 }, ] - const smallRoofPolygon = [ + smallRoofPolygon = [ { x: outLines[1].x2, y: outLines[1].y2 }, { x: outLines[1].x1, y: outLines[1].y1 }, { x: outLines[4].x2, y: outLines[4].y2 }, { x: outLines[4].x1, y: outLines[4].y1 }, ] - setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines }) } else { //아래쪽 길게 오른쪽 방향 //배열 순서대로 뒤에꺼를 찾아서 계산한다 @@ -1565,7 +1569,7 @@ export function useMode() { let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], centerLineOpt) canvas.add(drawLastInLine2) - const bigRoofPolygon = [ + bigRoofPolygon = [ { x: outLines[0].x1, y: outLines[0].y1 }, { x: outLines[0].x2, y: outLines[0].y2 }, { x: outLines[3].x1, y: outLines[3].y1 }, @@ -1574,20 +1578,19 @@ export function useMode() { { x: outLines[1].x2, y: outLines[0].y1 }, ] - const middleRoofPolygon = [ + middleRoofPolygon = [ { x: outLines[2].x1, y: outLines[2].y1 }, { x: outLines[2].x2, y: outLines[2].y2 }, { x: outLines[0].x2, y: outLines[0].y2 }, { x: outLines[0].x1, y: outLines[0].y1 }, ] - const smallRoofPolygon = [ + smallRoofPolygon = [ { x: outLines[4].x1, y: outLines[4].y1 }, { x: outLines[4].x2, y: outLines[4].y2 }, { x: outLines[1].x2, y: outLines[1].y2 }, { x: outLines[1].x1, y: outLines[1].y1 }, ] - setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines }) } } else { if (horizontalDirection === 'left') { @@ -1709,7 +1712,7 @@ export function useMode() { let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], centerLineOpt) canvas.add(drawLastInLine2) - const bigRoofPolygon = [ + bigRoofPolygon = [ { x: outLines[2].x1, y: outLines[2].y1 }, { x: outLines[2].x2, y: outLines[2].y2 }, { x: outLines[1].x1, y: outLines[1].y1 }, @@ -1718,21 +1721,19 @@ export function useMode() { { x: outLines[0].x1, y: outLines[0].y1 }, ] - const middleRoofPolygon = [ + middleRoofPolygon = [ { x: outLines[0].x1, y: outLines[0].y1 }, { x: outLines[0].x2, y: outLines[0].y2 }, { x: outLines[4].x2, y: outLines[4].y2 }, { x: outLines[4].x1, y: outLines[4].y1 }, ] - const smallRoofPolygon = [ + smallRoofPolygon = [ { x: outLines[1].x2, y: outLines[1].y2 }, { x: outLines[1].x1, y: outLines[1].y1 }, { x: outLines[3].x2, y: outLines[3].y2 }, { x: outLines[3].x1, y: outLines[3].y1 }, ] - - setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines }) } else { //윗쪽 길게 오른쪽 방향 //배열 순서대로 뒤에꺼를 찾아서 계산한다 @@ -1854,7 +1855,7 @@ export function useMode() { let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], centerLineOpt) canvas.add(drawLastInLine2) - const bigRoofPolygon = [ + bigRoofPolygon = [ { x: outLines[0].x1, y: outLines[0].y1 }, { x: outLines[0].x2, y: outLines[0].y2 }, { x: outLines[1].x1, y: outLines[0].y2 }, @@ -1863,24 +1864,28 @@ export function useMode() { { x: outLines[4].x2, y: outLines[4].y2 }, ] - const middleRoofPolygon = [ + middleRoofPolygon = [ { x: outLines[2].x1, y: outLines[2].y1 }, { x: outLines[2].x2, y: outLines[2].y2 }, { x: outLines[0].x2, y: outLines[0].y2 }, { x: outLines[0].x1, y: outLines[0].y1 }, ] - const smallRoofPolygon = [ + smallRoofPolygon = [ { x: outLines[3].x1, y: outLines[3].y1 }, { x: outLines[3].x2, y: outLines[3].y2 }, { x: outLines[1].x2, y: outLines[1].y2 }, { x: outLines[1].x1, y: outLines[1].y1 }, ] - - setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines }) } } + roofPatternPolygonArray.push(bigRoofPolygon) + roofPatternPolygonArray.push(middleRoofPolygon) + roofPatternPolygonArray.push(smallRoofPolygon) + + setRoofPolygonPattern({ roofPatternPolygonArray, lines }) + canvas.renderAll() } @@ -1893,6 +1898,8 @@ export function useMode() { let lines = [] //내각라인 let outLines = [] //아웃라인 let halfLength = 0 //선길이 + let offsetX + let offsetY const dashedCenterLineOpt = { stroke: 'black', @@ -1945,6 +1952,32 @@ export function useMode() { y: line.y1, })) + //좌표 재정렬 + function reSortQlineArray(array) { + let tmpArray = [] + array.forEach((arr, index) => { + let minX, minY, maxX, maxY + let tmp = arr + if (arr.x2 < arr.x1 || arr.y2 < arr.y1) { + minX = arr.x2 + minY = arr.y2 + maxX = arr.x1 + maxY = arr.y1 + tmp['x1'] = minX + tmp['y1'] = minY + tmp['x2'] = maxX + tmp['y2'] = maxY + tmp.line['x1'] = minX + tmp.line['y1'] = minY + tmp.line['x2'] = maxX + tmp.line['y2'] = maxY + } + tmpArray.push(tmp) + }) + + return tmpArray + } + // 외적을 계산하는 함수 function crossProduct(p1, p2, p3) { const dx1 = p2.x - p1.x @@ -1977,7 +2010,10 @@ export function useMode() { // 오목한 부분 인덱스 찾기 concaveIndices = findConcavePointIndices(points) //오목한 부분을 제외한 인덱스 const concavePoints = concaveIndices.map((index) => points[index]) - + const concaveLine = { + index: concavePointIndices[0], + line: lines[concavePointIndices[0]], + } for (var i = 0; i < points.length; i++) { var prev = points[(i - 1 + points.length) % points.length] var current = points[i] @@ -2012,11 +2048,8 @@ export function useMode() { y: averageNormal.y / lengthNormal, } - let offsetX - let offsetY - if (concavePointIndices[0] === i || concavePointIndices[1] === i) { - // 인덱스가 배열이랑 같으면 + //인덱스가 배열이랑 같으면 if ((concavePointIndices[0] === 4 && concavePointIndices[1] === 5) || (concavePointIndices[0] === 2 && concavePointIndices[1] === 3)) { offsetX = 1 offsetY = (offsetInputY / transformedMax) * originalMax * 2 @@ -2058,35 +2091,121 @@ export function useMode() { } canvas?.remove(outlinePolygon) //임시 폴리곤을 삭제 - canvas?.remove(outLines[concavePointIndices[0]]) //가운데 제외되는 선을 지운다 //라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정 - outLines.forEach((outline, index) => { - let minX, minY, maxX, maxY - if (outline.x2 < outline.x1 || outline.y2 < outline.y1) { - outLines[index].x1 = outline.x2 - outLines[index].y1 = outline.y2 - outLines[index].x2 = outline.x1 - outLines[index].y2 = outline.y1 - outLines[index].line.x1 = minX - outLines[index].line.y1 = minY - outLines[index].line.x2 = maxX - outLines[index].line.y2 = maxY + outLines = reSortQlineArray(outLines) + + let parallelLinesIdx = concavePointIndices[0] + 4 //들어간선에 무조건 평행하는 선 찾기 + let parallelLines = outLines[parallelLinesIdx] + if (parallelLinesIdx >= outLines.length) { + parallelLines = outLines[parallelLinesIdx - outLines.length] + parallelLinesIdx = parallelLinesIdx - outLines.length + } + + let vertCenterLine = [] + let halfHoriCenterLinePoint = [] //카라바선의 2분할의 1번 배열 + let horiCenterLine = [] + let shorVertCenterLine = [] + + if (concavePointIndices[0] % 2 === 0) { + // 오목한 부분이 세로선일때 ㄷ, 역ㄷ + } else { + // 오목한 부분이 세로선일때 ㄷ, 역ㄷ + outLines.forEach((outline, index) => { + if (!(index % 2 === 0)) { + //세로라인이 케라바 라인임 + + if (concavePointIndices[0] !== index) { + //오목이가 아니면 반으로 갈라서 계산 + + //카라바 선의 2분할 치수를 그림 + let halfLength = outline.length / 2 + let centerLine1 = new QLine([outline.x1, outline.y1, outline.x1 + halfLength, outline.y1], { + stroke: 'red', + strokeWidth: 2, + property: 'normal', + fontSize: 14, + }) + canvas.add(centerLine1) + + let centerLine2 = new QLine([centerLine1.x2, outline.y1, centerLine1.x2 + halfLength, outline.y1], { + stroke: 'red', + strokeWidth: 2, + property: 'normal', + fontSize: 14, + }) + canvas.add(centerLine2) + canvas.remove(outline) //기존 라인 삭제 + + halfHoriCenterLinePoint.push({ index: index, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정 + } + } + }) + + //각 센터 라인을 그림 + halfHoriCenterLinePoint.forEach((centerPoint) => { + let line = new QLine([centerPoint.x2, centerPoint.y1, centerPoint.x2, concaveLine.line.y1], centerLineOpt) + canvas.add(line) + + line['arrayIndex'] = centerPoint.index //커스텀으로 기존 index를 넣어줌 + vertCenterLine.push(line) + }) + + vertCenterLine = reSortQlineArray(vertCenterLine) + + //해당라인에서 만나는점을 계산 + vertCenterLine.forEach((vertLine) => { + if (parallelLinesIdx !== vertLine.arrayIndex) { + //평행선을 제외한 애들만 네모를 연결 + let nearLine + + if (vertLine.arrayIndex > concaveLine.index) { + //센터에 인덱스가 오목점 보다 크면 다음 작으면 앞에꺼 + nearLine = outLines[concaveLine.index + 1] + } else { + nearLine = outLines[concaveLine.index - 1] + } + + let nearLineY = nearLine.y1 + if (parallelLinesIdx < concaveLine.index) { + //오목점 위치가 평행선보다 크면 위쪽으로 오목 + nearLineY = nearLine.y2 + } + + let centerExtendLine = new QLine([vertLine.line.x1, nearLineY, nearLine.x1, nearLineY], centerLineOpt) + canvas.add(centerExtendLine) + + let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2 + let centerDashLine = new QLine([vertLine.line.x1, betweenCenterLine, nearLine.x1, betweenCenterLine], dashedCenterLineOpt) + + canvas.add(centerDashLine) + horiCenterLine.push(centerDashLine) + shorVertCenterLine.push(vertLine) //마지막에 가운데 선을 긋기 위해 담음 + } else { + let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx) + + let dashCenterExtendLineLength = (longDashLine.x2 - longDashLine.x1) * 2 + let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2 + + let centerDashLine = new QLine( + [longDashLine.x1, betweenCenterLine, longDashLine.x1 + dashCenterExtendLineLength, betweenCenterLine], + dashedCenterLineOpt, + ) + canvas.add(centerDashLine) + horiCenterLine.push(centerDashLine) + } + }) + + if (parallelLinesIdx < concaveLine.index) { + offsetY = offsetY * -1 // 위로올린다 } - }) - // for (let i = 0; i < outLines.length; i++) { - // if (!i % 2 === 0) { - // if (i === concavePointIndices[0] - 1 || i === concavePointIndices[1] + 1) { - // //배열 3번이나 5번일때 - // } else { - // } - // } - // } - - let parallelLines = concavePointIndices[0] + 4 //들어간선에 무조건 평행하는 선 찾기 - if (parallelLines > outLines.length) { - parallelLines = outLines[concavePointIndices[0] + 4 - outLines.length - 1] + const lastInLine = new QLine( + [shorVertCenterLine[0].x1, lines[concavePointIndices[0]].y1 + offsetY, shorVertCenterLine[1].x1, lines[concavePointIndices[0]].y2 + offsetY], + centerLineOpt, + ) + canvas.add(lastInLine) + canvas.remove(outLines[concavePointIndices[0]]) } canvas.renderAll() @@ -2512,6 +2631,8 @@ export function useMode() { } const makeRoofPatternPolygon = (roofStyle) => { + console.log('roofPolygonPattern', roofPolygonPattern) + if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) { alert('객체가 비어있습니다.') return @@ -2561,21 +2682,12 @@ export function useMode() { fontSize: 15, // fontSize는 필요에 따라 조정 } - const bigRoof = new QPolygon(roofPolygonPattern.bigRoofPolygon, commonOption) - const middleRoof = new QPolygon(roofPolygonPattern.middleRoofPolygon, commonOption) - const smallRoof = new QPolygon(roofPolygonPattern.smallRoofPolygon, commonOption) - - bigRoof.setViewLengthText(false) //치수 필요없음 - middleRoof.setViewLengthText(false) - smallRoof.setViewLengthText(false) - - bigRoof.sendToBack() //객체를 가장 뒤로 - middleRoof.sendToBack() - smallRoof.sendToBack() - - canvas.add(bigRoof) //캔버스 객체 추가 - canvas.add(middleRoof) - canvas.add(smallRoof) + roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => { + const drawPolygon = new QPolygon(patternPolygon, commonOption) + drawPolygon.setViewLengthText(false) + drawPolygon.sendToBack() + canvas.add(drawPolygon) + }) canvas.renderAll() }