diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index 58857ee2..82ad62df 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -2690,13 +2690,8 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { let proceedRidges = [] // left: 이전, right:다음, point:그려지는 포인트, length:길이 let hipLines = [] ridgeEaves.forEach((currentLine) => { - const checkLine = new fabric.Line([currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2], { - stroke: 'red', - strokeWidth: 4, - parentId: roofId, - name: 'check', - }) - canvas.add(checkLine).renderAll() + /*const checkLine = createArrow(currentLine, 'blue', roofId) + canvas.add(checkLine).renderAll()*/ let prevLine, nextLine, currentI, prevI, nextI baseLines.forEach((baseLine, index) => { if (baseLine === currentLine) { @@ -2741,7 +2736,7 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { const prevCheckPoint = [currentLine.x1, currentLine.y1, currentLine.x1 + pHipVector.x * 1000, currentLine.y1 + pHipVector.y * 1000] const nextCheckPoint = [currentLine.x2, currentLine.y2, currentLine.x2 + nHipVector.x * 1000, currentLine.y2 + nHipVector.y * 1000] - /* const checkLine1 = new fabric.Line(prevCheckPoint, { stroke: 'red', strokeWidth: 4, parentId: roofId, name: 'check' }) + /*const checkLine1 = new fabric.Line(prevCheckPoint, { stroke: 'red', strokeWidth: 4, parentId: roofId, name: 'check' }) const checkLine2 = new fabric.Line(nextCheckPoint, { stroke: 'green', strokeWidth: 4, parentID: roofId, name: 'check' }) canvas.add(checkLine1, checkLine2).renderAll()*/ @@ -2807,7 +2802,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { let minPrevDist = Infinity let minNextDist = Infinity proceedRidges.forEach((ridge) => { - console.log('ridge : ', ridge) const ridgeEdge = { vertex1: { x: ridge.point.x1, y: ridge.point.y1 }, vertex2: { x: ridge.point.x2, y: ridge.point.y2 } } const isPrev = edgesIntersection(ridgeEdge, prevEdge) const isNext = edgesIntersection(ridgeEdge, nextEdge) @@ -3001,31 +2995,7 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { if (!alreadyRidge) { proceedRidges.push({ prev: prevI, next: nextI, point: ridgePoint }) } - - /*const checkRidgeStart = new fabric.Circle({ left: ridgePoint.x1, top: ridgePoint.y1, radius: 4, parentId: roofId, name: 'check' }) - const checkRidgeLine = new fabric.Line([ridgePoint.x1, ridgePoint.y1, ridgePoint.x2, ridgePoint.y2], { - stroke: 'yellow', - strokeWidth: 4, - parentId: roofId, - name: 'check', - }) - canvas.add(checkRidgeLine, checkRidgeStart).renderAll()*/ } - - /*const checkLine1 = new fabric.Line([prevHipPoint.x1, prevHipPoint.y1, prevHipPoint.x2, prevHipPoint.y2], { - stroke: 'red', - strokeWidth: 4, - parentId: roofId, - name: 'check', - }) - const checkLine2 = new fabric.Line([nextHipPoint.x1, nextHipPoint.y1, nextHipPoint.x2, nextHipPoint.y2], { - stroke: 'blue', - strokeWidth: 4, - parentId: roofId, - name: 'check', - }) - canvas.add(checkLine1, checkLine2).renderAll() -*/ canvas .getObjects() .filter((o) => o.name === 'check') @@ -3033,7 +3003,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { canvas.renderAll() }) - console.log('hipedEaves', hipedEaves) hipedEaves.forEach((currentLine) => { let prevLine baseLines.forEach((baseLine, index) => { @@ -3155,7 +3124,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { innerLines.push(drawHipLine([point.x1, point.y1, point.x2, point.y2], canvas, roof, textMode, currentDegree, currentDegree)) pIndexEaves.push(index) } else if (jointEaves.length === 2) { - console.log('jointEaves : ', jointEaves) const jointIndex = [index] let jointLines = [] jointEaves.forEach((e) => jointIndex.push(proceedEaves.findIndex((p) => p === e))) @@ -3172,11 +3140,7 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { //연결된 지점에서 파생된 마루선 제거 const removeRidge = proceedRidges.filter((ridge) => almostEqual(ridge.point.x1, eaves.point.x2) && almostEqual(ridge.point.y1, eaves.point.y2)) proceedRidges = proceedRidges.filter((ridge) => !removeRidge.includes(ridge)) - console.log('pIndexEaves : ', pIndexEaves) - console.log('jointLines : ', jointLines) - console.log('jointVectors : ', jointVectors) let dneVector = jointVectors.find((v) => !jointVectors.find((v2) => v2.x === -v.x && v2.y === -v.y)) - console.log('dneVector : ', dneVector) const findRoofEdge = { vertex1: { x: eaves.point.x2, y: eaves.point.y2 }, vertex2: { x: eaves.point.x2 + dneVector.x, y: eaves.point.y2 + dneVector.y }, @@ -3201,7 +3165,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { }) const uniqueLine = jointLines.filter((value) => countMap.get(value) === 1) - console.log('uniqueLine : ', uniqueLine) linesAnalysis.push({ start: { x: eaves.point.x2, y: eaves.point.y2 }, end: { x: isPoint.x, y: isPoint.y }, @@ -3211,7 +3174,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { degree: currentDegree, }) } - console.log('=============') } else { linesAnalysis.push({ start: { x: point.x1, y: point.y1 }, @@ -3235,9 +3197,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { }), ) - console.log('proceedEaves :', proceedEaves) - console.log('proceedRidges :', proceedRidges) - //4. 반절처(반절마루) 판단, 반절마루는 양옆이 처마여야 한다. jerkinHeads.forEach((currentLine) => { let prevLine, nextLine @@ -3748,8 +3707,7 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { parentId: roofId, name: 'check', }) - canvas.add(checkLine, checkLine2).renderAll() -*/ + canvas.add(checkLine, checkLine2).renderAll()*/ //기준지붕선의 반대쪽선 const oppositeLine = [] @@ -3807,7 +3765,7 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { } } }) - console.log('oppositeLine', oppositeLine) + if (oppositeLine.length > 0) { const ridgePoints = [] //지붕선 출발 지점 확인을 위한 기준 포인트 @@ -4190,9 +4148,27 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { const ridgeLength = Math.sqrt(Math.pow(point[2] - point[0], 2) + Math.pow(point[3] - point[1], 2)) if (ridgeLength > EPSILON) { + //마루 포인트 중 1개만 지붕선에 붙어있을경우 해당 포인트를 시작점으로 한다. + const isPointOnRoof1 = roof.lines.find((line) => isPointOnLineNew(line, { x: point[0], y: point[1] })) !== undefined + const isPointOnRoof2 = roof.lines.find((line) => isPointOnLineNew(line, { x: point[2], y: point[3] })) !== undefined + + let startPoint, endPoint + if ((isPointOnRoof1 && isPointOnRoof2) || (!isPointOnRoof1 && !isPointOnRoof2)) { + startPoint = { x: point[0], y: point[1] } + endPoint = { x: point[2], y: point[3] } + } else { + if (isPointOnRoof1) { + startPoint = { x: point[0], y: point[1] } + endPoint = { x: point[2], y: point[3] } + } + if (isPointOnRoof2) { + startPoint = { x: point[2], y: point[3] } + endPoint = { x: point[0], y: point[1] } + } + } linesAnalysis.push({ - start: { x: point[0], y: point[1] }, - end: { x: point[2], y: point[3] }, + start: startPoint, + end: endPoint, left: baseLines.findIndex((line) => line === r.left), right: baseLines.findIndex((line) => line === r.right), type: TYPES.RIDGE, @@ -4305,13 +4281,8 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { iterations++ /*linesAnalysis.forEach((line) => { - const point = [line.start.x, line.start.y, line.end.x, line.end.y] - const checkLine = new fabric.Line(point, { - stroke: 'red', - strokeWidth: 2, - parentId: roofId, - name: 'check', - }) + const point = { x1: line.start.x, y1: line.start.y, x2: line.end.x, y2: line.end.y } + const checkLine = createArrow(point, 'red', roofId) canvas.add(checkLine).renderAll() // canvas.remove(checkLine).renderAll() })*/ @@ -4521,22 +4492,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { const gableLine = cLine.type === TYPES.GABLE_LINE ? cLine : pLine gableLine.connectCnt++ - /*const checkLine = new fabric.Line([gableLine.start.x, gableLine.start.y, gableLine.end.x, gableLine.end.y], { - stroke: 'red', - strokeWidth: 4, - parentId: roofId, - name: 'check', - }) - const checkCircle = new fabric.Circle({ - left: intersect.x, - top: intersect.y, - radius: 5, - parentId: roofId, - name: 'check', - }) - canvas.add(checkLine, checkCircle) - canvas.renderAll()*/ - const uniqueBaseLines = [...new Set(relationBaseLines)] // 연결점에서 새로운 가선분을 생성 if (uniqueBaseLines.length > 2) { @@ -4600,9 +4555,25 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { let bisector console.log('isParallel(baseLine1, baseLine2)', isParallel(baseLine1, baseLine2)) if (isParallel(baseLine1, baseLine2)) { + let cPoint = [cLine.start.x, cLine.start.y, cLine.end.x, cLine.end.y] + let pPoint = [pLine.start.x, pLine.start.y, pLine.end.x, pLine.end.y] + const length1 = Math.sqrt(Math.pow(intersect.x - cPoint[2], 2) + Math.pow(intersect.y - cPoint[3], 2)) + const length2 = Math.sqrt(Math.pow(intersect.x - pPoint[2], 2) + Math.pow(intersect.y - pPoint[3], 2)) + + //교점 밖으로 뻗어나가는 선의 길이가 다를 경우 이등분선 계산이 틀어져서 조정 + if (!almostEqual(length1, length2)) { + const vector1 = { x: Math.sign(clamp01(cPoint[2] - cPoint[0])), y: Math.sign(clamp01(cPoint[3] - cPoint[1])) } + const vector2 = { x: Math.sign(clamp01(pPoint[2] - pPoint[0])), y: Math.sign(clamp01(pPoint[3] - pPoint[1])) } + const addLength = 100 + cPoint[2] = intersect.x + vector1.x * addLength + cPoint[3] = intersect.y + vector1.y * addLength + pPoint[2] = intersect.x + vector2.x * addLength + pPoint[3] = intersect.y + vector2.y * addLength + } + bisector = getBisectLines( - { x1: cLine.start.x, x2: cLine.end.x, y1: cLine.start.y, y2: cLine.end.y }, - { x1: pLine.start.x, y1: pLine.start.y, x2: pLine.end.x, y2: pLine.end.y }, + { x1: cPoint[0], y1: cPoint[1], x2: cPoint[2], y2: cPoint[3] }, + { x1: pPoint[0], y1: pPoint[1], x2: pPoint[2], y2: pPoint[3] }, ) } else { bisector = getBisectBaseLines(baseLine1, baseLine2, intersect, canvas) @@ -4868,8 +4839,7 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { prevLineVector.x === nextLineVector.x && prevLineVector.y === nextLineVector.y && baseLine.attributes.type === LINE_TYPE.WALLLINE.EAVES && - prevLine.attributes.type === LINE_TYPE.WALLLINE.GABLE && - nextLine.attributes.type === LINE_TYPE.WALLLINE.GABLE + (prevLine.attributes.type === LINE_TYPE.WALLLINE.GABLE || nextLine.attributes.type === LINE_TYPE.WALLLINE.GABLE) ) { downRoofGable.push({ currLine: baseLine, currIndex: index, type: 'A' }) } @@ -4954,6 +4924,8 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { } } + if (gableLine.attributes.type !== LINE_TYPE.WALLLINE.GABLE) return + //기준점 let stdPoint = [] //반대쪽 라인을 찾기위한 vector @@ -5493,7 +5465,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { } }) - // canvas.renderAll() //추가된 하단 지붕 라인 innerLines에 추가. innerLines.push(...downRoofLines) @@ -5563,7 +5534,6 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { } }) - console.log('innerLines : ', innerLines) //지붕 innerLines에 추가. roof.innerLines = innerLines @@ -5574,6 +5544,43 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => { canvas.renderAll() } +/** + * 라인 방향 확인 용 + * @param x1 + * @param y1 + * @param x2 + * @param y2 + * @param color + * @param roofId + * @returns {*} + */ +export const createArrow = ({ x1, y1, x2, y2 }, color, roofId) => { + const angle = Math.atan2(y2 - y1, x2 - x1) + const headLength = 15 + + const points = [ + { x: x1, y: y1 }, + { x: x2, y: y2 }, + { + x: x2 - headLength * Math.cos(angle - Math.PI / 7), + y: y2 - headLength * Math.sin(angle - Math.PI / 7), + }, + { x: x2, y: y2 }, + { + x: x2 - headLength * Math.cos(angle + Math.PI / 7), + y: y2 - headLength * Math.sin(angle + Math.PI / 7), + }, + ] + + return new fabric.Polyline(points, { + fill: 'transparent', + stroke: color, + strokeWidth: 3, + selectable: false, + parentId: roofId, + name: 'check', + }) +} /** * 선분과 선분의 교점을 구한다. * @param line1Start