diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 483ac98f..5a0027db 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -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) } }