소스정리
This commit is contained in:
yjnoh
parent
ae096b2f00
commit
f5b60749e0
@ -1,8 +1,8 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useRef, useState } from 'react'
|
||||
import QRect from '@/components/fabric/QRect'
|
||||
import QPolygon from '@/components/fabric/QPolygon'
|
||||
import { getStartIndex, rearrangeArray, findTopTwoIndexesByDistance, getDirection, getCenterPoint } from '@/util/canvas-util'
|
||||
import { useRecoilState, useSetRecoilState } from 'recoil'
|
||||
import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { fontSizeState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
|
||||
@ -935,13 +935,12 @@ export function useMode() {
|
||||
return line
|
||||
})
|
||||
|
||||
const edgeIndexArray = []
|
||||
const normalIndexArray = []
|
||||
let edgeIndexArray = []
|
||||
let normalIndexArray = []
|
||||
|
||||
lines.forEach((line, i) => {
|
||||
if (i % 2 === 0) {
|
||||
line.set('stroke', 'skyblue')
|
||||
line.set('property', 'edge')
|
||||
line.set('stroke', 'skyblue').set('property', 'edge')
|
||||
edgeIndexArray.push(i)
|
||||
} else {
|
||||
normalIndexArray.push(i)
|
||||
@ -1031,6 +1030,21 @@ export function useMode() {
|
||||
let lines = []
|
||||
let outLines = []
|
||||
|
||||
const dashedCenterLineOpt = {
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
fontSize: 14,
|
||||
}
|
||||
|
||||
const centerLineOpt = {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
property: 'bigHoriCenter',
|
||||
fontSize: 14,
|
||||
}
|
||||
|
||||
// 폴리곤의 각 변을 선으로 생성
|
||||
for (let i = 0; i < polygon.points.length; i++) {
|
||||
const start = polygon.points[i]
|
||||
@ -1065,8 +1079,7 @@ export function useMode() {
|
||||
|
||||
if (!(i % 2) == 0) {
|
||||
//홀수일떄
|
||||
line.line.set('stroke', 'skyblue')
|
||||
line.line.set('property', 'egde')
|
||||
line.line.set('stroke', 'skyblue').set('property', 'egde')
|
||||
let length = Math.abs(line.get('x1') - line.get('x2')) + Math.abs(line.get('y1') - line.get('y2'))
|
||||
|
||||
if (length > prevHighLength) {
|
||||
@ -1076,16 +1089,10 @@ export function useMode() {
|
||||
highLineLength = length
|
||||
}
|
||||
|
||||
if (prevLowLength === 0) {
|
||||
if (prevLowLength === 0 || length <= prevLowLength) {
|
||||
//최초에는 없어서 한번 넣음
|
||||
prevLowIndex = i
|
||||
prevLowLength = length
|
||||
}
|
||||
|
||||
if (length <= prevLowLength) {
|
||||
//그뒤부터는 짧은거 대로 넣음
|
||||
prevLowIndex = i
|
||||
prevLowLength = length
|
||||
lowLineLength = length
|
||||
}
|
||||
|
||||
@ -1141,12 +1148,7 @@ export function useMode() {
|
||||
vertCenterPoint,
|
||||
firstSubLine.y2 - edge, //다음 선의 높이만큼 가져옴 edge길이를 합함
|
||||
],
|
||||
{
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
property: 'bigHoriCenter',
|
||||
fontSize: 14,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(vertCenterLine)
|
||||
|
||||
@ -1154,14 +1156,9 @@ export function useMode() {
|
||||
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,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
|
||||
canvas.add(horiCenterLine1)
|
||||
|
||||
let horiCenterLine2 = new QLine(
|
||||
@ -1171,24 +1168,13 @@ export function useMode() {
|
||||
firstLine.x1 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves,
|
||||
horiCenterPoint,
|
||||
],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
fontSize: 14,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt)
|
||||
|
||||
canvas.add(secondVertCenterLine)
|
||||
|
||||
@ -1198,37 +1184,22 @@ export function useMode() {
|
||||
|
||||
let secondHoriCenterLine = new QLine(
|
||||
[secondVertCenterLine.x1, secondHoriCenterPoint, secondVertCenterLine.x1 + secondHoriCenterLength + eaves, secondHoriCenterPoint],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
fontSize: 14,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(secondHoriCenterLine)
|
||||
|
||||
//일반라인 외각선 그리기
|
||||
normalIndexArray.forEach((index) => {
|
||||
const line = lines[index]
|
||||
let points = []
|
||||
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)
|
||||
points.push(line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + edge)
|
||||
} 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)
|
||||
points.push(line.x1 + eaves, line.y1 + tmpEdge, line.x2 + eaves, line.y2 - edge)
|
||||
}
|
||||
let drawline = new QLine(points, centerLineOpt)
|
||||
canvas.add(drawline)
|
||||
})
|
||||
|
||||
//케라바 라인 외각선 그리기
|
||||
@ -1240,67 +1211,41 @@ export function useMode() {
|
||||
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,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawFirstLine2 = new QLine(
|
||||
[drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawMiddleLine = new QLine([drawFirstLine2.x2, middleOuterLine.y1 - edge, drawFirstLine2.x1, middleOuterLine.y2 - edge], centerLineOpt)
|
||||
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,
|
||||
})
|
||||
let drawLastLine1 = new QLine(
|
||||
[lastOuterLine.x2 + halfLength, lastOuterLine.y1 - edge, lastOuterLine.x2 - eaves, lastOuterLine.y2 - edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawLastLine2 = new QLine(
|
||||
[drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawLastInLine1)
|
||||
|
||||
let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
fontSize: 14,
|
||||
})
|
||||
let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
|
||||
canvas.add(drawLastInLine2)
|
||||
} else {
|
||||
//아래쪽 길게 오른쪽 방향
|
||||
@ -1323,12 +1268,7 @@ export function useMode() {
|
||||
vertCenterPoint,
|
||||
firstSubLine.y2 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함
|
||||
],
|
||||
{
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
property: 'bigHoriCenter',
|
||||
fontSize: 14,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(vertCenterLine)
|
||||
|
||||
@ -1336,13 +1276,7 @@ export function useMode() {
|
||||
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,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(horiCenterLine1)
|
||||
|
||||
@ -1353,24 +1287,13 @@ export function useMode() {
|
||||
firstLine.x1 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves,
|
||||
horiCenterPoint,
|
||||
],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
fontSize: 14,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 - edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt)
|
||||
|
||||
canvas.add(secondVertCenterLine)
|
||||
|
||||
@ -1380,37 +1303,22 @@ export function useMode() {
|
||||
|
||||
let secondHoriCenterLine = new QLine(
|
||||
[secondVertCenterLine.x1 - secondHoriCenterLength - eaves, secondHoriCenterPoint, secondVertCenterLine.x1, secondHoriCenterPoint],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
fontSize: 14,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(secondHoriCenterLine)
|
||||
|
||||
//일반라인 외각선 그리기
|
||||
normalIndexArray.forEach((index) => {
|
||||
const line = lines[index]
|
||||
let points = []
|
||||
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)
|
||||
points = [line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + tmpEdge]
|
||||
} 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)
|
||||
points = [line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge]
|
||||
}
|
||||
let drawline = new QLine(points, centerLineOpt)
|
||||
canvas.add(drawline)
|
||||
})
|
||||
|
||||
//케라바 라인 외각선 그리기
|
||||
@ -1422,31 +1330,19 @@ export function useMode() {
|
||||
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,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawFirstLine2 = new QLine(
|
||||
[drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 - edge, drawFirstLine1.x2, middleOuterLine.y2 - edge], centerLineOpt)
|
||||
canvas.add(drawMiddleLine)
|
||||
|
||||
//마지막 외각선
|
||||
@ -1454,39 +1350,25 @@ export function useMode() {
|
||||
|
||||
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,
|
||||
})
|
||||
let drawLastLine1 = new QLine(
|
||||
[lastOuterLine.x2 - eaves, lastOuterLine.y1 - edge, lastOuterLine.x1 - halfLength, lastOuterLine.y2 - edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawLastLine2 = new QLine(
|
||||
[drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawLastInLine1)
|
||||
|
||||
let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
fontSize: 14,
|
||||
})
|
||||
let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], centerLineOpt)
|
||||
canvas.add(drawLastInLine2)
|
||||
}
|
||||
} else {
|
||||
@ -1510,12 +1392,7 @@ export function useMode() {
|
||||
vertCenterPoint,
|
||||
firstSubLine.y1 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함
|
||||
],
|
||||
{
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
property: 'bigHoriCenter',
|
||||
fontSize: 14,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(vertCenterLine)
|
||||
|
||||
@ -1523,13 +1400,7 @@ export function useMode() {
|
||||
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,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(horiCenterLine1)
|
||||
|
||||
@ -1540,64 +1411,37 @@ export function useMode() {
|
||||
firstLine.x2 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves,
|
||||
horiCenterPoint,
|
||||
],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
fontSize: 14,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
|
||||
secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 + edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt)
|
||||
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,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(secondHoriCenterLine)
|
||||
|
||||
//일반라인 외각선 그리기
|
||||
normalIndexArray.forEach((index) => {
|
||||
const line = lines[index]
|
||||
let points = []
|
||||
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)
|
||||
points = [line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + edge]
|
||||
} 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)
|
||||
points = [line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - tmpEdge]
|
||||
}
|
||||
|
||||
let drawline = new QLine(points, centerLineOpt)
|
||||
canvas.add(drawline)
|
||||
})
|
||||
|
||||
//케라바 라인 외각선 그리기
|
||||
@ -1609,31 +1453,19 @@ export function useMode() {
|
||||
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,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawFirstLine2 = new QLine(
|
||||
[drawFirstLine1.x2, drawFirstLine1.y1, drawFirstLine1.x2 + halfLength + eaves, drawFirstLine1.y2],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawMiddleLine = new QLine([drawFirstLine2.x1, middleOuterLine.y1 + edge, drawFirstLine2.x2, middleOuterLine.y2 + edge], centerLineOpt)
|
||||
canvas.add(drawMiddleLine)
|
||||
|
||||
//마지막 외각선
|
||||
@ -1641,39 +1473,22 @@ export function useMode() {
|
||||
|
||||
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,
|
||||
})
|
||||
let drawLastLine1 = new QLine(
|
||||
[lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawLastLine2 = new QLine([drawLastLine1.x2, drawLastLine1.y1, drawLastLine1.x2 + halfLength + eaves, drawLastLine1.y1], centerLineOpt)
|
||||
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,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawLastInLine1)
|
||||
|
||||
let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
fontSize: 14,
|
||||
})
|
||||
let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
|
||||
canvas.add(drawLastInLine2)
|
||||
} else {
|
||||
//윗쪽 길게 오른쪽 방향
|
||||
@ -1695,12 +1510,7 @@ export function useMode() {
|
||||
vertCenterPoint,
|
||||
firstSubLine.y2 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함
|
||||
],
|
||||
{
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
property: 'bigHoriCenter',
|
||||
fontSize: 14,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(vertCenterLine)
|
||||
|
||||
@ -1708,13 +1518,7 @@ export function useMode() {
|
||||
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,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(horiCenterLine1)
|
||||
|
||||
@ -1725,13 +1529,7 @@ export function useMode() {
|
||||
firstLine.x2 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves,
|
||||
horiCenterPoint,
|
||||
],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
fontSize: 14,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(horiCenterLine2)
|
||||
|
||||
@ -1752,13 +1550,7 @@ export function useMode() {
|
||||
|
||||
let secondHoriCenterLine = new QLine(
|
||||
[secondVertCenterLine.x1, secondHoriCenterPoint, secondVertCenterLine.x1 - secondHoriCenterLength - eaves, secondHoriCenterPoint],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
fontSize: 14,
|
||||
},
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(secondHoriCenterLine)
|
||||
|
||||
@ -1767,20 +1559,10 @@ export function useMode() {
|
||||
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,
|
||||
})
|
||||
let drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], centerLineOpt)
|
||||
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,
|
||||
})
|
||||
let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], centerLineOpt)
|
||||
canvas.add(drawline)
|
||||
}
|
||||
})
|
||||
@ -1794,66 +1576,36 @@ export function useMode() {
|
||||
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,
|
||||
},
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawFirstLine2 = new QLine(
|
||||
[drawFirstLine1.x2, drawFirstLine1.y1, drawFirstLine1.x2 + halfLength + eaves, drawFirstLine1.y2],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 + edge, drawFirstLine1.x2, middleOuterLine.y2 + edge], centerLineOpt)
|
||||
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,
|
||||
})
|
||||
let drawLastLine1 = new QLine(
|
||||
[lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
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,
|
||||
})
|
||||
let drawLastLine2 = new QLine([drawLastLine1.x2, drawLastLine1.y1, drawLastLine1.x2 + halfLength + eaves, drawLastLine1.y1], centerLineOpt)
|
||||
canvas.add(drawLastLine2)
|
||||
|
||||
let drawLastInLine1 = new QLine([vertCenterLine.x2, vertCenterLine.y2, secondVertCenterLine.x1, vertCenterLine.y2], {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
fontSize: 14,
|
||||
})
|
||||
let drawLastInLine1 = new QLine([vertCenterLine.x2, vertCenterLine.y2, secondVertCenterLine.x1, vertCenterLine.y2], centerLineOpt)
|
||||
canvas.add(drawLastInLine1)
|
||||
|
||||
let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 4,
|
||||
property: 'centerLine',
|
||||
fontSize: 14,
|
||||
})
|
||||
let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], centerLineOpt)
|
||||
canvas.add(drawLastInLine2)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user