diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 249984c7..e691ef71 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -2015,16 +2015,15 @@ export function useMode() { } } - roofPatternPolygonArray.push(bigRoofPolygon) - roofPatternPolygonArray.push(middleRoofPolygon) - roofPatternPolygonArray.push(smallRoofPolygon) - - setRoofPolygonPattern({ roofPatternPolygonArray, lines }) + roofPatternPolygonArray.push(bigRoofPolygon) //지붕폴리곤 + roofPatternPolygonArray.push(middleRoofPolygon) //중간라인 폴리곤 + roofPatternPolygonArray.push(smallRoofPolygon) //작은지붕폴리곤 + setRoofPolygonPattern({ roofPatternPolygonArray, lines }) //모든 행을 저장 canvas.renderAll() } - const handleOuterLineTemplateA8Points = (polygon, offsetInputX = 50, offsetInputY = 20) => { + const handleOuterLineTemplateA8Points = (polygon, offsetInputX = 20, offsetInputY = 50) => { let offsetPoints = [] const originalMax = 71 @@ -2038,15 +2037,15 @@ export function useMode() { const dashedCenterLineOpt = { stroke: 'black', - strokeWidth: 4, + strokeWidth: 1, property: 'centerLine', - strokeDashArray: [5, 5], + strokeDashArray: [8, 4], fontSize: 14, } const centerLineOpt = { stroke: 'blue', - strokeWidth: 5, + strokeWidth: 2, property: 'bigHoriCenter', fontSize: 14, } @@ -2056,10 +2055,8 @@ export function useMode() { const start = polygon.points[i] const end = polygon.points[(i + 1) % polygon.points.length] // 다음 점, 마지막 점의 경우 첫 점으로 - const color = i % 2 === 0 ? '#A0D468' : 'skyblue' - const line = new QLine([start.x, start.y, end.x, end.y], { - stroke: color, + stroke: '#A0D468', strokeWidth: 2, property: 'normal', fontSize: 14, @@ -2074,12 +2071,6 @@ export function useMode() { const sortedIndex = getStartIndex(polygon.lines) let tmpArraySorted = rearrangeArray(polygon.lines, sortedIndex) - - if (tmpArraySorted[0].direction === 'right') { - //시계방향 - tmpArraySorted = tmpArraySorted.reverse() //그럼 배열을 거꾸로 만들어서 무조건 반시계방향으로 배열 보정 - } - setSortedArray(tmpArraySorted) //recoil에 넣음 const points = tmpArraySorted.map((line) => ({ @@ -2090,9 +2081,10 @@ export function useMode() { //좌표 재정렬 function reSortQlineArray(array) { let tmpArray = [] + let minX, minY, maxX, maxY + let tmp array.forEach((arr, index) => { - let minX, minY, maxX, maxY - let tmp = arr + tmp = arr if (arr.x2 < arr.x1 || arr.y2 < arr.y1) { minX = arr.x2 minY = arr.y2 @@ -2149,56 +2141,46 @@ export function useMode() { 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] - var next = points[(i + 1) % points.length] + + for (let i = 0; i < points.length; i++) { + let prev = points[(i - 1 + points.length) % points.length] + let current = points[i] + let next = points[(i + 1) % points.length] // 두 벡터 계산 (prev -> current, current -> next) - var vector1 = { x: current.x - prev.x, y: current.y - prev.y } - var vector2 = { x: next.x - current.x, y: next.y - current.y } + let vector1 = { x: current.x - prev.x, y: current.y - prev.y } + let vector2 = { x: next.x - current.x, y: next.y - current.y } // 벡터의 길이 계산 - var length1 = Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y) - var length2 = Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y) + let length1 = Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y) + let length2 = Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y) // 벡터를 단위 벡터로 정규화 - var unitVector1 = { x: vector1.x / length1, y: vector1.y / length1 } - var unitVector2 = { x: vector2.x / length2, y: vector2.y / length2 } + let unitVector1 = { x: vector1.x / length1, y: vector1.y / length1 } + let unitVector2 = { x: vector2.x / length2, y: vector2.y / length2 } // 법선 벡터 계산 (왼쪽 방향) - var normal1 = { x: -unitVector1.y, y: unitVector1.x } - var normal2 = { x: -unitVector2.y, y: unitVector2.x } + let normal1 = { x: -unitVector1.y, y: unitVector1.x } + let normal2 = { x: -unitVector2.y, y: unitVector2.x } // 법선 벡터 평균 계산 - var averageNormal = { + let averageNormal = { x: (normal1.x + normal2.x) / 2, y: (normal1.y + normal2.y) / 2, } // 평균 법선 벡터를 단위 벡터로 정규화 - var lengthNormal = Math.sqrt(averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y) - var unitNormal = { + let lengthNormal = Math.sqrt(averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y) + let unitNormal = { x: averageNormal.x / lengthNormal, y: averageNormal.y / lengthNormal, } - 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 - } else { - offsetX = (offsetInputX / transformedMax) * originalMax * 2 - offsetY = 1 - } - } else { - offsetX = (offsetInputX / transformedMax) * originalMax * 2 - offsetY = (offsetInputY / transformedMax) * originalMax * 2 - } + offsetX = (offsetInputX / transformedMax) * originalMax * 2 + offsetY = (offsetInputY / transformedMax) * originalMax * 2 // 오프셋 적용 - var offsetPoint = { + let offsetPoint = { x1: current.x + unitNormal.x * offsetX, y1: current.y + unitNormal.y * offsetY, } @@ -2207,6 +2189,7 @@ export function useMode() { } const outlinePolygon = makePolygon(offsetPoints) + outlinePolygon.setViewLengthText(false) // 아웃라인 폴리곤의 각 변을 선으로 생성 for (let i = 0; i < outlinePolygon.points.length; i++) { @@ -2218,6 +2201,7 @@ export function useMode() { strokeWidth: 2, property: 'normal', fontSize: 14, + idx: i, }) // 선을 배열에 추가 @@ -2227,13 +2211,8 @@ export function useMode() { canvas?.remove(outlinePolygon) //임시 폴리곤을 삭제 - //라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정 - 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 } @@ -2242,10 +2221,207 @@ export function useMode() { let horiCenterLine = [] let shorVertCenterLine = [] + let edgeIndexArray = [] + if (concavePointIndices[0] % 2 === 0) { - // 오목한 부분이 세로선일때 ㄷ, 역ㄷ + //케라바 색을 바꾼다 + lines.forEach((line, index) => { + if (index % 2 === 0) { + line.line.set('stroke', 'skyblue') + if (concavePointIndices[0] !== index) { + edgeIndexArray.push(index) + } + } + }) + + console.log('edgeIndexArray', edgeIndexArray) + + outLines = reSortQlineArray(outLines) + edgeIndexArray.forEach((idx, index) => { + //가로라인이 케라바 라인임 + if (concavePointIndices[0] !== idx) { + //오목이가 아니면 반으로 갈라서 계산 + + //카라바 선의 2분할 치수를 그림 + let halfLength = outLines[idx].length / 2 + let centerLine1 = new QLine([outLines[idx].x1, outLines[idx].y1, outLines[idx].x1, outLines[idx].y1 + halfLength], centerLineOpt) + canvas.add(centerLine1) + + let centerLine2 = new QLine([outLines[idx].x1, centerLine1.y2, outLines[idx].x2, centerLine1.y2 + halfLength], centerLineOpt) + canvas.add(centerLine2) + canvas.remove(outLines[idx]) //기존 라인 삭제 + + halfHoriCenterLinePoint.push({ index: idx, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정 + } + }) + + console.log('halfHoriCenterLinePoint', halfHoriCenterLinePoint) + + // //각 센터 라인을 그림 + halfHoriCenterLinePoint.forEach((centerPoint) => { + let tmpX2 = parallelLinesIdx !== centerPoint.index ? concaveLine.line.x2 : outLines[concavePointIndices[0]].x1 //평행선에서 내려오는 선은 아웃라인에 닿아야한다 + + let line = new QLine([centerPoint.x2, centerPoint.y2, tmpX2, centerPoint.y2], centerLineOpt) + canvas.add(line) + + line['arrayIndex'] = centerPoint.index //커스텀으로 기존 index를 넣어줌 + vertCenterLine.push(line) + }) + + vertCenterLine = reSortQlineArray(vertCenterLine) + lines = reSortQlineArray(lines) + + console.log('parallelLinesIdx', parallelLinesIdx) + + //해당라인에서 만나는점을 계산 + vertCenterLine.forEach((vertLine) => { + if (parallelLinesIdx !== vertLine.arrayIndex) { + //평행선을 제외한 애들만 네모를 연결 + let nearLine + let nearOutline + if (vertLine.arrayIndex > concaveLine.index) { + //센터에 인덱스가 오목점 보다 크면 다음 작으면 앞에꺼 + nearLine = lines[concaveLine.index + 1] + nearOutline = outLines[concaveLine.index + 1] + } else { + nearLine = lines[concaveLine.index - 1] + nearOutline = outLines[concaveLine.index - 1] + } + + let nearLineY = nearLine.y1 + if (parallelLinesIdx < concaveLine.index) { + //오목점 위치가 평행선보다 크면 위쪽으로 오목 + nearLineY = nearLine.y2 + } + + //기존에 있는 라인에서 연장해서 새로 그림 + let centerExtendHoriLine = new QLine([vertLine.x1, nearOutline.line.y1, vertLine.x2, nearOutline.line.y2], centerLineOpt) + canvas.add(centerExtendHoriLine) + canvas.remove(nearOutline) + outLines.splice(nearOutline.idx, 1, centerExtendHoriLine) //아웃라인에 데이터를 다시 넣는다 + + let centerExtendLine = new QLine([vertLine.line.x2, vertLine.line.y2, centerExtendHoriLine.x2, centerExtendHoriLine.y2], centerLineOpt) + canvas.add(centerExtendLine) //새로그리고 + + let betweenCenterLine = (vertLine.line.x1 + vertLine.line.x2) / 2 + let centerDashLine = new QLine([vertLine.line.y1, betweenCenterLine, nearOutline.y1, 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 + let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2 + let totalLength = ((longDashLine.x2 - longDashLine.x1) * 2) / dashCenterExtendLineLength + + //반 쪼개서 그린다 + for (let i = 0; i < totalLength; i++) { + let startX = i === 0 ? longDashLine.x1 : longDashLine.x1 + dashCenterExtendLineLength + let centerDashLine = new QLine([startX, betweenCenterLine, startX + dashCenterExtendLineLength, betweenCenterLine], dashedCenterLineOpt) + canvas.add(centerDashLine) + horiCenterLine.push(centerDashLine) + } + } + }) + + // //마지막에 오목한 외곽선을 연장한다 + // const tmpLastOutLine = outLines[concavePointIndices[0]] + // const lastOutLine = new QLine([shorVertCenterLine[0].x1, tmpLastOutLine.y1, shorVertCenterLine[1].x1, tmpLastOutLine.y2], centerLineOpt) + // canvas.add(lastOutLine) + // canvas.remove(tmpLastOutLine) + + // let tmpVertCenterLine = outLines.filter((x, index) => index % 2 === 0) //세로만 찾음 + // tmpVertCenterLine = tmpVertCenterLine.concat(vertCenterLine) + // tmpVertCenterLine.sort((a, b) => a.x1 - b.x1) + // tmpVertCenterLine.push(lastOutLine) + + // let roofPatternPolygonArray = [] + // let tmpArray = [] + // let tmpBigArray = [] + + // const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의 + + // for (let i = 0; i < tmpVertCenterLine.length - 1; i++) { + // //-1인건 마지막은 오목한 선이라 돌 필요 없음 + // //라인 하나에 두점씩 나온다 + // let firstPointObj = {} + // let secondPointObj = {} + + // let x1 = tmpVertCenterLine[i].x1 + // let y1 = tmpVertCenterLine[i].y1 + // let x2 = tmpVertCenterLine[i].x2 + // let y2 = tmpVertCenterLine[i].y2 + + // if (i === 2 || i === 4) { + // tmpArray = [] + // const prevLine = tmpVertCenterLine[i - 1] //뒤에서 앞라인을 찾는다 + // const nextLine = tmpVertCenterLine[i + 1] + + // //내 앞뒤 라인 + // const tmpX1 = i === 2 ? prevLine.x1 : nextLine.x1 + // const tmpY1 = i === 2 ? prevLine.y1 : nextLine.y1 + // const tmpX2 = i === 2 ? prevLine.x2 : nextLine.x2 + // const tmpY2 = i === 2 ? prevLine.y2 : nextLine.y2 + + // firstPointObj = { x: tmpX1, y: tmpY1 } + // secondPointObj = { x: tmpX2, y: tmpY2 } + // tmpArray.push(firstPointObj) + // tmpArray.push(secondPointObj) + + // //현재 내 선 + // firstPointObj = { x: x1, y: y1 } + // secondPointObj = { x: x2, y: y2 } + // tmpArray.push(firstPointObj) + // tmpArray.push(secondPointObj) + // roofPatternPolygonArray.push(tmpArray) + // } else { + // if (i === 1 || i === 5) { + // // 큰 폴리곤은 가운데 선으로 되야됨 + // if (outLines.length / 2 < concavePointIndices[0]) { + // //오목이가 배열 전체보다 크면 위쪽 방향 + // x2 = i === 1 ? lastCenterLine.x2 : lastCenterLine.x1 + // y2 = i === 1 ? lastCenterLine.y2 : lastCenterLine.y1 + // } else { + // x1 = i === 1 ? lastCenterLine.x1 : lastCenterLine.x2 + // y1 = i === 1 ? lastCenterLine.y1 : lastCenterLine.y2 + // } + // } + + // if (i === 5) { + // //5번일때는 앞에 3번에 선이 필요하다 + // let prevX1 = tmpVertCenterLine[i - 2].x1 + // let prevY1 = tmpVertCenterLine[i - 2].y1 + // let prevX2 = tmpVertCenterLine[i - 2].x2 + // let prevY2 = tmpVertCenterLine[i - 2].y2 + // firstPointObj = { x: prevX1, y: prevY1 } + // secondPointObj = { x: prevX2, y: prevY2 } + // tmpBigArray.push(firstPointObj) + // tmpBigArray.push(secondPointObj) + // } + + // firstPointObj = { x: x1, y: y1 } + // secondPointObj = { x: x2, y: y2 } + // tmpBigArray.push(firstPointObj) + // tmpBigArray.push(secondPointObj) + + // if (i === 3 || i === 6) { + // roofPatternPolygonArray.push(tmpBigArray) + // tmpBigArray = [] + // } + // } + // } } else { - // 오목한 부분이 세로선일때 ㄷ, 역ㄷ + // 오목한 부분이 세로선일때 아래ㄷ, 위ㄷ + //라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정 + + lines.forEach((line, index) => { + if (!(index % 2 === 0)) { + line.line.set('stroke', 'skyblue') + } + }) + outLines = reSortQlineArray(outLines) outLines.forEach((outline, index) => { if (!(index % 2 === 0)) { //세로라인이 케라바 라인임 @@ -2255,20 +2431,10 @@ export function useMode() { //카라바 선의 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, - }) + let centerLine1 = new QLine([outline.x1, outline.y1, outline.x1 + halfLength, outline.y1], centerLineOpt) canvas.add(centerLine1) - let centerLine2 = new QLine([centerLine1.x2, outline.y1, centerLine1.x2 + halfLength, outline.y1], { - stroke: 'red', - strokeWidth: 2, - property: 'normal', - fontSize: 14, - }) + let centerLine2 = new QLine([centerLine1.x2, outline.y1, centerLine1.x2 + halfLength, outline.y1], centerLineOpt) canvas.add(centerLine2) canvas.remove(outline) //기존 라인 삭제 @@ -2279,7 +2445,9 @@ export function useMode() { //각 센터 라인을 그림 halfHoriCenterLinePoint.forEach((centerPoint) => { - let line = new QLine([centerPoint.x2, centerPoint.y1, centerPoint.x2, concaveLine.line.y1], centerLineOpt) + let tmpY2 = parallelLinesIdx !== centerPoint.index ? concaveLine.line.y1 : outLines[concavePointIndices[0]].y2 //평행선에서 내려오는 선은 아웃라인에 닿아야한다 + + let line = new QLine([centerPoint.x2, centerPoint.y1, centerPoint.x2, tmpY2], centerLineOpt) canvas.add(line) line['arrayIndex'] = centerPoint.index //커스텀으로 기존 index를 넣어줌 @@ -2287,18 +2455,21 @@ export function useMode() { }) vertCenterLine = reSortQlineArray(vertCenterLine) + lines = reSortQlineArray(lines) //해당라인에서 만나는점을 계산 vertCenterLine.forEach((vertLine) => { if (parallelLinesIdx !== vertLine.arrayIndex) { //평행선을 제외한 애들만 네모를 연결 let nearLine - + let nearOutline if (vertLine.arrayIndex > concaveLine.index) { //센터에 인덱스가 오목점 보다 크면 다음 작으면 앞에꺼 - nearLine = outLines[concaveLine.index + 1] + nearLine = lines[concaveLine.index + 1] + nearOutline = outLines[concaveLine.index + 1] } else { - nearLine = outLines[concaveLine.index - 1] + nearLine = lines[concaveLine.index - 1] + nearOutline = outLines[concaveLine.index - 1] } let nearLineY = nearLine.y1 @@ -2307,11 +2478,17 @@ export function useMode() { nearLineY = nearLine.y2 } - let centerExtendLine = new QLine([vertLine.line.x1, nearLineY, nearLine.x1, nearLineY], centerLineOpt) - canvas.add(centerExtendLine) + let centerExtendLine = new QLine([vertLine.line.x1, nearLineY, nearOutline.x1, nearLineY], centerLineOpt) + canvas.add(centerExtendLine) //새로그리고 + + //기존에 있는 라인에서 연장해서 새로 그림 + let centerExtendHoriLine = new QLine([nearOutline.line.x1, vertLine.y1, nearOutline.line.x2, vertLine.line.y2], centerLineOpt) + canvas.add(centerExtendHoriLine) + canvas.remove(nearOutline) + outLines.splice(nearOutline.idx, 1, centerExtendHoriLine) //아웃라인에 데이터를 다시 넣는다 let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2 - let centerDashLine = new QLine([vertLine.line.x1, betweenCenterLine, nearLine.x1, betweenCenterLine], dashedCenterLineOpt) + let centerDashLine = new QLine([vertLine.line.x1, betweenCenterLine, nearOutline.x1, betweenCenterLine], dashedCenterLineOpt) canvas.add(centerDashLine) horiCenterLine.push(centerDashLine) @@ -2319,30 +2496,108 @@ export function useMode() { } else { let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx) - let dashCenterExtendLineLength = (longDashLine.x2 - longDashLine.x1) * 2 + let dashCenterExtendLineLength = longDashLine.x2 - longDashLine.x1 let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2 + let totalLength = ((longDashLine.x2 - longDashLine.x1) * 2) / dashCenterExtendLineLength - let centerDashLine = new QLine( - [longDashLine.x1, betweenCenterLine, longDashLine.x1 + dashCenterExtendLineLength, betweenCenterLine], - dashedCenterLineOpt, - ) - canvas.add(centerDashLine) - horiCenterLine.push(centerDashLine) + //반 쪼개서 그린다 + for (let i = 0; i < totalLength; i++) { + let startX = i === 0 ? longDashLine.x1 : longDashLine.x1 + dashCenterExtendLineLength + let centerDashLine = new QLine([startX, betweenCenterLine, startX + dashCenterExtendLineLength, betweenCenterLine], dashedCenterLineOpt) + canvas.add(centerDashLine) + horiCenterLine.push(centerDashLine) + } } }) - if (parallelLinesIdx < concaveLine.index) { - offsetY = offsetY * -1 // 위로올린다 + //마지막에 오목한 외곽선을 연장한다 + const tmpLastOutLine = outLines[concavePointIndices[0]] + const lastOutLine = new QLine([shorVertCenterLine[0].x1, tmpLastOutLine.y1, shorVertCenterLine[1].x1, tmpLastOutLine.y2], centerLineOpt) + canvas.add(lastOutLine) + canvas.remove(tmpLastOutLine) + + let tmpVertCenterLine = outLines.filter((x, index) => index % 2 === 0) //세로만 찾음 + tmpVertCenterLine = tmpVertCenterLine.concat(vertCenterLine) + tmpVertCenterLine.sort((a, b) => a.x1 - b.x1) + tmpVertCenterLine.push(lastOutLine) + + let roofPatternPolygonArray = [] + let tmpArray = [] + let tmpBigArray = [] + + const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의 + + for (let i = 0; i < tmpVertCenterLine.length - 1; i++) { + //-1인건 마지막은 오목한 선이라 돌 필요 없음 + //라인 하나에 두점씩 나온다 + let firstPointObj = {} + let secondPointObj = {} + + let x1 = tmpVertCenterLine[i].x1 + let y1 = tmpVertCenterLine[i].y1 + let x2 = tmpVertCenterLine[i].x2 + let y2 = tmpVertCenterLine[i].y2 + + if (i === 2 || i === 4) { + tmpArray = [] + const prevLine = tmpVertCenterLine[i - 1] //뒤에서 앞라인을 찾는다 + const nextLine = tmpVertCenterLine[i + 1] + + //내 앞뒤 라인 + const tmpX1 = i === 2 ? prevLine.x1 : nextLine.x1 + const tmpY1 = i === 2 ? prevLine.y1 : nextLine.y1 + const tmpX2 = i === 2 ? prevLine.x2 : nextLine.x2 + const tmpY2 = i === 2 ? prevLine.y2 : nextLine.y2 + + firstPointObj = { x: tmpX1, y: tmpY1 } + secondPointObj = { x: tmpX2, y: tmpY2 } + tmpArray.push(firstPointObj) + tmpArray.push(secondPointObj) + + //현재 내 선 + firstPointObj = { x: x1, y: y1 } + secondPointObj = { x: x2, y: y2 } + tmpArray.push(firstPointObj) + tmpArray.push(secondPointObj) + roofPatternPolygonArray.push(tmpArray) + } else { + if (i === 1 || i === 5) { + // 큰 폴리곤은 가운데 선으로 되야됨 + if (outLines.length / 2 < concavePointIndices[0]) { + //오목이가 배열 전체보다 크면 위쪽 방향 + x2 = i === 1 ? lastCenterLine.x2 : lastCenterLine.x1 + y2 = i === 1 ? lastCenterLine.y2 : lastCenterLine.y1 + } else { + x1 = i === 1 ? lastCenterLine.x1 : lastCenterLine.x2 + y1 = i === 1 ? lastCenterLine.y1 : lastCenterLine.y2 + } + } + + if (i === 5) { + //5번일때는 앞에 3번에 선이 필요하다 + let prevX1 = tmpVertCenterLine[i - 2].x1 + let prevY1 = tmpVertCenterLine[i - 2].y1 + let prevX2 = tmpVertCenterLine[i - 2].x2 + let prevY2 = tmpVertCenterLine[i - 2].y2 + firstPointObj = { x: prevX1, y: prevY1 } + secondPointObj = { x: prevX2, y: prevY2 } + tmpBigArray.push(firstPointObj) + tmpBigArray.push(secondPointObj) + } + + firstPointObj = { x: x1, y: y1 } + secondPointObj = { x: x2, y: y2 } + tmpBigArray.push(firstPointObj) + tmpBigArray.push(secondPointObj) + + if (i === 3 || i === 6) { + roofPatternPolygonArray.push(tmpBigArray) + tmpBigArray = [] + } + } } - - 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]]) + setRoofPolygonPattern({ roofPatternPolygonArray, lines }) } - canvas.renderAll() } @@ -2871,8 +3126,6 @@ export function useMode() { } const makeRoofPatternPolygon = (roofStyle) => { - console.log('roofPolygonPattern', roofPolygonPattern) - if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) { alert('객체가 비어있습니다.') return @@ -2918,7 +3171,7 @@ export function useMode() { const commonOption = { fill: pattern, - selectable: false, + selectable: true, fontSize: 15, // fontSize는 필요에 따라 조정 }