8각 가로 작업
This commit is contained in:
yjnoh
parent
11fec70ac2
commit
d88fb8f389
@ -2015,16 +2015,15 @@ export function useMode() {
|
||||
}
|
||||
}
|
||||
|
||||
roofPatternPolygonArray.push(bigRoofPolygon)
|
||||
roofPatternPolygonArray.push(middleRoofPolygon)
|
||||
roofPatternPolygonArray.push(smallRoofPolygon)
|
||||
|
||||
setRoofPolygonPattern({ roofPatternPolygonArray, lines })
|
||||
roofPatternPolygonArray.push(bigRoofPolygon) //지붕폴리곤
|
||||
roofPatternPolygonArray.push(middleRoofPolygon) //중간라인 폴리곤
|
||||
roofPatternPolygonArray.push(smallRoofPolygon) //작은지붕폴리곤
|
||||
setRoofPolygonPattern({ roofPatternPolygonArray, lines }) //모든 행을 저장
|
||||
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
const handleOuterLineTemplateA8Points = (polygon, offsetInputX = 50, offsetInputY = 20) => {
|
||||
const handleOuterLineTemplateA8Points = (polygon, offsetInputX = 20, offsetInputY = 50) => {
|
||||
let offsetPoints = []
|
||||
|
||||
const originalMax = 71
|
||||
@ -2038,15 +2037,15 @@ export function useMode() {
|
||||
|
||||
const dashedCenterLineOpt = {
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
strokeWidth: 1,
|
||||
property: 'centerLine',
|
||||
strokeDashArray: [5, 5],
|
||||
strokeDashArray: [8, 4],
|
||||
fontSize: 14,
|
||||
}
|
||||
|
||||
const centerLineOpt = {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
strokeWidth: 2,
|
||||
property: 'bigHoriCenter',
|
||||
fontSize: 14,
|
||||
}
|
||||
@ -2056,10 +2055,8 @@ export function useMode() {
|
||||
const start = polygon.points[i]
|
||||
const end = polygon.points[(i + 1) % polygon.points.length] // 다음 점, 마지막 점의 경우 첫 점으로
|
||||
|
||||
const color = i % 2 === 0 ? '#A0D468' : 'skyblue'
|
||||
|
||||
const line = new QLine([start.x, start.y, end.x, end.y], {
|
||||
stroke: color,
|
||||
stroke: '#A0D468',
|
||||
strokeWidth: 2,
|
||||
property: 'normal',
|
||||
fontSize: 14,
|
||||
@ -2074,12 +2071,6 @@ export function useMode() {
|
||||
|
||||
const sortedIndex = getStartIndex(polygon.lines)
|
||||
let tmpArraySorted = rearrangeArray(polygon.lines, sortedIndex)
|
||||
|
||||
if (tmpArraySorted[0].direction === 'right') {
|
||||
//시계방향
|
||||
tmpArraySorted = tmpArraySorted.reverse() //그럼 배열을 거꾸로 만들어서 무조건 반시계방향으로 배열 보정
|
||||
}
|
||||
|
||||
setSortedArray(tmpArraySorted) //recoil에 넣음
|
||||
|
||||
const points = tmpArraySorted.map((line) => ({
|
||||
@ -2090,9 +2081,10 @@ export function useMode() {
|
||||
//좌표 재정렬
|
||||
function reSortQlineArray(array) {
|
||||
let tmpArray = []
|
||||
let minX, minY, maxX, maxY
|
||||
let tmp
|
||||
array.forEach((arr, index) => {
|
||||
let minX, minY, maxX, maxY
|
||||
let tmp = arr
|
||||
tmp = arr
|
||||
if (arr.x2 < arr.x1 || arr.y2 < arr.y1) {
|
||||
minX = arr.x2
|
||||
minY = arr.y2
|
||||
@ -2149,56 +2141,46 @@ export function useMode() {
|
||||
index: concavePointIndices[0],
|
||||
line: lines[concavePointIndices[0]],
|
||||
}
|
||||
for (var i = 0; i < points.length; i++) {
|
||||
var prev = points[(i - 1 + points.length) % points.length]
|
||||
var current = points[i]
|
||||
var next = points[(i + 1) % points.length]
|
||||
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
let prev = points[(i - 1 + points.length) % points.length]
|
||||
let current = points[i]
|
||||
let next = points[(i + 1) % points.length]
|
||||
|
||||
// 두 벡터 계산 (prev -> current, current -> next)
|
||||
var vector1 = { x: current.x - prev.x, y: current.y - prev.y }
|
||||
var vector2 = { x: next.x - current.x, y: next.y - current.y }
|
||||
let vector1 = { x: current.x - prev.x, y: current.y - prev.y }
|
||||
let vector2 = { x: next.x - current.x, y: next.y - current.y }
|
||||
|
||||
// 벡터의 길이 계산
|
||||
var length1 = Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y)
|
||||
var length2 = Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y)
|
||||
let length1 = Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y)
|
||||
let length2 = Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y)
|
||||
|
||||
// 벡터를 단위 벡터로 정규화
|
||||
var unitVector1 = { x: vector1.x / length1, y: vector1.y / length1 }
|
||||
var unitVector2 = { x: vector2.x / length2, y: vector2.y / length2 }
|
||||
let unitVector1 = { x: vector1.x / length1, y: vector1.y / length1 }
|
||||
let unitVector2 = { x: vector2.x / length2, y: vector2.y / length2 }
|
||||
|
||||
// 법선 벡터 계산 (왼쪽 방향)
|
||||
var normal1 = { x: -unitVector1.y, y: unitVector1.x }
|
||||
var normal2 = { x: -unitVector2.y, y: unitVector2.x }
|
||||
let normal1 = { x: -unitVector1.y, y: unitVector1.x }
|
||||
let normal2 = { x: -unitVector2.y, y: unitVector2.x }
|
||||
|
||||
// 법선 벡터 평균 계산
|
||||
var averageNormal = {
|
||||
let averageNormal = {
|
||||
x: (normal1.x + normal2.x) / 2,
|
||||
y: (normal1.y + normal2.y) / 2,
|
||||
}
|
||||
|
||||
// 평균 법선 벡터를 단위 벡터로 정규화
|
||||
var lengthNormal = Math.sqrt(averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y)
|
||||
var unitNormal = {
|
||||
let lengthNormal = Math.sqrt(averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y)
|
||||
let unitNormal = {
|
||||
x: averageNormal.x / lengthNormal,
|
||||
y: averageNormal.y / lengthNormal,
|
||||
}
|
||||
|
||||
if (concavePointIndices[0] === i || concavePointIndices[1] === i) {
|
||||
//인덱스가 배열이랑 같으면
|
||||
if ((concavePointIndices[0] === 4 && concavePointIndices[1] === 5) || (concavePointIndices[0] === 2 && concavePointIndices[1] === 3)) {
|
||||
offsetX = 1
|
||||
offsetY = (offsetInputY / transformedMax) * originalMax * 2
|
||||
} else {
|
||||
offsetX = (offsetInputX / transformedMax) * originalMax * 2
|
||||
offsetY = 1
|
||||
}
|
||||
} else {
|
||||
offsetX = (offsetInputX / transformedMax) * originalMax * 2
|
||||
offsetY = (offsetInputY / transformedMax) * originalMax * 2
|
||||
}
|
||||
offsetX = (offsetInputX / transformedMax) * originalMax * 2
|
||||
offsetY = (offsetInputY / transformedMax) * originalMax * 2
|
||||
|
||||
// 오프셋 적용
|
||||
var offsetPoint = {
|
||||
let offsetPoint = {
|
||||
x1: current.x + unitNormal.x * offsetX,
|
||||
y1: current.y + unitNormal.y * offsetY,
|
||||
}
|
||||
@ -2207,6 +2189,7 @@ export function useMode() {
|
||||
}
|
||||
|
||||
const outlinePolygon = makePolygon(offsetPoints)
|
||||
outlinePolygon.setViewLengthText(false)
|
||||
|
||||
// 아웃라인 폴리곤의 각 변을 선으로 생성
|
||||
for (let i = 0; i < outlinePolygon.points.length; i++) {
|
||||
@ -2218,6 +2201,7 @@ export function useMode() {
|
||||
strokeWidth: 2,
|
||||
property: 'normal',
|
||||
fontSize: 14,
|
||||
idx: i,
|
||||
})
|
||||
|
||||
// 선을 배열에 추가
|
||||
@ -2227,13 +2211,8 @@ export function useMode() {
|
||||
|
||||
canvas?.remove(outlinePolygon) //임시 폴리곤을 삭제
|
||||
|
||||
//라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정
|
||||
outLines = reSortQlineArray(outLines)
|
||||
|
||||
let parallelLinesIdx = concavePointIndices[0] + 4 //들어간선에 무조건 평행하는 선 찾기
|
||||
let parallelLines = outLines[parallelLinesIdx]
|
||||
if (parallelLinesIdx >= outLines.length) {
|
||||
parallelLines = outLines[parallelLinesIdx - outLines.length]
|
||||
parallelLinesIdx = parallelLinesIdx - outLines.length
|
||||
}
|
||||
|
||||
@ -2242,10 +2221,207 @@ export function useMode() {
|
||||
let horiCenterLine = []
|
||||
let shorVertCenterLine = []
|
||||
|
||||
let edgeIndexArray = []
|
||||
|
||||
if (concavePointIndices[0] % 2 === 0) {
|
||||
// 오목한 부분이 세로선일때 ㄷ, 역ㄷ
|
||||
//케라바 색을 바꾼다
|
||||
lines.forEach((line, index) => {
|
||||
if (index % 2 === 0) {
|
||||
line.line.set('stroke', 'skyblue')
|
||||
if (concavePointIndices[0] !== index) {
|
||||
edgeIndexArray.push(index)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log('edgeIndexArray', edgeIndexArray)
|
||||
|
||||
outLines = reSortQlineArray(outLines)
|
||||
edgeIndexArray.forEach((idx, index) => {
|
||||
//가로라인이 케라바 라인임
|
||||
if (concavePointIndices[0] !== idx) {
|
||||
//오목이가 아니면 반으로 갈라서 계산
|
||||
|
||||
//카라바 선의 2분할 치수를 그림
|
||||
let halfLength = outLines[idx].length / 2
|
||||
let centerLine1 = new QLine([outLines[idx].x1, outLines[idx].y1, outLines[idx].x1, outLines[idx].y1 + halfLength], centerLineOpt)
|
||||
canvas.add(centerLine1)
|
||||
|
||||
let centerLine2 = new QLine([outLines[idx].x1, centerLine1.y2, outLines[idx].x2, centerLine1.y2 + halfLength], centerLineOpt)
|
||||
canvas.add(centerLine2)
|
||||
canvas.remove(outLines[idx]) //기존 라인 삭제
|
||||
|
||||
halfHoriCenterLinePoint.push({ index: idx, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
|
||||
}
|
||||
})
|
||||
|
||||
console.log('halfHoriCenterLinePoint', halfHoriCenterLinePoint)
|
||||
|
||||
// //각 센터 라인을 그림
|
||||
halfHoriCenterLinePoint.forEach((centerPoint) => {
|
||||
let tmpX2 = parallelLinesIdx !== centerPoint.index ? concaveLine.line.x2 : outLines[concavePointIndices[0]].x1 //평행선에서 내려오는 선은 아웃라인에 닿아야한다
|
||||
|
||||
let line = new QLine([centerPoint.x2, centerPoint.y2, tmpX2, centerPoint.y2], centerLineOpt)
|
||||
canvas.add(line)
|
||||
|
||||
line['arrayIndex'] = centerPoint.index //커스텀으로 기존 index를 넣어줌
|
||||
vertCenterLine.push(line)
|
||||
})
|
||||
|
||||
vertCenterLine = reSortQlineArray(vertCenterLine)
|
||||
lines = reSortQlineArray(lines)
|
||||
|
||||
console.log('parallelLinesIdx', parallelLinesIdx)
|
||||
|
||||
//해당라인에서 만나는점을 계산
|
||||
vertCenterLine.forEach((vertLine) => {
|
||||
if (parallelLinesIdx !== vertLine.arrayIndex) {
|
||||
//평행선을 제외한 애들만 네모를 연결
|
||||
let nearLine
|
||||
let nearOutline
|
||||
if (vertLine.arrayIndex > concaveLine.index) {
|
||||
//센터에 인덱스가 오목점 보다 크면 다음 작으면 앞에꺼
|
||||
nearLine = lines[concaveLine.index + 1]
|
||||
nearOutline = outLines[concaveLine.index + 1]
|
||||
} else {
|
||||
nearLine = lines[concaveLine.index - 1]
|
||||
nearOutline = outLines[concaveLine.index - 1]
|
||||
}
|
||||
|
||||
let nearLineY = nearLine.y1
|
||||
if (parallelLinesIdx < concaveLine.index) {
|
||||
//오목점 위치가 평행선보다 크면 위쪽으로 오목
|
||||
nearLineY = nearLine.y2
|
||||
}
|
||||
|
||||
//기존에 있는 라인에서 연장해서 새로 그림
|
||||
let centerExtendHoriLine = new QLine([vertLine.x1, nearOutline.line.y1, vertLine.x2, nearOutline.line.y2], centerLineOpt)
|
||||
canvas.add(centerExtendHoriLine)
|
||||
canvas.remove(nearOutline)
|
||||
outLines.splice(nearOutline.idx, 1, centerExtendHoriLine) //아웃라인에 데이터를 다시 넣는다
|
||||
|
||||
let centerExtendLine = new QLine([vertLine.line.x2, vertLine.line.y2, centerExtendHoriLine.x2, centerExtendHoriLine.y2], centerLineOpt)
|
||||
canvas.add(centerExtendLine) //새로그리고
|
||||
|
||||
let betweenCenterLine = (vertLine.line.x1 + vertLine.line.x2) / 2
|
||||
let centerDashLine = new QLine([vertLine.line.y1, betweenCenterLine, nearOutline.y1, betweenCenterLine], dashedCenterLineOpt)
|
||||
|
||||
canvas.add(centerDashLine)
|
||||
horiCenterLine.push(centerDashLine)
|
||||
shorVertCenterLine.push(vertLine) //마지막에 가운데 선을 긋기 위해 담음
|
||||
} else {
|
||||
let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx)
|
||||
|
||||
let dashCenterExtendLineLength = longDashLine.x2 - longDashLine.x1
|
||||
let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2
|
||||
let totalLength = ((longDashLine.x2 - longDashLine.x1) * 2) / dashCenterExtendLineLength
|
||||
|
||||
//반 쪼개서 그린다
|
||||
for (let i = 0; i < totalLength; i++) {
|
||||
let startX = i === 0 ? longDashLine.x1 : longDashLine.x1 + dashCenterExtendLineLength
|
||||
let centerDashLine = new QLine([startX, betweenCenterLine, startX + dashCenterExtendLineLength, betweenCenterLine], dashedCenterLineOpt)
|
||||
canvas.add(centerDashLine)
|
||||
horiCenterLine.push(centerDashLine)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// //마지막에 오목한 외곽선을 연장한다
|
||||
// const tmpLastOutLine = outLines[concavePointIndices[0]]
|
||||
// const lastOutLine = new QLine([shorVertCenterLine[0].x1, tmpLastOutLine.y1, shorVertCenterLine[1].x1, tmpLastOutLine.y2], centerLineOpt)
|
||||
// canvas.add(lastOutLine)
|
||||
// canvas.remove(tmpLastOutLine)
|
||||
|
||||
// let tmpVertCenterLine = outLines.filter((x, index) => index % 2 === 0) //세로만 찾음
|
||||
// tmpVertCenterLine = tmpVertCenterLine.concat(vertCenterLine)
|
||||
// tmpVertCenterLine.sort((a, b) => a.x1 - b.x1)
|
||||
// tmpVertCenterLine.push(lastOutLine)
|
||||
|
||||
// let roofPatternPolygonArray = []
|
||||
// let tmpArray = []
|
||||
// let tmpBigArray = []
|
||||
|
||||
// const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의
|
||||
|
||||
// for (let i = 0; i < tmpVertCenterLine.length - 1; i++) {
|
||||
// //-1인건 마지막은 오목한 선이라 돌 필요 없음
|
||||
// //라인 하나에 두점씩 나온다
|
||||
// let firstPointObj = {}
|
||||
// let secondPointObj = {}
|
||||
|
||||
// let x1 = tmpVertCenterLine[i].x1
|
||||
// let y1 = tmpVertCenterLine[i].y1
|
||||
// let x2 = tmpVertCenterLine[i].x2
|
||||
// let y2 = tmpVertCenterLine[i].y2
|
||||
|
||||
// if (i === 2 || i === 4) {
|
||||
// tmpArray = []
|
||||
// const prevLine = tmpVertCenterLine[i - 1] //뒤에서 앞라인을 찾는다
|
||||
// const nextLine = tmpVertCenterLine[i + 1]
|
||||
|
||||
// //내 앞뒤 라인
|
||||
// const tmpX1 = i === 2 ? prevLine.x1 : nextLine.x1
|
||||
// const tmpY1 = i === 2 ? prevLine.y1 : nextLine.y1
|
||||
// const tmpX2 = i === 2 ? prevLine.x2 : nextLine.x2
|
||||
// const tmpY2 = i === 2 ? prevLine.y2 : nextLine.y2
|
||||
|
||||
// firstPointObj = { x: tmpX1, y: tmpY1 }
|
||||
// secondPointObj = { x: tmpX2, y: tmpY2 }
|
||||
// tmpArray.push(firstPointObj)
|
||||
// tmpArray.push(secondPointObj)
|
||||
|
||||
// //현재 내 선
|
||||
// firstPointObj = { x: x1, y: y1 }
|
||||
// secondPointObj = { x: x2, y: y2 }
|
||||
// tmpArray.push(firstPointObj)
|
||||
// tmpArray.push(secondPointObj)
|
||||
// roofPatternPolygonArray.push(tmpArray)
|
||||
// } else {
|
||||
// if (i === 1 || i === 5) {
|
||||
// // 큰 폴리곤은 가운데 선으로 되야됨
|
||||
// if (outLines.length / 2 < concavePointIndices[0]) {
|
||||
// //오목이가 배열 전체보다 크면 위쪽 방향
|
||||
// x2 = i === 1 ? lastCenterLine.x2 : lastCenterLine.x1
|
||||
// y2 = i === 1 ? lastCenterLine.y2 : lastCenterLine.y1
|
||||
// } else {
|
||||
// x1 = i === 1 ? lastCenterLine.x1 : lastCenterLine.x2
|
||||
// y1 = i === 1 ? lastCenterLine.y1 : lastCenterLine.y2
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (i === 5) {
|
||||
// //5번일때는 앞에 3번에 선이 필요하다
|
||||
// let prevX1 = tmpVertCenterLine[i - 2].x1
|
||||
// let prevY1 = tmpVertCenterLine[i - 2].y1
|
||||
// let prevX2 = tmpVertCenterLine[i - 2].x2
|
||||
// let prevY2 = tmpVertCenterLine[i - 2].y2
|
||||
// firstPointObj = { x: prevX1, y: prevY1 }
|
||||
// secondPointObj = { x: prevX2, y: prevY2 }
|
||||
// tmpBigArray.push(firstPointObj)
|
||||
// tmpBigArray.push(secondPointObj)
|
||||
// }
|
||||
|
||||
// firstPointObj = { x: x1, y: y1 }
|
||||
// secondPointObj = { x: x2, y: y2 }
|
||||
// tmpBigArray.push(firstPointObj)
|
||||
// tmpBigArray.push(secondPointObj)
|
||||
|
||||
// if (i === 3 || i === 6) {
|
||||
// roofPatternPolygonArray.push(tmpBigArray)
|
||||
// tmpBigArray = []
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
} else {
|
||||
// 오목한 부분이 세로선일때 ㄷ, 역ㄷ
|
||||
// 오목한 부분이 세로선일때 아래ㄷ, 위ㄷ
|
||||
//라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
if (!(index % 2 === 0)) {
|
||||
line.line.set('stroke', 'skyblue')
|
||||
}
|
||||
})
|
||||
outLines = reSortQlineArray(outLines)
|
||||
outLines.forEach((outline, index) => {
|
||||
if (!(index % 2 === 0)) {
|
||||
//세로라인이 케라바 라인임
|
||||
@ -2255,20 +2431,10 @@ export function useMode() {
|
||||
|
||||
//카라바 선의 2분할 치수를 그림
|
||||
let halfLength = outline.length / 2
|
||||
let centerLine1 = new QLine([outline.x1, outline.y1, outline.x1 + halfLength, outline.y1], {
|
||||
stroke: 'red',
|
||||
strokeWidth: 2,
|
||||
property: 'normal',
|
||||
fontSize: 14,
|
||||
})
|
||||
let centerLine1 = new QLine([outline.x1, outline.y1, outline.x1 + halfLength, outline.y1], centerLineOpt)
|
||||
canvas.add(centerLine1)
|
||||
|
||||
let centerLine2 = new QLine([centerLine1.x2, outline.y1, centerLine1.x2 + halfLength, outline.y1], {
|
||||
stroke: 'red',
|
||||
strokeWidth: 2,
|
||||
property: 'normal',
|
||||
fontSize: 14,
|
||||
})
|
||||
let centerLine2 = new QLine([centerLine1.x2, outline.y1, centerLine1.x2 + halfLength, outline.y1], centerLineOpt)
|
||||
canvas.add(centerLine2)
|
||||
canvas.remove(outline) //기존 라인 삭제
|
||||
|
||||
@ -2279,7 +2445,9 @@ export function useMode() {
|
||||
|
||||
//각 센터 라인을 그림
|
||||
halfHoriCenterLinePoint.forEach((centerPoint) => {
|
||||
let line = new QLine([centerPoint.x2, centerPoint.y1, centerPoint.x2, concaveLine.line.y1], centerLineOpt)
|
||||
let tmpY2 = parallelLinesIdx !== centerPoint.index ? concaveLine.line.y1 : outLines[concavePointIndices[0]].y2 //평행선에서 내려오는 선은 아웃라인에 닿아야한다
|
||||
|
||||
let line = new QLine([centerPoint.x2, centerPoint.y1, centerPoint.x2, tmpY2], centerLineOpt)
|
||||
canvas.add(line)
|
||||
|
||||
line['arrayIndex'] = centerPoint.index //커스텀으로 기존 index를 넣어줌
|
||||
@ -2287,18 +2455,21 @@ export function useMode() {
|
||||
})
|
||||
|
||||
vertCenterLine = reSortQlineArray(vertCenterLine)
|
||||
lines = reSortQlineArray(lines)
|
||||
|
||||
//해당라인에서 만나는점을 계산
|
||||
vertCenterLine.forEach((vertLine) => {
|
||||
if (parallelLinesIdx !== vertLine.arrayIndex) {
|
||||
//평행선을 제외한 애들만 네모를 연결
|
||||
let nearLine
|
||||
|
||||
let nearOutline
|
||||
if (vertLine.arrayIndex > concaveLine.index) {
|
||||
//센터에 인덱스가 오목점 보다 크면 다음 작으면 앞에꺼
|
||||
nearLine = outLines[concaveLine.index + 1]
|
||||
nearLine = lines[concaveLine.index + 1]
|
||||
nearOutline = outLines[concaveLine.index + 1]
|
||||
} else {
|
||||
nearLine = outLines[concaveLine.index - 1]
|
||||
nearLine = lines[concaveLine.index - 1]
|
||||
nearOutline = outLines[concaveLine.index - 1]
|
||||
}
|
||||
|
||||
let nearLineY = nearLine.y1
|
||||
@ -2307,11 +2478,17 @@ export function useMode() {
|
||||
nearLineY = nearLine.y2
|
||||
}
|
||||
|
||||
let centerExtendLine = new QLine([vertLine.line.x1, nearLineY, nearLine.x1, nearLineY], centerLineOpt)
|
||||
canvas.add(centerExtendLine)
|
||||
let centerExtendLine = new QLine([vertLine.line.x1, nearLineY, nearOutline.x1, nearLineY], centerLineOpt)
|
||||
canvas.add(centerExtendLine) //새로그리고
|
||||
|
||||
//기존에 있는 라인에서 연장해서 새로 그림
|
||||
let centerExtendHoriLine = new QLine([nearOutline.line.x1, vertLine.y1, nearOutline.line.x2, vertLine.line.y2], centerLineOpt)
|
||||
canvas.add(centerExtendHoriLine)
|
||||
canvas.remove(nearOutline)
|
||||
outLines.splice(nearOutline.idx, 1, centerExtendHoriLine) //아웃라인에 데이터를 다시 넣는다
|
||||
|
||||
let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2
|
||||
let centerDashLine = new QLine([vertLine.line.x1, betweenCenterLine, nearLine.x1, betweenCenterLine], dashedCenterLineOpt)
|
||||
let centerDashLine = new QLine([vertLine.line.x1, betweenCenterLine, nearOutline.x1, betweenCenterLine], dashedCenterLineOpt)
|
||||
|
||||
canvas.add(centerDashLine)
|
||||
horiCenterLine.push(centerDashLine)
|
||||
@ -2319,30 +2496,108 @@ export function useMode() {
|
||||
} else {
|
||||
let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx)
|
||||
|
||||
let dashCenterExtendLineLength = (longDashLine.x2 - longDashLine.x1) * 2
|
||||
let dashCenterExtendLineLength = longDashLine.x2 - longDashLine.x1
|
||||
let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2
|
||||
let totalLength = ((longDashLine.x2 - longDashLine.x1) * 2) / dashCenterExtendLineLength
|
||||
|
||||
let centerDashLine = new QLine(
|
||||
[longDashLine.x1, betweenCenterLine, longDashLine.x1 + dashCenterExtendLineLength, betweenCenterLine],
|
||||
dashedCenterLineOpt,
|
||||
)
|
||||
canvas.add(centerDashLine)
|
||||
horiCenterLine.push(centerDashLine)
|
||||
//반 쪼개서 그린다
|
||||
for (let i = 0; i < totalLength; i++) {
|
||||
let startX = i === 0 ? longDashLine.x1 : longDashLine.x1 + dashCenterExtendLineLength
|
||||
let centerDashLine = new QLine([startX, betweenCenterLine, startX + dashCenterExtendLineLength, betweenCenterLine], dashedCenterLineOpt)
|
||||
canvas.add(centerDashLine)
|
||||
horiCenterLine.push(centerDashLine)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (parallelLinesIdx < concaveLine.index) {
|
||||
offsetY = offsetY * -1 // 위로올린다
|
||||
//마지막에 오목한 외곽선을 연장한다
|
||||
const tmpLastOutLine = outLines[concavePointIndices[0]]
|
||||
const lastOutLine = new QLine([shorVertCenterLine[0].x1, tmpLastOutLine.y1, shorVertCenterLine[1].x1, tmpLastOutLine.y2], centerLineOpt)
|
||||
canvas.add(lastOutLine)
|
||||
canvas.remove(tmpLastOutLine)
|
||||
|
||||
let tmpVertCenterLine = outLines.filter((x, index) => index % 2 === 0) //세로만 찾음
|
||||
tmpVertCenterLine = tmpVertCenterLine.concat(vertCenterLine)
|
||||
tmpVertCenterLine.sort((a, b) => a.x1 - b.x1)
|
||||
tmpVertCenterLine.push(lastOutLine)
|
||||
|
||||
let roofPatternPolygonArray = []
|
||||
let tmpArray = []
|
||||
let tmpBigArray = []
|
||||
|
||||
const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의
|
||||
|
||||
for (let i = 0; i < tmpVertCenterLine.length - 1; i++) {
|
||||
//-1인건 마지막은 오목한 선이라 돌 필요 없음
|
||||
//라인 하나에 두점씩 나온다
|
||||
let firstPointObj = {}
|
||||
let secondPointObj = {}
|
||||
|
||||
let x1 = tmpVertCenterLine[i].x1
|
||||
let y1 = tmpVertCenterLine[i].y1
|
||||
let x2 = tmpVertCenterLine[i].x2
|
||||
let y2 = tmpVertCenterLine[i].y2
|
||||
|
||||
if (i === 2 || i === 4) {
|
||||
tmpArray = []
|
||||
const prevLine = tmpVertCenterLine[i - 1] //뒤에서 앞라인을 찾는다
|
||||
const nextLine = tmpVertCenterLine[i + 1]
|
||||
|
||||
//내 앞뒤 라인
|
||||
const tmpX1 = i === 2 ? prevLine.x1 : nextLine.x1
|
||||
const tmpY1 = i === 2 ? prevLine.y1 : nextLine.y1
|
||||
const tmpX2 = i === 2 ? prevLine.x2 : nextLine.x2
|
||||
const tmpY2 = i === 2 ? prevLine.y2 : nextLine.y2
|
||||
|
||||
firstPointObj = { x: tmpX1, y: tmpY1 }
|
||||
secondPointObj = { x: tmpX2, y: tmpY2 }
|
||||
tmpArray.push(firstPointObj)
|
||||
tmpArray.push(secondPointObj)
|
||||
|
||||
//현재 내 선
|
||||
firstPointObj = { x: x1, y: y1 }
|
||||
secondPointObj = { x: x2, y: y2 }
|
||||
tmpArray.push(firstPointObj)
|
||||
tmpArray.push(secondPointObj)
|
||||
roofPatternPolygonArray.push(tmpArray)
|
||||
} else {
|
||||
if (i === 1 || i === 5) {
|
||||
// 큰 폴리곤은 가운데 선으로 되야됨
|
||||
if (outLines.length / 2 < concavePointIndices[0]) {
|
||||
//오목이가 배열 전체보다 크면 위쪽 방향
|
||||
x2 = i === 1 ? lastCenterLine.x2 : lastCenterLine.x1
|
||||
y2 = i === 1 ? lastCenterLine.y2 : lastCenterLine.y1
|
||||
} else {
|
||||
x1 = i === 1 ? lastCenterLine.x1 : lastCenterLine.x2
|
||||
y1 = i === 1 ? lastCenterLine.y1 : lastCenterLine.y2
|
||||
}
|
||||
}
|
||||
|
||||
if (i === 5) {
|
||||
//5번일때는 앞에 3번에 선이 필요하다
|
||||
let prevX1 = tmpVertCenterLine[i - 2].x1
|
||||
let prevY1 = tmpVertCenterLine[i - 2].y1
|
||||
let prevX2 = tmpVertCenterLine[i - 2].x2
|
||||
let prevY2 = tmpVertCenterLine[i - 2].y2
|
||||
firstPointObj = { x: prevX1, y: prevY1 }
|
||||
secondPointObj = { x: prevX2, y: prevY2 }
|
||||
tmpBigArray.push(firstPointObj)
|
||||
tmpBigArray.push(secondPointObj)
|
||||
}
|
||||
|
||||
firstPointObj = { x: x1, y: y1 }
|
||||
secondPointObj = { x: x2, y: y2 }
|
||||
tmpBigArray.push(firstPointObj)
|
||||
tmpBigArray.push(secondPointObj)
|
||||
|
||||
if (i === 3 || i === 6) {
|
||||
roofPatternPolygonArray.push(tmpBigArray)
|
||||
tmpBigArray = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const lastInLine = new QLine(
|
||||
[shorVertCenterLine[0].x1, lines[concavePointIndices[0]].y1 + offsetY, shorVertCenterLine[1].x1, lines[concavePointIndices[0]].y2 + offsetY],
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(lastInLine)
|
||||
canvas.remove(outLines[concavePointIndices[0]])
|
||||
setRoofPolygonPattern({ roofPatternPolygonArray, lines })
|
||||
}
|
||||
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
@ -2871,8 +3126,6 @@ export function useMode() {
|
||||
}
|
||||
|
||||
const makeRoofPatternPolygon = (roofStyle) => {
|
||||
console.log('roofPolygonPattern', roofPolygonPattern)
|
||||
|
||||
if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
|
||||
alert('객체가 비어있습니다.')
|
||||
return
|
||||
@ -2918,7 +3171,7 @@ export function useMode() {
|
||||
|
||||
const commonOption = {
|
||||
fill: pattern,
|
||||
selectable: false,
|
||||
selectable: true,
|
||||
fontSize: 15, // fontSize는 필요에 따라 조정
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user