diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 9d3743df..18a7a574 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1389,6 +1389,11 @@ export function useMode() { let vertCenterLine let secondVertCenterLine let templatePolygonObj = {} + let roofPatternPolygonArray = [] + + let bigRoofPolygon = [] + let middleRoofPolygon = [] + let smallRoofPolygon = [] if (prevHighIndex === 1) { if (horizontalDirection === 'left') { @@ -1514,7 +1519,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 }, @@ -1523,20 +1528,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 { //아래쪽 길게 오른쪽 방향 //배열 순서대로 뒤에꺼를 찾아서 계산한다 @@ -1664,7 +1668,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 }, @@ -1673,20 +1677,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') { @@ -1808,7 +1811,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 }, @@ -1817,21 +1820,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 { //윗쪽 길게 오른쪽 방향 //배열 순서대로 뒤에꺼를 찾아서 계산한다 @@ -1953,7 +1954,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 }, @@ -1962,24 +1963,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() } @@ -1992,6 +1997,8 @@ export function useMode() { let lines = [] //내각라인 let outLines = [] //아웃라인 let halfLength = 0 //선길이 + let offsetX + let offsetY const dashedCenterLineOpt = { stroke: 'black', @@ -2044,6 +2051,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 @@ -2076,7 +2109,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] @@ -2111,11 +2147,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 @@ -2157,35 +2190,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() @@ -2206,8 +2325,10 @@ export function useMode() { // handleOuterLineTemplateB(params) console.log(polygon.lines.length) if (polygon.lines.length === 4) { + console.log('4각형') handleTemplateBRect(params) - } else if (polygon.length === 6) { + } else if (polygon.lines.length === 6) { + console.log('6각형') handleTemplateB(params) } } @@ -2239,6 +2360,9 @@ export function useMode() { isActiveLengthText: false, } + const bigRoofPolygon = [] + const middleRoofPolygon = [] + polygon.lines.forEach((line, index) => { let outline if (index === 0) { @@ -2249,6 +2373,9 @@ export function useMode() { centerLinePoint.y2 = centeredPoint centerDashLinePoint.y1 = line.y1 - eaves centerDashLinePoint.y2 = line.y2 + eaves + bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves } + middleRoofPolygon[0] = { x: line.x1 - edge, y: centeredPoint } + middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves } } else if (index === 1) { outline = new QLine([line.x1 - edge, line.y1 + eaves, line.x2 + edge, line.y2 + eaves], qlineOpt) const centeredPoint = getCenterPoint(line.x1, line.x2) @@ -2257,6 +2384,8 @@ export function useMode() { centerDashLinePoint.x2 = centeredPoint } else if (index === 2) { outline = new QLine([line.x1 + edge, line.y1 + eaves, line.x2 + edge, line.y2 - eaves], qlineOpt) + bigRoofPolygon[3] = { x: line.x2 + edge, y: line.y2 - eaves } + middleRoofPolygon[2] = { x: line.x1 + edge, y: line.y1 + eaves } } else if (index === 3) { outline = new QLine([line.x1 + edge, line.y1 - eaves, line.x2 - edge, line.y2 - eaves], qlineOpt) } @@ -2275,6 +2404,18 @@ export function useMode() { ) canvas.add(centerDashLine2) + bigRoofPolygon[1] = { x: centerLine.x1, y: centerLine.y1 } + bigRoofPolygon[2] = { x: centerLine.x2, y: centerLine.y2 } + + middleRoofPolygon[3] = { x: centerLinePoint.x2, y: centerLinePoint.y2 } + + const roofPatternPolygonArray = [] + roofPatternPolygonArray.push(bigRoofPolygon) + roofPatternPolygonArray.push(middleRoofPolygon) + if (roofPatternPolygonArray.length > 0) { + setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines }) + } + canvas.renderAll() } @@ -2334,6 +2475,13 @@ export function useMode() { fontSize: fontSize, } + /** + * 지붕 패턴을 위한 폴리곤 좌표 생성 + */ + const bigRoofPolygon = [] + const middleRoofPolygon = [] + const smallRoofPolygon = [] + rerangeOdd.forEach((line, index) => { const centeredPoint = getCenterPoint(line.y1, line.y2) let points1 = [] @@ -2347,26 +2495,50 @@ export function useMode() { centralLinePoint.y2 = centeredPoint centralDashLinePoint.y1 = line.y1 - eaves centralDashLinePoint.y2 = line.y2 + eaves + if (polygon.shape === 2) { + middleRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves } + middleRoofPolygon[1] = { x: line.x1 - edge, y: centeredPoint } + } else { + bigRoofPolygon[1] = { x: line.x1 - edge, y: centeredPoint } + bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves } + middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves } + } } else if (index === 1) { if (polygon.shape === 2) { points1 = [line.x1 + edge, line.y1 - eaves, line.x1 + edge, centeredPoint] points2 = [line.x1 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves] centralSubLinePoint.x2 = line.x1 + edge centralSubLinePoint.y2 = centeredPoint + bigRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves } + bigRoofPolygon[3] = { x: line.x2 + edge, y: centeredPoint } + smallRoofPolygon[0] = { x: line.x1 + edge, y: centeredPoint } + smallRoofPolygon[1] = { x: line.x1 + edge, y: line.y1 - eaves } } else { points1 = [line.x1 + edge, getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2), line.x2 + edge, line.y2 + eaves] points2 = [line.x1, getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2), line.x1, line.y1 + eaves] centralLinePoint.x2 = line.x1 + edge centralSubLinePoint.y1 = getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2) centralSubLinePoint.y2 = getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2) + bigRoofPolygon[3] = { x: line.x1 + edge, y: centralSubLinePoint.y1 } + middleRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves } + smallRoofPolygon[0] = { x: line.x1, y: centralSubLinePoint.y1 } + smallRoofPolygon[1] = { x: line.x1, y: line.y1 + eaves } } } else if (index === 2) { if (polygon.shape === 2) { points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centralSubLinePoint.y2] points2 = [line.x2, line.y2 - eaves, line.x2, centralSubLinePoint.y2] + bigRoofPolygon[4] = { x: line.x2 + edge, y: centralSubLinePoint.y2 } + middleRoofPolygon[3] = { x: line.x1 + edge, y: line.y1 - eaves } + smallRoofPolygon[2] = { x: line.x2, y: line.y2 - eaves } + smallRoofPolygon[3] = { x: line.x2, y: centralSubLinePoint.y2 } } else { points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centeredPoint] points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves] + bigRoofPolygon[4] = { x: line.x1 + edge, y: centralSubLinePoint.y2 } + bigRoofPolygon[5] = { x: line.x1 + edge, y: line.y1 - eaves } + smallRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves } + smallRoofPolygon[3] = { x: line.x2 + edge, y: centeredPoint } } } } else { @@ -2375,12 +2547,26 @@ export function useMode() { centralSubLinePoint.x1 = line.x1 - edge centralSubLinePoint.y1 = getCenterPoint(line.y1, line.y2) centralSubLinePoint.y2 = getCenterPoint(line.y1, line.y2) + if (polygon.shape === 1) { + bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves } + bigRoofPolygon[1] = { x: line.x1 - edge, y: getCenterPoint(line.y1, line.y2) } + smallRoofPolygon[0] = { x: line.x1 - edge, y: getCenterPoint(line.y1, line.y2) } + smallRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves } + } else { + bigRoofPolygon[0] = { x: line.x1 - edge, y: centeredPoint } + bigRoofPolygon[1] = { x: line.x1 - edge, y: line.y2 + eaves } + smallRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves } + smallRoofPolygon[1] = { x: centralSubLinePoint.x1, y: centralSubLinePoint.y1 } + } } else if (index === 1) { if (polygon.shape === 1) { points1 = [line.x1 - edge, centralSubLinePoint.y1, line.x2 - edge, line.y2 + eaves] points2 = [line.x1, centralSubLinePoint.y1, line.x1, line.y1 + eaves] centralLinePoint.x1 = line.x1 - edge centralSubLinePoint.x2 = line.x2 + bigRoofPolygon[2] = { x: line.x1 - edge, y: centralSubLinePoint.y2 } + middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves } + smallRoofPolygon[2] = { x: line.x1, y: line.y1 + eaves } } else { points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centeredPoint] points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves] @@ -2389,6 +2575,9 @@ export function useMode() { centralLinePoint.y2 = centeredPoint centralDashLinePoint.y1 = line.y1 - eaves centralDashLinePoint.y2 = line.y2 + eaves + bigRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves } + bigRoofPolygon[3] = { x: line.x2 + edge, y: centralLinePoint.y2 } + middleRoofPolygon[3] = { x: line.x1 + edge, y: line.y1 - eaves } } } else { if (polygon.shape === 1) { @@ -2399,11 +2588,18 @@ export function useMode() { centralLinePoint.y2 = centeredPoint centralDashLinePoint.y1 = line.y1 - eaves centralDashLinePoint.y2 = line.y2 + eaves + bigRoofPolygon[5] = { x: line.x1 + edge, y: line.y1 - eaves } + middleRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves } } else { points1 = [line.x1 - edge, line.y1 - eaves, line.x2 - edge, centralSubLinePoint.y1] points2 = [line.x2, line.y2 - eaves, line.x2, centralSubLinePoint.y2] centralLinePoint.x1 = line.x1 - edge centralSubLinePoint.x2 = line.x2 + bigRoofPolygon[4] = { x: line.x2 - edge, y: centralLinePoint.y1 } + bigRoofPolygon[5] = { x: line.x2 - edge, y: centralSubLinePoint.y2 } + middleRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves } + smallRoofPolygon[2] = { x: line.x2, y: centralSubLinePoint.y2 } + smallRoofPolygon[3] = { x: line.x2, y: line.y2 - eaves } } } } @@ -2529,6 +2725,34 @@ export function useMode() { ) canvas.add(centralSubDashLine) + if (polygon.shape === 1) { + bigRoofPolygon[3] = { x: centralLine.x1, y: centralLine.y1 } + bigRoofPolygon[4] = { x: centralLine.x2, y: centralLine.y2 } + middleRoofPolygon[0] = { x: centralLine.x1, y: centralLine.y1 } + middleRoofPolygon[3] = { x: centralLine.x2, y: centralLine.y2 } + smallRoofPolygon[3] = { x: centralSubLinePoint.x2, y: centralSubLinePoint.y2 } + } else if (polygon.shape === 2) { + bigRoofPolygon[0] = { x: centralLinePoint.x1, y: centralLinePoint.y1 } + bigRoofPolygon[1] = { x: centralLinePoint.x1, y: centralDashLinePoint.y2 } + bigRoofPolygon[5] = { x: centralLinePoint.x2, y: centralLinePoint.y2 } + middleRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 } + } else if (polygon.shape === 3) { + bigRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 } + middleRoofPolygon[0] = { x: centralLine.x1, y: centralLine.y1 } + middleRoofPolygon[3] = { x: centralLine.x2, y: centralLine.y2 } + } else if (polygon.shape === 4) { + middleRoofPolygon[1] = { x: centralLine.x1, y: centralLine.y1 } + middleRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 } + } + + const roofPatternPolygonArray = [] + // if (bigRoofPolygon.length > 0 && middleRoofPolygon.length > 0 && smallRoofPolygon.length > 0) { + roofPatternPolygonArray.push(bigRoofPolygon) + roofPatternPolygonArray.push(middleRoofPolygon) + roofPatternPolygonArray.push(smallRoofPolygon) + setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines }) + // } + canvas.renderAll() } @@ -2611,6 +2835,8 @@ export function useMode() { } const makeRoofPatternPolygon = (roofStyle) => { + console.log('roofPolygonPattern', roofPolygonPattern) + if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) { alert('객체가 비어있습니다.') return @@ -2660,21 +2886,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() }