8각 ㄷ자 패턴 작업
This commit is contained in:
yjnoh
parent
7e39eee4bf
commit
96b1e5822f
@ -2226,6 +2226,7 @@ export function useMode() {
|
||||
let edgeIndexArray = []
|
||||
|
||||
if (concavePointIndices[0] % 2 === 0) {
|
||||
//concave가 짝수면 좌우로 그려진 ㄷ자
|
||||
//케라바 색을 바꾼다
|
||||
lines.forEach((line, index) => {
|
||||
if (index % 2 === 0) {
|
||||
@ -2236,8 +2237,6 @@ export function useMode() {
|
||||
}
|
||||
})
|
||||
|
||||
console.log('edgeIndexArray', edgeIndexArray)
|
||||
|
||||
outLines = reSortQlineArray(outLines)
|
||||
edgeIndexArray.forEach((idx, index) => {
|
||||
//가로라인이 케라바 라인임
|
||||
@ -2257,8 +2256,6 @@ export function useMode() {
|
||||
}
|
||||
})
|
||||
|
||||
console.log('halfHoriCenterLinePoint', halfHoriCenterLinePoint)
|
||||
|
||||
// //각 센터 라인을 그림
|
||||
halfHoriCenterLinePoint.forEach((centerPoint) => {
|
||||
let tmpX2 = parallelLinesIdx !== centerPoint.index ? concaveLine.line.x2 : outLines[concavePointIndices[0]].x1 //평행선에서 내려오는 선은 아웃라인에 닿아야한다
|
||||
@ -2273,8 +2270,6 @@ export function useMode() {
|
||||
vertCenterLine = reSortQlineArray(vertCenterLine)
|
||||
lines = reSortQlineArray(lines)
|
||||
|
||||
console.log('parallelLinesIdx', parallelLinesIdx)
|
||||
|
||||
//해당라인에서 만나는점을 계산
|
||||
vertCenterLine.forEach((vertLine) => {
|
||||
if (parallelLinesIdx !== vertLine.arrayIndex) {
|
||||
@ -2302,118 +2297,136 @@ export function useMode() {
|
||||
canvas.remove(nearOutline)
|
||||
outLines.splice(nearOutline.idx, 1, centerExtendHoriLine) //아웃라인에 데이터를 다시 넣는다
|
||||
|
||||
let centerExtendLine = new QLine([vertLine.line.x2, vertLine.line.y2, centerExtendHoriLine.x2, centerExtendHoriLine.y2], centerLineOpt)
|
||||
//가로형에선 기본으로 ㄷ자 형태로 한다
|
||||
let centerExtendLine = new QLine([vertLine.line.x1, vertLine.line.y1, centerExtendHoriLine.x1, centerExtendHoriLine.y1], centerLineOpt)
|
||||
|
||||
//오목이가 배열에 반보다 작으면 역 ㄷ자 여서 변경
|
||||
if (concavePointIndices[0] < outLines.length / 2) {
|
||||
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)
|
||||
let centerDashLine = new QLine([betweenCenterLine, centerExtendLine.y1, betweenCenterLine, centerExtendLine.y2], dashedCenterLineOpt)
|
||||
|
||||
canvas.add(centerDashLine)
|
||||
horiCenterLine.push(centerDashLine)
|
||||
shorVertCenterLine.push(vertLine) //마지막에 가운데 선을 긋기 위해 담음
|
||||
} else {
|
||||
let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx)
|
||||
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
|
||||
let dashCenterExtendLineLength = longDashLine.y2 - longDashLine.y1 //y반개 길이
|
||||
let betweenCenterLine = (vertLine.line.x1 + vertLine.line.x2) / 2 //y의 길이
|
||||
let totalLength = ((longDashLine.y2 - longDashLine.y1) * 2) / dashCenterExtendLineLength //2개로 나눔
|
||||
|
||||
//반 쪼개서 그린다
|
||||
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)
|
||||
//2번에 나눠서
|
||||
let startY = i === 0 ? longDashLine.y1 : longDashLine.y1 + dashCenterExtendLineLength //시작 하는 y의 좌표
|
||||
//x값은 고정이임 //TODO: 지붕 각도 계산법에 의해 재계산해야함
|
||||
let centerDashLine = new QLine([betweenCenterLine, startY, betweenCenterLine, startY + dashCenterExtendLineLength], 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)
|
||||
//마지막에 오목한 외곽선을 연장한다
|
||||
const tmpLastOutLine = outLines[concavePointIndices[0]]
|
||||
const lastOutLine = new QLine([tmpLastOutLine.x1, shorVertCenterLine[0].y1, tmpLastOutLine.x1, shorVertCenterLine[1].y1], 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 tmpVertCenterLine = outLines.filter((x, index) => index % 2 !== 0) //세로만 찾음
|
||||
tmpVertCenterLine = tmpVertCenterLine.concat(vertCenterLine)
|
||||
tmpVertCenterLine.sort((a, b) => a.y1 - b.y1)
|
||||
tmpVertCenterLine.push(lastOutLine)
|
||||
|
||||
// let roofPatternPolygonArray = []
|
||||
// let tmpArray = []
|
||||
// let tmpBigArray = []
|
||||
let roofPatternPolygonArray = []
|
||||
let tmpArray = []
|
||||
let tmpBigArray = []
|
||||
|
||||
// const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의
|
||||
console.log('tmpVertCenterLine', tmpVertCenterLine)
|
||||
|
||||
// for (let i = 0; i < tmpVertCenterLine.length - 1; i++) {
|
||||
// //-1인건 마지막은 오목한 선이라 돌 필요 없음
|
||||
// //라인 하나에 두점씩 나온다
|
||||
// let firstPointObj = {}
|
||||
// let secondPointObj = {}
|
||||
const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의
|
||||
|
||||
// let x1 = tmpVertCenterLine[i].x1
|
||||
// let y1 = tmpVertCenterLine[i].y1
|
||||
// let x2 = tmpVertCenterLine[i].x2
|
||||
// let y2 = tmpVertCenterLine[i].y2
|
||||
for (let i = 0; i < tmpVertCenterLine.length - 1; i++) {
|
||||
//-1인건 마지막은 오목한 선이라 돌 필요 없음
|
||||
//라인 하나에 두점씩 나온다
|
||||
let firstPointObj = {}
|
||||
let secondPointObj = {}
|
||||
|
||||
// if (i === 2 || i === 4) {
|
||||
// tmpArray = []
|
||||
// const prevLine = tmpVertCenterLine[i - 1] //뒤에서 앞라인을 찾는다
|
||||
// const nextLine = tmpVertCenterLine[i + 1]
|
||||
let x1 = tmpVertCenterLine[i].x1
|
||||
let y1 = tmpVertCenterLine[i].y1
|
||||
let x2 = tmpVertCenterLine[i].x2
|
||||
let y2 = tmpVertCenterLine[i].y2
|
||||
|
||||
// //내 앞뒤 라인
|
||||
// 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
|
||||
if (i === 2 || i === 4) {
|
||||
//작은 네모들
|
||||
tmpArray = []
|
||||
const prevLine = tmpVertCenterLine[i - 1] //뒤에서 앞라인을 찾는다
|
||||
const nextLine = tmpVertCenterLine[i + 1]
|
||||
|
||||
// firstPointObj = { x: tmpX1, y: tmpY1 }
|
||||
// secondPointObj = { x: tmpX2, y: tmpY2 }
|
||||
// tmpArray.push(firstPointObj)
|
||||
// tmpArray.push(secondPointObj)
|
||||
//내 앞뒤 라인
|
||||
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: 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
|
||||
// }
|
||||
// }
|
||||
firstPointObj = { x: tmpX1, y: tmpY1 }
|
||||
secondPointObj = { x: tmpX2, y: tmpY2 }
|
||||
tmpArray.push(firstPointObj)
|
||||
tmpArray.push(secondPointObj)
|
||||
|
||||
// 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 }
|
||||
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.x1 : lastCenterLine.x2
|
||||
y2 = i === 1 ? lastCenterLine.y1 : lastCenterLine.y2
|
||||
} else {
|
||||
//오목이가 배열 전체보다 크면 오른쪽 오목이
|
||||
x1 = i === 1 ? lastCenterLine.x1 : lastCenterLine.x2
|
||||
y1 = i === 1 ? lastCenterLine.y2 : lastCenterLine.y1
|
||||
}
|
||||
}
|
||||
|
||||
// firstPointObj = { x: x1, y: y1 }
|
||||
// secondPointObj = { x: x2, y: y2 }
|
||||
// tmpBigArray.push(firstPointObj)
|
||||
// tmpBigArray.push(secondPointObj)
|
||||
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)
|
||||
}
|
||||
|
||||
// if (i === 3 || i === 6) {
|
||||
// roofPatternPolygonArray.push(tmpBigArray)
|
||||
// tmpBigArray = []
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
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 = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('roofPatternPolygonArray', roofPatternPolygonArray)
|
||||
|
||||
setRoofPolygonPattern({ roofPatternPolygonArray, lines })
|
||||
} else {
|
||||
// 오목한 부분이 세로선일때 아래ㄷ, 위ㄷ
|
||||
//라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user