4,6각형 A 템플릿 작성
This commit is contained in:
yjnoh
parent
71ecdfd40a
commit
40d44c20e8
@ -45,6 +45,7 @@ export function useMode() {
|
|||||||
templateMode()
|
templateMode()
|
||||||
break
|
break
|
||||||
case 'patterna':
|
case 'patterna':
|
||||||
|
applyTemplateA()
|
||||||
break
|
break
|
||||||
case 'patternb':
|
case 'patternb':
|
||||||
applyTemplateB()
|
applyTemplateB()
|
||||||
@ -728,11 +729,11 @@ export function useMode() {
|
|||||||
/**
|
/**
|
||||||
*벽 지붕 외곽선 생성
|
*벽 지붕 외곽선 생성
|
||||||
*/
|
*/
|
||||||
const handleOuterlinesTest = (offset = 71) => {
|
const handleOuterlinesTest = (polygon, offset = 71) => {
|
||||||
var offsetPoints = []
|
var offsetPoints = []
|
||||||
|
|
||||||
const sortedIndex = getStartIndex(historyLines.current)
|
const sortedIndex = getStartIndex(polygon.lines)
|
||||||
let tmpArraySorted = rearrangeArray(historyLines.current, sortedIndex)
|
let tmpArraySorted = rearrangeArray(polygon.lines, sortedIndex)
|
||||||
|
|
||||||
if (tmpArraySorted[0].direction === 'right') {
|
if (tmpArraySorted[0].direction === 'right') {
|
||||||
//시계방향
|
//시계방향
|
||||||
@ -900,6 +901,966 @@ export function useMode() {
|
|||||||
return rtnLines
|
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 적용
|
* 템플릿 B 적용
|
||||||
*/
|
*/
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user