4,6각형 A 템플릿 작성
This commit is contained in:
yjnoh
parent
71ecdfd40a
commit
40d44c20e8
@ -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 적용
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user