diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index dc41ac57..483ac98f 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -45,6 +45,7 @@ export function useMode() { templateMode() break case 'patterna': + applyTemplateA() break case 'patternb': applyTemplateB() @@ -728,11 +729,11 @@ export function useMode() { /** *벽 지붕 외곽선 생성 */ - const handleOuterlinesTest = (offset = 71) => { + const handleOuterlinesTest = (polygon, offset = 71) => { var offsetPoints = [] - const sortedIndex = getStartIndex(historyLines.current) - let tmpArraySorted = rearrangeArray(historyLines.current, sortedIndex) + const sortedIndex = getStartIndex(polygon.lines) + let tmpArraySorted = rearrangeArray(polygon.lines, sortedIndex) if (tmpArraySorted[0].direction === 'right') { //시계방향 @@ -900,6 +901,966 @@ export function useMode() { return rtnLines } + const applyTemplateA = () => { + changeMode(canvas, Mode.EDIT) + const polygon = drawWallPolygon() + handleClear() + + if (polygon.lines.length === 4) { + //4각형 + handleOuterLineTemplateA4Points(polygon) + } else if (polygon.lines.length === 6) { + //6각형 + handleOuterLineTemplateA6Points(polygon) + } + } + + const handleOuterLineTemplateA4Points = (polygon) => { + const edge = 20 + const eaves = 50 + + // 폴리곤의 각 변을 선으로 생성 + const createLine = (start, end, stroke, property) => + new QLine([start.x, start.y, end.x, end.y], { + stroke, + strokeWidth: 5, + property, + fontSize: 14, + }) + + const lines = polygon.points.map((start, i) => { + const end = polygon.points[(i + 1) % polygon.points.length] + const line = createLine(start, end, '#A0D468', 'normal') + canvas.add(line) + return line + }) + + const edgeIndexArray = [] + const normalIndexArray = [] + + lines.forEach((line, i) => { + if (i % 2 === 0) { + line.set('stroke', 'skyblue') + line.set('property', 'edge') + edgeIndexArray.push(i) + } else { + normalIndexArray.push(i) + } + canvas.add(line) + }) + + const centerPointX = (lines[1].x1 + lines[1].x2) / 2 + const centerPointY = (lines[0].y1 + lines[0].y2) / 2 + const horiCenterHalfLine = (lines[1].x2 - lines[1].x1) / 2 + + const createCenterLine = (x1, y1, x2, y2, stroke, strokeWidth, property, dashArray = []) => + new QLine([x1, y1, x2, y2], { + stroke, + strokeWidth, + property, + fontSize: 14, + strokeDashArray: dashArray, + }) + + const vertCenterLine = createCenterLine(centerPointX, lines[0].y1 - edge, centerPointX, lines[0].y2 + edge, 'blue', 4, 'center') + canvas.add(vertCenterLine) + + const horiCenterLineLeft = createCenterLine( + lines[1].x1 - eaves, + centerPointY, + lines[1].x1 + horiCenterHalfLine, + centerPointY, + 'black', + 2, + 'center', + [5, 5], + ) + canvas.add(horiCenterLineLeft) + + const horiCenterLineRight = createCenterLine( + horiCenterLineLeft.x2, + centerPointY, + horiCenterLineLeft.x2 + horiCenterHalfLine + eaves, + centerPointY, + 'black', + 2, + 'center', + [5, 5], + ) + canvas.add(horiCenterLineRight) + + const drawArray = lines + .map((line) => { + if (line.x1 === line.x2 && line.y1 < line.y2) { + return [{ x1: line.x1 - eaves, y1: line.y1 - edge, x2: line.x1 - eaves, y2: line.y2 + edge }] + } else if (line.x1 === line.x2 && line.y1 > line.y2) { + return [{ x1: line.x1 + eaves, y1: line.y1 + edge, x2: line.x1 + eaves, y2: line.y2 - edge }] + } else if (line.x1 < line.x2 && line.y1 === line.y2) { + return [ + { x1: line.x1 - eaves, y1: line.y1 + edge, x2: line.x1 + horiCenterHalfLine, y2: line.y2 + edge }, + { + x1: line.x1 + horiCenterHalfLine, + y1: line.y1 + edge, + x2: line.x1 + horiCenterHalfLine + horiCenterHalfLine + eaves, + y2: line.y2 + edge, + }, + ] + } else if (line.x1 > line.x2 && line.y1 === line.y2) { + return [ + { x1: line.x2 - eaves, y1: line.y1 - edge, x2: line.x2 + horiCenterHalfLine, y2: line.y2 - edge }, + { + x1: line.x2 + horiCenterHalfLine, + y1: line.y1 - edge, + x2: line.x2 + horiCenterHalfLine + horiCenterHalfLine + eaves, + y2: line.y2 - edge, + }, + ] + } + return [] + }) + .flat() + + drawArray.forEach((line) => { + const outLine = createLine({ x: line.x1, y: line.y1 }, { x: line.x2, y: line.y2 }, 'blue', 'normal') + canvas.add(outLine) + }) + } + + //탬플릿A 적용 + const handleOuterLineTemplateA6Points = (polygon) => { + let lines = [] + let outLines = [] + + // 폴리곤의 각 변을 선으로 생성 + for (let i = 0; i < polygon.points.length; i++) { + const start = polygon.points[i] + const end = polygon.points[(i + 1) % polygon.points.length] // 다음 점, 마지막 점의 경우 첫 점으로 + + const line = new QLine([start.x, start.y, end.x, end.y], { + stroke: '#A0D468', + strokeWidth: 5, + property: 'normal', + fontSize: 14, + }) + + // 선을 배열에 추가 + lines.push(line) + canvas.add(line) + } + + let highLineLength = 0 + let lowLineLength = 0 + + let prevHighIndex = 0 + let prevHighLength = 0 + + let prevLowIndex = 0 + let prevLowLength = 0 + + let edgeIndexArray = [] + let normalIndexArray = [] + + for (let i = 0; i < lines.length; i++) { + let line = lines[i] + + if (!(i % 2) == 0) { + //홀수일떄 + line.line.set('stroke', 'skyblue') + line.line.set('property', 'egde') + let length = Math.abs(line.get('x1') - line.get('x2')) + Math.abs(line.get('y1') - line.get('y2')) + + if (length > prevHighLength) { + //잴긴거 찾음 + prevHighIndex = i + prevHighLength = length + highLineLength = length + } + + if (prevLowLength === 0) { + //최초에는 없어서 한번 넣음 + prevLowIndex = i + prevLowLength = length + } + + if (length <= prevLowLength) { + //그뒤부터는 짧은거 대로 넣음 + prevLowIndex = i + prevLowLength = length + lowLineLength = length + } + + edgeIndexArray.push(i) + } else { + normalIndexArray.push(i) + } + + // 캔버스에 선 추가 + canvas.add(line) + } + + let prevDirecArray //긴선 앞배열 + let nextDirecArray //긴선 뒷배열 + let horizontalDirection //뽈록이 좌우 방향 + + if (prevHighIndex === 1) { + //카라바 기준 1과 5밖에 없음 + prevDirecArray = lines[prevHighIndex - 1] + nextDirecArray = lines[prevHighIndex + 1] + + //밑에쪽이 긴 방향 + horizontalDirection = prevDirecArray.height > nextDirecArray.height ? 'left' : 'right' + } else { + prevDirecArray = lines[prevHighIndex - 1] + nextDirecArray = lines[0] + + //위에가 긴 방향 + horizontalDirection = prevDirecArray.height > nextDirecArray.height ? 'right' : 'left' + } + + const edge = 20 //케라바 + const eaves = 50 //처마 + let firstLine = lines[1] + let secondLine = lines[3] + let lastLine = lines[5] + let vertCenterLine + let secondVertCenterLine + + if (prevHighIndex === 1) { + if (horizontalDirection === 'left') { + //배열 순서대로 뒤에꺼를 찾아서 계산한다 + const firstSubLine = lines[2] + const middleSubLine = lines[4] + + //ㄴ자 일경우 + //긴면 세로선 그리기 + let vertCenterPoint = (firstLine.x1 + firstLine.x2) / 2 //가장 긴선 중앙선 가운데 점 + vertCenterLine = new QLine( + [ + vertCenterPoint, + firstSubLine.y1 + edge, //다음 선의 높이만큼 가져와서 edge길이를 합함 + vertCenterPoint, + firstSubLine.y2 - edge, //다음 선의 높이만큼 가져옴 edge길이를 합함 + ], + { + stroke: 'blue', + strokeWidth: 5, + property: 'bigHoriCenter', + fontSize: 14, + }, + ) + canvas.add(vertCenterLine) + + //긴면 가로선 그리기 + let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 + let horiCenterLine1 = new QLine( + [firstLine.x1 - eaves, horiCenterPoint, firstLine.x1 - eaves + firstLine.length / 2 + eaves, horiCenterPoint], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(horiCenterLine1) + + let horiCenterLine2 = new QLine( + [ + firstLine.x1 - eaves + firstLine.length / 2 + eaves, + horiCenterPoint, + firstLine.x1 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves, + horiCenterPoint, + ], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(horiCenterLine2) + + //작은 지붕쪽 높이 길이를 구하는 로직 + let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 + secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + + canvas.add(secondVertCenterLine) + + //작은 지붕쪽 너비 길이를 구한는 로직 + let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 + let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2 + + let secondHoriCenterLine = new QLine( + [secondVertCenterLine.x1, secondHoriCenterPoint, secondVertCenterLine.x1 + secondHoriCenterLength + eaves, secondHoriCenterPoint], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(secondHoriCenterLine) + + //일반라인 외각선 그리기 + normalIndexArray.forEach((index) => { + const line = lines[index] + if (index === 0) { + let drawline = new QLine([line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawline) + } else { + let tmpEdge = index === 2 ? edge : 0 + let drawline = new QLine([line.x1 + eaves, line.y1 + tmpEdge, line.x2 + eaves, line.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawline) + } + }) + + //케라바 라인 외각선 그리기 + const firstOuterLine = lines[1] + const middleOuterLine = lines[3] + const lastOuterLine = lines[5] + + //첫번째 외곽선 1번 + let halfLength = firstOuterLine.length / 2 + let drawFirstLine1 = new QLine( + [firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge], + { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }, + ) + canvas.add(drawFirstLine1) + //첫번째 외곽선 2번 + let drawFirstLine2 = new QLine([drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawFirstLine2) + + //중간라인 외각선 + let drawMiddleLine = new QLine([drawFirstLine2.x2, middleOuterLine.y1 - edge, drawFirstLine2.x1, middleOuterLine.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawMiddleLine) + + //마지막 외각선 + halfLength = lastLine.length / 2 + let drawLastLine1 = new QLine([lastOuterLine.x2 + halfLength, lastOuterLine.y1 - edge, lastOuterLine.x2 - eaves, lastOuterLine.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastLine1) + + let drawLastLine2 = new QLine([drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastLine2) + + let drawLastInLine1 = new QLine( + [secondVertCenterLine.x1, secondVertCenterLine.y1, secondVertCenterLine.x1 + halfLength + eaves, secondVertCenterLine.y1], + { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }, + ) + canvas.add(drawLastInLine1) + + let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastInLine2) + } else { + //아래쪽 길게 오른쪽 방향 + //배열 순서대로 뒤에꺼를 찾아서 계산한다 + + firstLine = lines[1] + secondLine = lines[5] + lastLine = lines[3] + + const firstSubLine = lines[0] + const middleSubLine = lines[4] + + //ㄴ자 일경우 + //긴면 세로선 그리기 + let vertCenterPoint = (firstLine.x1 + firstLine.x2) / 2 //가장 긴선 중앙선 가운데 점 + vertCenterLine = new QLine( + [ + vertCenterPoint, + firstSubLine.y1 - edge, //다음 선의 높이만큼 가져와서 edge길이를 합함 + vertCenterPoint, + firstSubLine.y2 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함 + ], + { + stroke: 'blue', + strokeWidth: 5, + property: 'bigHoriCenter', + fontSize: 14, + }, + ) + canvas.add(vertCenterLine) + + //긴면 가로선 그리기 + let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 + let horiCenterLine1 = new QLine( + [firstLine.x1 - eaves, horiCenterPoint, firstLine.x1 - eaves + firstLine.length / 2 + eaves, horiCenterPoint], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(horiCenterLine1) + + let horiCenterLine2 = new QLine( + [ + firstLine.x1 - eaves + firstLine.length / 2 + eaves, + horiCenterPoint, + firstLine.x1 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves, + horiCenterPoint, + ], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(horiCenterLine2) + + //작은 지붕쪽 높이 길이를 구하는 로직 + let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 + secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 - edge, secondVertCenterPoint, middleSubLine.y2], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + + canvas.add(secondVertCenterLine) + + //작은 지붕쪽 너비 길이를 구한는 로직 + let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 + let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2 + + let secondHoriCenterLine = new QLine( + [secondVertCenterLine.x1 - secondHoriCenterLength - eaves, secondHoriCenterPoint, secondVertCenterLine.x1, secondHoriCenterPoint], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(secondHoriCenterLine) + + //일반라인 외각선 그리기 + normalIndexArray.forEach((index) => { + const line = lines[index] + if (index === 0 || index === 4) { + let tmpEdge = index === 4 ? 0 : edge + let drawline = new QLine([line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + tmpEdge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawline) + } else { + let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawline) + } + }) + + //케라바 라인 외각선 그리기 + const firstOuterLine = lines[1] + const middleOuterLine = lines[5] + const lastOuterLine = lines[3] + + //첫번째 외곽선 1번 + let halfLength = firstOuterLine.length / 2 + let drawFirstLine1 = new QLine( + [firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge], + { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }, + ) + canvas.add(drawFirstLine1) + + //첫번째 외곽선 2번 + let drawFirstLine2 = new QLine([drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawFirstLine2) + + //중간라인 외각선 + let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 - edge, drawFirstLine1.x2, middleOuterLine.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawMiddleLine) + + //마지막 외각선 + halfLength = lastLine.length / 2 + + console.log(lastOuterLine) + + let drawLastLine1 = new QLine([lastOuterLine.x2 - eaves, lastOuterLine.y1 - edge, lastOuterLine.x1 - halfLength, lastOuterLine.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastLine1) + + let drawLastLine2 = new QLine([drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastLine2) + + let drawLastInLine1 = new QLine( + [secondVertCenterLine.x1, secondVertCenterLine.y2, secondVertCenterLine.x1 - halfLength - eaves, secondVertCenterLine.y2], + { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }, + ) + canvas.add(drawLastInLine1) + + let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastInLine2) + } + } else { + if (horizontalDirection === 'left') { + //아래쪽 길게 오른쪽 방향 + //배열 순서대로 뒤에꺼를 찾아서 계산한다 + firstLine = lines[5] + secondLine = lines[3] + lastLine = lines[1] + + const firstSubLine = lines[4] + const middleSubLine = lines[2] + + //ㄴ자 일경우 + //긴면 세로선 그리기 + let vertCenterPoint = (firstLine.x1 + firstLine.x2) / 2 //가장 긴선 중앙선 가운데 점 + vertCenterLine = new QLine( + [ + vertCenterPoint, + firstSubLine.y2 - edge, //다음 선의 높이만큼 가져와서 edge길이를 합함 + vertCenterPoint, + firstSubLine.y1 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함 + ], + { + stroke: 'blue', + strokeWidth: 5, + property: 'bigHoriCenter', + fontSize: 14, + }, + ) + canvas.add(vertCenterLine) + + //긴면 가로선 그리기 + let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 + let horiCenterLine1 = new QLine( + [firstLine.x2 - eaves, horiCenterPoint, firstLine.x2 - eaves + firstLine.length / 2 + eaves, horiCenterPoint], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(horiCenterLine1) + + let horiCenterLine2 = new QLine( + [ + firstLine.x2 - eaves + firstLine.length / 2 + eaves, + horiCenterPoint, + firstLine.x2 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves, + horiCenterPoint, + ], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(horiCenterLine2) + + //작은 지붕쪽 높이 길이를 구하는 로직 + let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 + secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 + edge, secondVertCenterPoint, middleSubLine.y2], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + + canvas.add(secondVertCenterLine) + + //작은 지붕쪽 너비 길이를 구한는 로직 + let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 + let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2 + + let secondHoriCenterLine = new QLine( + [secondVertCenterLine.x1 + secondHoriCenterLength + eaves, secondHoriCenterPoint, secondVertCenterLine.x1, secondHoriCenterPoint], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(secondHoriCenterLine) + + //일반라인 외각선 그리기 + normalIndexArray.forEach((index) => { + const line = lines[index] + if (index === 0) { + let drawline = new QLine([line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawline) + } else { + let tmpEdge = index === 2 ? 0 : edge + let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - tmpEdge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawline) + } + }) + + //케라바 라인 외각선 그리기 + const firstOuterLine = lines[5] + const middleOuterLine = lines[3] + const lastOuterLine = lines[1] + + //첫번째 외곽선 1번 + let halfLength = firstOuterLine.length / 2 + let drawFirstLine1 = new QLine( + [firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge], + { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }, + ) + canvas.add(drawFirstLine1) + + //첫번째 외곽선 2번 + let drawFirstLine2 = new QLine([drawFirstLine1.x2, drawFirstLine1.y1, drawFirstLine1.x2 + halfLength + eaves, drawFirstLine1.y2], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawFirstLine2) + + //중간라인 외각선 + let drawMiddleLine = new QLine([drawFirstLine2.x1, middleOuterLine.y1 + edge, drawFirstLine2.x2, middleOuterLine.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawMiddleLine) + + //마지막 외각선 + halfLength = lastLine.length / 2 + + console.log(lastOuterLine) + + let drawLastLine1 = new QLine([lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastLine1) + + let drawLastLine2 = new QLine([drawLastLine1.x2, drawLastLine1.y1, drawLastLine1.x2 + halfLength + eaves, drawLastLine1.y1], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastLine2) + + let drawLastInLine1 = new QLine( + [secondVertCenterLine.x1, secondVertCenterLine.y2, secondVertCenterLine.x1 + halfLength + eaves, secondVertCenterLine.y2], + { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }, + ) + canvas.add(drawLastInLine1) + + let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastInLine2) + } else { + //윗쪽 길게 오른쪽 방향 + //배열 순서대로 뒤에꺼를 찾아서 계산한다 + firstLine = lines[5] + secondLine = lines[1] + lastLine = lines[3] + + const firstSubLine = lines[0] + const middleSubLine = lines[2] + + //ㄴ자 일경우 + //긴면 세로선 그리기 + let vertCenterPoint = (firstLine.x1 + firstLine.x2) / 2 //가장 긴선 중앙선 가운데 점 + vertCenterLine = new QLine( + [ + vertCenterPoint, + firstSubLine.y1 - edge, //다음 선의 높이만큼 가져와서 edge길이를 합함 + vertCenterPoint, + firstSubLine.y2 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함 + ], + { + stroke: 'blue', + strokeWidth: 5, + property: 'bigHoriCenter', + fontSize: 14, + }, + ) + canvas.add(vertCenterLine) + + //긴면 가로선 그리기 + let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 + let horiCenterLine1 = new QLine( + [firstLine.x2 - eaves, horiCenterPoint, firstLine.x2 - eaves + firstLine.length / 2 + eaves, horiCenterPoint], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(horiCenterLine1) + + let horiCenterLine2 = new QLine( + [ + firstLine.x2 - eaves + firstLine.length / 2 + eaves, + horiCenterPoint, + firstLine.x2 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves, + horiCenterPoint, + ], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(horiCenterLine2) + + //작은 지붕쪽 높이 길이를 구하는 로직 + let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 + secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + + canvas.add(secondVertCenterLine) + + //작은 지붕쪽 너비 길이를 구한는 로직 + let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 + let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2 + + let secondHoriCenterLine = new QLine( + [secondVertCenterLine.x1, secondHoriCenterPoint, secondVertCenterLine.x1 - secondHoriCenterLength - eaves, secondHoriCenterPoint], + { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + }, + ) + canvas.add(secondHoriCenterLine) + + //일반라인 외각선 그리기 + normalIndexArray.forEach((index) => { + const line = lines[index] + if (index === 0 || index === 2) { + let tmpEdge = index === 2 ? 0 : edge + let drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawline) + } else { + let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawline) + } + }) + + //케라바 라인 외각선 그리기 + const firstOuterLine = lines[5] + const middleOuterLine = lines[1] + const lastOuterLine = lines[3] + + //첫번째 외곽선 1번 + let halfLength = firstOuterLine.length / 2 + let drawFirstLine1 = new QLine( + [firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge], + { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }, + ) + canvas.add(drawFirstLine1) + + //첫번째 외곽선 2번 + let drawFirstLine2 = new QLine([drawFirstLine1.x2, drawFirstLine1.y1, drawFirstLine1.x2 + halfLength + eaves, drawFirstLine1.y2], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawFirstLine2) + + //중간라인 외각선 + let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 + edge, drawFirstLine1.x2, middleOuterLine.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawMiddleLine) + + //마지막 외각선 + halfLength = lastLine.length / 2 + + let drawLastLine1 = new QLine([lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastLine1) + + let drawLastLine2 = new QLine([drawLastLine1.x2, drawLastLine1.y1, drawLastLine1.x2 + halfLength + eaves, drawLastLine1.y1], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastLine2) + + let drawLastInLine1 = new QLine([vertCenterLine.x2, vertCenterLine.y2, secondVertCenterLine.x1, vertCenterLine.y2], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastInLine1) + + let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], { + stroke: 'blue', + strokeWidth: 4, + property: 'centerLine', + fontSize: 14, + }) + canvas.add(drawLastInLine2) + } + } + + canvas.renderAll() + } + /** * 템플릿 B 적용 */