테스트중
This commit is contained in:
Jaeyoung Lee
parent
1704efc9d5
commit
2159a4b64b
@ -6,10 +6,10 @@ import QRect from '@/components/fabric/QRect'
|
||||
import QPolygon from '@/components/fabric/QPolygon'
|
||||
|
||||
import RangeSlider from './ui/RangeSlider'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { canvasAtom, canvasListState, canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import { getTests, getCanvasState, insertCanvasState } from '@/lib/canvas'
|
||||
import { getCanvasState, insertCanvasState } from '@/lib/canvas'
|
||||
import { calculateIntersection2 } from '@/util/canvas-util'
|
||||
|
||||
export default function Roof2() {
|
||||
@ -207,8 +207,17 @@ export default function Roof2() {
|
||||
{ x: 897, y: 215 },
|
||||
]
|
||||
|
||||
const octaType1 = [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 100, y: 600 },
|
||||
{ x: 500, y: 600 },
|
||||
{ x: 500, y: 400 },
|
||||
{ x: 350, y: 400 },
|
||||
{ x: 350, y: 100 },
|
||||
]
|
||||
|
||||
if (canvas) {
|
||||
const polygon = new QPolygon(eightPoint, {
|
||||
const polygon = new QPolygon(octaType1, {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 1,
|
||||
|
||||
@ -12,7 +12,6 @@ import {
|
||||
sortedPoints,
|
||||
} from '@/util/canvas-util'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import { drawHelpLineInHexagon2 } from '@/util/qpolygon-utils'
|
||||
|
||||
export default class QPolygon extends fabric.Group {
|
||||
type = 'QPolygon'
|
||||
@ -29,9 +28,11 @@ export default class QPolygon extends fabric.Group {
|
||||
helpLines = []
|
||||
|
||||
wall
|
||||
|
||||
initPoints
|
||||
|
||||
initOption
|
||||
ridges = []
|
||||
hips = []
|
||||
|
||||
constructor(points, options, canvas) {
|
||||
/*if (points.length !== 4 && points.length !== 6) {
|
||||
@ -321,7 +322,6 @@ export default class QPolygon extends fabric.Group {
|
||||
|
||||
// 보조선 그리기
|
||||
drawHelpLine(chon = 4) {
|
||||
console.log(chon)
|
||||
if (!this.isValid()) {
|
||||
return
|
||||
}
|
||||
@ -537,6 +537,7 @@ export default class QPolygon extends fabric.Group {
|
||||
this.canvas.add(ridge)
|
||||
}
|
||||
}
|
||||
|
||||
drawHelpLineInHexagon2(chon) {
|
||||
const oneSideLines = [...this.lines].map((line) => {
|
||||
let newX1, newY1, newX2, newY2
|
||||
@ -753,6 +754,7 @@ export default class QPolygon extends fabric.Group {
|
||||
this.canvas.renderAll()
|
||||
})
|
||||
}
|
||||
|
||||
drawHelpLineInHexagon(chon) {
|
||||
const historyLines = []
|
||||
const helpPoints = []
|
||||
@ -926,9 +928,6 @@ export default class QPolygon extends fabric.Group {
|
||||
let startXPoint, startYPoint, endXPoint, endYPoint
|
||||
let dVector, ridgeMaxLength, ridgeMinLength, ridgeRun
|
||||
|
||||
let maxSquare = this.getLargestSquareCoordinate()
|
||||
// console.log(maxSquare)
|
||||
|
||||
this.lines.forEach(
|
||||
(value, index) => {
|
||||
if (index === 0) {
|
||||
@ -954,82 +953,83 @@ export default class QPolygon extends fabric.Group {
|
||||
|
||||
if (this.getLineDirection(prevLine) !== this.getLineDirection(nextLine) && currentWall.length < currentLine.length) {
|
||||
dVector = this.getDirectionForDegree(prevLine, currentLine)
|
||||
let prevLineLength, currentLineLength, nextLineLength
|
||||
let {
|
||||
minLineLength,
|
||||
currentLineLength,
|
||||
maxLineLength,
|
||||
} = this.getRoofBaseLine(prevWall, prevLine, currentWall, currentLine, nextWall, nextLine, dVector)
|
||||
|
||||
this.getRoofBaseLine(prevLine, currentLine, nextLine, dVector)
|
||||
|
||||
|
||||
// let acrossLine = this.getAcrossLine(currentLine, dVector)
|
||||
// if (acrossLine !== null) {
|
||||
// console.log(currentWall.length - acrossLine.length)
|
||||
// console.log('acrossLine : ' + acrossLine.length)
|
||||
// console.log((currentWall.length - acrossLine.length) + '<=' + prevWall.length + '&&' + (currentWall.length - acrossLine.length) + '<=' + nextWall.length)
|
||||
// }
|
||||
// 마루는 세개의 벽중에서 가장 길 수 없다.
|
||||
/* if ((currentWall.length <= prevWall.length && currentWall.length <= nextWall.length)
|
||||
// || (acrossLine !== null && (currentWall.length - acrossLine.length <= prevWall.length || currentWall.length - acrossLine.length <= nextWall.length))
|
||||
) {
|
||||
// console.log('currentLineLength : ', currentLineLength, 'minLineLength : ', minLineLength, 'maxLineLength : ', maxLineLength)
|
||||
// console.log(currentLineLength <= minLineLength && currentLineLength <= maxLineLength)
|
||||
if (currentWall.length <= prevWall.length && currentWall.length <= nextWall.length) {
|
||||
// console.log('currentWall.length : ' + currentWall.length)
|
||||
}
|
||||
|
||||
console.log('currentLine.length : ' + currentLine.length)
|
||||
ridgeMaxLength = Math.min(prevLine.length, nextLine.length)
|
||||
ridgeMinLength = Math.max(prevLine.length, nextLine.length) - currentLine.length
|
||||
ridgeRun = ridgeMinLength < ridgeMaxLength ? ridgeMinLength : ridgeMaxLength
|
||||
console.log(ridgeMinLength, ridgeMaxLength, ridgeRun)
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
startXPoint = currentLine.x1 + (currentLine.length / 2)
|
||||
startYPoint = currentLine.y1 - (currentLine.length / 2)
|
||||
endXPoint = startXPoint
|
||||
endYPoint = startYPoint
|
||||
break
|
||||
case 135:
|
||||
startXPoint = currentLine.x1 + (currentLine.length / 2)
|
||||
startYPoint = currentLine.y1 + (currentLine.length / 2)
|
||||
endXPoint = startXPoint
|
||||
endYPoint = startYPoint
|
||||
break
|
||||
case 225:
|
||||
startXPoint = currentLine.x1 - (currentLine.length / 2)
|
||||
startYPoint = currentLine.y1 + (currentLine.length / 2)
|
||||
endXPoint = startXPoint
|
||||
endYPoint = startYPoint
|
||||
break
|
||||
case 315:
|
||||
startXPoint = currentLine.x1 - (currentLine.length / 2)
|
||||
startYPoint = currentLine.y1 - (currentLine.length / 2)
|
||||
endXPoint = startXPoint
|
||||
endYPoint = startYPoint
|
||||
break
|
||||
}
|
||||
// console.log('startXPoint, startYPoint, endXPoint, endYPoint')
|
||||
// console.log(startXPoint, startYPoint, endXPoint, endYPoint)
|
||||
/*if (currentLineLength <= minLineLength && currentLineLength <= maxLineLength
|
||||
|| (currentWall.length <= prevWall.length && currentWall.length <= nextWall.length)) {
|
||||
// console.log('currentLine.length : ' + currentLine.length)
|
||||
ridgeMaxLength = Math.min(minLineLength, maxLineLength)
|
||||
ridgeMinLength = Math.max(minLineLength, maxLineLength) - currentLineLength
|
||||
ridgeRun = Math.min(ridgeMinLength, ridgeMaxLength)
|
||||
// console.log(ridgeRun)
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
startXPoint = currentLine.x1 + (currentLineLength / 2)
|
||||
startYPoint = currentLine.y1 - (currentLineLength / 2)
|
||||
endXPoint = startXPoint
|
||||
endYPoint = startYPoint - ridgeRun
|
||||
break
|
||||
case 135:
|
||||
let addYLength = 0, addXLength = 0
|
||||
if (currentLineLength !== currentLine.length) {
|
||||
// console.log('currentline 길이 변경')
|
||||
// console.log(currentLineLength, currentLine.length)
|
||||
// console.log(arrX)
|
||||
if ((arrX.x1 === currentLine.x1 || arrX.x1 === currentLine.x2)
|
||||
|| (arrX.x2 === currentLine.x1 || arrX.x2 === currentLine.x2)) {
|
||||
// console.log('arrX.y2 === currentLine.y1 || arrX.y2 === currentLine.y2')
|
||||
addXLength = arrX.x1 - arrX.x2
|
||||
}
|
||||
if ((arrY.y1 === currentLine.y1 || arrY.y1 === currentLine.y2) ||
|
||||
(arrY.y2 === currentLine.y1 || arrY.y2 === currentLine.y2)) {
|
||||
// console.log('arrY.x2 === currentLine.x1 || arrY.x2 === currentLine.x2')
|
||||
addYLength = arrY.y1 - arrY.y2
|
||||
}
|
||||
|
||||
if (this.ridges.length < this.getMaxRidge(this.lines.length)) {
|
||||
const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], {
|
||||
fontSize: this.fontSize,
|
||||
stroke: 'blue',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(ridge)
|
||||
this.ridges.push(ridge)
|
||||
// console.log(currentLine.x1 - arrX.x1, currentLine.x1 - arrX.x2)
|
||||
}
|
||||
startXPoint = currentLine.x1 + (currentLineLength / 2)
|
||||
startYPoint = currentLine.y1 + (currentLineLength / 2) + addYLength
|
||||
endXPoint = startXPoint + ridgeRun
|
||||
endYPoint = startYPoint
|
||||
break
|
||||
case 225:
|
||||
startXPoint = currentLine.x1 - (currentLineLength / 2)
|
||||
startYPoint = currentLine.y1 + (currentLineLength / 2)
|
||||
endXPoint = startXPoint
|
||||
endYPoint = startYPoint + ridgeRun
|
||||
break
|
||||
case 315:
|
||||
startXPoint = currentLine.x1 - (currentLineLength / 2)
|
||||
startYPoint = currentLine.y1 - (currentLineLength / 2)
|
||||
endXPoint = startXPoint - ridgeRun
|
||||
endYPoint = startYPoint
|
||||
break
|
||||
}
|
||||
// console.log('startXPoint, startYPoint, endXPoint, endYPoint')
|
||||
// console.log(startXPoint, startYPoint, endXPoint, endYPoint)
|
||||
|
||||
// 마루와 연결될 추녀마루을 그려준다.
|
||||
// const leftHip = new QLine([currentLine.x1, currentLine.y1, startXPoint, startYPoint], {
|
||||
// fontSize: this.fontSize,
|
||||
// stroke: 'red',
|
||||
// strokeWidth: 1,
|
||||
// })
|
||||
// const rightHip = new QLine([currentLine.x2, currentLine.y2, startXPoint, startYPoint], {
|
||||
// fontSize: this.fontSize,
|
||||
// stroke: 'red',
|
||||
// strokeWidth: 1,
|
||||
// })
|
||||
// this.addWithUpdate(leftHip)
|
||||
// this.addWithUpdate(rightHip)
|
||||
// this.hips.push(leftHip)
|
||||
// this.hips.push(rightHip)
|
||||
}
|
||||
}*/
|
||||
if (this.ridges.length < this.getMaxRidge(this.lines.length)) {
|
||||
const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], {
|
||||
fontSize: this.fontSize,
|
||||
stroke: 'blue',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(ridge)
|
||||
this.ridges.push(ridge)
|
||||
}
|
||||
}*/
|
||||
}
|
||||
},
|
||||
)
|
||||
@ -1059,7 +1059,7 @@ export default class QPolygon extends fabric.Group {
|
||||
let endXPoint, endYPoint
|
||||
let dVector = this.getDirectionForDegree(prevLine, currentLine)
|
||||
let linesXCoordinate = []
|
||||
console.log('hip dVector : ' + dVector)
|
||||
// console.log('hip dVector : ' + dVector)
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
this.lines.forEach((line) => {
|
||||
@ -1114,6 +1114,7 @@ export default class QPolygon extends fabric.Group {
|
||||
})
|
||||
break
|
||||
}
|
||||
console.log('linesXCoordinate : ', linesXCoordinate)
|
||||
console.log('dVector : ', dVector)
|
||||
console.log('currentLine.x1 : ' + currentLine.x1 + ' , linesXCoordinate :', Math.min.apply(null, linesXCoordinate))
|
||||
let lineMaxHypotenuse
|
||||
@ -1124,27 +1125,88 @@ export default class QPolygon extends fabric.Group {
|
||||
console.log('lineMaxHypotenuse : ', lineMaxHypotenuse)
|
||||
|
||||
this.ridges.forEach(ridge => {
|
||||
console.log('getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1)) : ' + Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) + ' <= lineMaxHypotenuse : ' + lineMaxHypotenuse)
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
if (currentLine.x1 < ridge.x1 && currentLine.y1 > ridge.y1
|
||||
&& Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)
|
||||
&& Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x1
|
||||
endYPoint = ridge.y1
|
||||
}
|
||||
if (currentLine.x1 < ridge.x2 && currentLine.y1 > ridge.y2
|
||||
&& Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)
|
||||
&& getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x2
|
||||
endYPoint = ridge.y2
|
||||
// console.log('X2')
|
||||
}
|
||||
break
|
||||
case 135:
|
||||
if (currentLine.x1 < ridge.x1 && currentLine.y1 < ridge.y1
|
||||
&& Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)
|
||||
&& Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x1
|
||||
endYPoint = ridge.y1
|
||||
}
|
||||
if (currentLine.x1 < ridge.x2 && currentLine.y1 < ridge.y2
|
||||
&& Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)
|
||||
&& getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x2
|
||||
endYPoint = ridge.y2
|
||||
// console.log('X2')
|
||||
}
|
||||
break
|
||||
case 225:
|
||||
if (currentLine.x1 > ridge.x1 && currentLine.y1 < ridge.y1
|
||||
&& Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)
|
||||
&& Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x1
|
||||
endYPoint = ridge.y1
|
||||
}
|
||||
if (currentLine.x1 > ridge.x2 && currentLine.y1 < ridge.y2
|
||||
&& Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)
|
||||
&& getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x2
|
||||
endYPoint = ridge.y2
|
||||
// console.log('X2')
|
||||
}
|
||||
break
|
||||
case 315:
|
||||
if (currentLine.x1 > ridge.x1 && currentLine.y1 > ridge.y1
|
||||
&& Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)
|
||||
&& Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x1
|
||||
endYPoint = ridge.y1
|
||||
}
|
||||
if (currentLine.x1 > ridge.x2 && currentLine.y1 > ridge.y2
|
||||
&& Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)
|
||||
&& getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x2
|
||||
endYPoint = ridge.y2
|
||||
// console.log('X2')
|
||||
}
|
||||
break
|
||||
}
|
||||
// console.log('getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1)) : ' + Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) + ' <= lineMaxHypotenuse : ' + lineMaxHypotenuse)
|
||||
/*
|
||||
if (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1)
|
||||
&& Math.floor(getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x1))) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x1
|
||||
endYPoint = ridge.y1
|
||||
console.log('X1')
|
||||
// console.log('X1')
|
||||
}
|
||||
if (Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)
|
||||
&& getRoofHypotenuse(Math.abs(currentLine.x1 - ridge.x2)) <= lineMaxHypotenuse) {
|
||||
endXPoint = ridge.x2
|
||||
endYPoint = ridge.y2
|
||||
console.log('X2')
|
||||
// console.log('X2')
|
||||
}
|
||||
*/
|
||||
|
||||
})
|
||||
// TODO [ljyoung] : 마루와 만나지 않는 hip 계산
|
||||
console.log('endXPoint : ' + endXPoint + ' , endYPoint : ' + endYPoint)
|
||||
// console.log('endXPoint : ' + endXPoint + ' , endYPoint : ' + endYPoint)
|
||||
if (endXPoint === undefined || endYPoint === undefined) {
|
||||
console.log('todo')
|
||||
// endXPoint = currentLine.x1 + lineMaxHypotenuse / 2
|
||||
// endYPoint = currentLine.y1 + lineMaxHypotenuse / 2
|
||||
console.log('currentLine.x1 : ' + currentLine.x1 + ' , ' +
|
||||
'this.getReverseHypothenuse(lineMaxHypotenuse): ' + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
|
||||
switch (dVector) {
|
||||
@ -1157,6 +1219,7 @@ export default class QPolygon extends fabric.Group {
|
||||
endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
|
||||
break
|
||||
case 225:
|
||||
console.log('currentLine.x1 : ' + currentLine.x1 + ' , ' + currentLine.y1 + ' , ' + this.getReverseHypotenuse(lineMaxHypotenuse))
|
||||
endXPoint = Math.abs(currentLine.x1 - this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
|
||||
endYPoint = Math.abs(currentLine.y1 + this.getReverseHypotenuse(lineMaxHypotenuse) / 2)
|
||||
break
|
||||
@ -1166,8 +1229,8 @@ export default class QPolygon extends fabric.Group {
|
||||
break
|
||||
}
|
||||
}
|
||||
console.log(currentLine)
|
||||
console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint)
|
||||
// console.log(currentLine)
|
||||
// console.log(currentLine.x1, currentLine.y1, endXPoint, endYPoint)
|
||||
|
||||
const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], {
|
||||
fontSize: this.fontSize,
|
||||
@ -1176,10 +1239,11 @@ export default class QPolygon extends fabric.Group {
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
this.hips.push(hip)
|
||||
this.canvas.renderAll()
|
||||
}
|
||||
},
|
||||
)
|
||||
this.canvas.renderAll()
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
@ -1206,85 +1270,154 @@ export default class QPolygon extends fabric.Group {
|
||||
피타고라스 정리를 이용하여 빗변의 길이를 알때 나머지 변의 길이를 구한다.
|
||||
*/
|
||||
getReverseHypotenuse(line) {
|
||||
return Math.sqrt(Math.pow(line, 2) / 2)
|
||||
return Math.round(Math.sqrt(Math.pow(line, 2) / 2))
|
||||
}
|
||||
|
||||
getRoofBaseLine(prevLine, currentLine, nextLine, dVector) {
|
||||
let prevLineLength, currentLineLength, nextLineLength
|
||||
getRoofBaseLine(prevWall, prevLine, currentWall, currentLine, nextWall, nextLine, dVector) {
|
||||
let minLineLength = Math.min(prevLine.length, nextLine.length)
|
||||
let currentLineLength = currentLine.length
|
||||
let maxLineLength = Math.max(prevLine.length, nextLine.length)
|
||||
|
||||
let objectX = {}
|
||||
let objectY = {}
|
||||
let arrLine = []
|
||||
let minX = Math.min(currentWall.x1, currentWall.x2, prevWall.x1, nextWall.x2)
|
||||
let maxX = Math.max(currentWall.x1, currentWall.x2, prevWall.x1, nextWall.x2)
|
||||
let minY = Math.min(currentWall.y1, currentWall.y2, prevWall.y1, nextWall.y2)
|
||||
let maxY = Math.max(currentWall.y1, currentWall.y2, prevWall.y1, nextWall.y2)
|
||||
|
||||
let currentPolygon = []
|
||||
const testXArr = [currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2]
|
||||
const testYArr = [currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2]
|
||||
let minX = Math.min.apply(null, testXArr)
|
||||
let maxX = Math.max.apply(null, testXArr)
|
||||
let minY = Math.min.apply(null, testYArr)
|
||||
let maxY = Math.max.apply(null, testYArr)
|
||||
let inside = false
|
||||
let nearX = []
|
||||
let nearY = []
|
||||
|
||||
console.log('testXArr : ' + testXArr, 'min : ', Math.min.apply(null, testXArr), 'max : ', Math.max.apply(null, testXArr))
|
||||
console.log('testYArr : ' + testYArr, 'min : ', Math.min.apply(null, testYArr), 'max : ', Math.max.apply(null, testYArr))
|
||||
let wallCoordinate = [
|
||||
{ x: minX, y: minY },
|
||||
{ x: minX, y: maxY },
|
||||
{ x: maxX, y: maxY },
|
||||
{ x: maxX, y: minY },
|
||||
]
|
||||
|
||||
console.log('currentLine.length : ' + currentLine.length, 'dVector : ' + dVector)
|
||||
console.log('x1,y1 :', currentLine.x1, currentLine.y1, ', x2,y2 : ', currentLine.x2
|
||||
, currentLine.y2, ', x3,y3 : ', nextLine.x2, nextLine.y2, ', x4,y4 : ', prevLine.x1, prevLine.y1)
|
||||
console.log('wallCoordinate : ', wallCoordinate)
|
||||
let innerPointLine = this.lines.filter(line => {
|
||||
// console.log('line.x1 : ', line.x1, 'line.y1 : ', line.y1)
|
||||
if (this.getPointInPolygon(wallCoordinate, { x: line.x1, y: line.y1 })) {
|
||||
return line
|
||||
}
|
||||
})
|
||||
console.log(innerPointLine)
|
||||
|
||||
//X좌표 기준점을 구한다.
|
||||
objectX = { x1: currentLine.x1, x2: currentLine.x2, x3: nextLine.x2, x4: prevLine.x1 }
|
||||
//Y좌표 기준점을 구한다.
|
||||
objectY = { y1: currentLine.y1, y2: currentLine.y2, y3: nextLine.y2, y4: prevLine.y1 }
|
||||
let coordinateLength
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
|
||||
console.log('objectX : ', objectX)
|
||||
console.log('objectY : ', objectY)
|
||||
console.log('45 계산')
|
||||
coordinateLength = Math.abs(wallCoordinate[0].x - wallCoordinate[1].x)
|
||||
break
|
||||
case 135:
|
||||
if (innerPointLine.length > 0) {
|
||||
innerPointLine = innerPointLine.reduce((a, b) => {
|
||||
return a.x1 < b.x1 ? a : b
|
||||
})
|
||||
console.log('innerPointLine : ', innerPointLine)
|
||||
}
|
||||
|
||||
console.log('135 계산')
|
||||
coordinateLength = Math.abs(wallCoordinate[0].x - wallCoordinate[3].x)
|
||||
console.log(currentWall.length, coordinateLength)
|
||||
//계산된 x 좌표가 마루를 작성 할 최소 기준에 미치지 못하면 그릴수 없다.
|
||||
|
||||
if (coordinateLength < currentWall.length) {
|
||||
return {
|
||||
minLineLength: coordinateLength,
|
||||
currentLineLength: currentWall.length,
|
||||
maxLineLength: coordinateLength,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
minLineLength: currentWall.length,
|
||||
currentLineLength: currentWall.length,
|
||||
maxLineLength: coordinateLength,
|
||||
}
|
||||
}
|
||||
break
|
||||
case 225:
|
||||
break
|
||||
case 315:
|
||||
break
|
||||
}
|
||||
|
||||
let lineDirection = this.getLineDirection(currentLine)
|
||||
|
||||
console.log('currentLineLength : ', currentLineLength, 'dVector : ', dVector)
|
||||
console.log('minX :', minX, 'maxX :', maxX, 'minY :', minY, 'maxY :', maxY)
|
||||
// 3라인의 좌표 안에 들어있는 라인을 찾는다.
|
||||
arrLine = this.lines.filter((line) => {
|
||||
console.log('line.length : ' + line.length)
|
||||
console.log(minX < line.x1 && line.x2 < maxX && minY < line.y1 && line.y2 < maxY)
|
||||
console.log(line.x1, line.x2, line.y1, line.y2)
|
||||
console.log(line.length)
|
||||
return minX < line.x1 && line.x2 < maxX && minY < line.y1 && line.y2 < maxY
|
||||
/* if (dVector === 45 || dVector === 135) {
|
||||
console.log('objectX.x1 < line.x1 && objectX.x1 < line.x2', objectX.x1 < line.x1, objectX.x1 < line.x2)
|
||||
console.log('objectY.y1, objectY.y3, line.y1 =', objectY.y1, objectY.y3, line.y1)
|
||||
console.log('objectY.y1, objectY.y4, line.y2 =', objectY.y1, objectY.y4, line.y2)
|
||||
console.log('this.isBetween(objectY.y1, objectY.y3, line.y1) :', this.isBetween(objectY.y1, objectY.y3, line.y1))
|
||||
console.log('this.isBetween(objectY.y1, objectY.y4, line.y2) : ', this.isBetween(objectY.y1, objectY.y4, line.y2))
|
||||
console.log((objectX.x1 < line.x1 && objectX.x1 < line.x2)
|
||||
&& (this.isBetween(objectY.y1, objectY.y2, line.y1) || this.isBetween(objectY.y1, objectY.y2, line.y1)))
|
||||
return (objectX.x1 < line.x1 && objectX.x1 < line.x2)
|
||||
&& (this.isBetween(objectY.y1, objectY.y3, line.y1) || this.isBetween(objectY.y1, objectY.y4, line.y2))
|
||||
}
|
||||
if (dVector === 225 || dVector === 315) {
|
||||
console.log('objectY.y1 < line.y1 && objectY.y1 < line.y2', objectY.y1 < line.y1, objectY.y1 < line.y2)
|
||||
console.log('objectX.x1, objectX.x3, line.x1 =', objectX.x1, objectX.x3, line.x1)
|
||||
console.log('objectX.x1, objectX.x4, line.x2 =', objectX.x1, objectX.x4, line.x2)
|
||||
console.log((objectY.y1 < line.y1 && objectY.y1 < line.y2)
|
||||
&& (this.isBetween(objectX.x1, objectX.x3, line.x1) || this.isBetween(objectX.x1, objectX.x4, line.x2)))
|
||||
return (objectY.y1 < line.y1 && objectY.y1 < line.y2)
|
||||
&& (this.isBetween(objectX.x1, objectX.x3, line.x1) || this.isBetween(objectX.x1, objectX.x4, line.x2))
|
||||
}*/
|
||||
})
|
||||
|
||||
console.log('arrLine : ' + arrLine.length)
|
||||
let arrX, arrY
|
||||
if (arrLine.length > 0) {
|
||||
arrX = arrLine.reduce((a, b) => {
|
||||
return a.x1 < b.x1 ? a : b
|
||||
})
|
||||
arrY = arrLine.reduce((a, b) => {
|
||||
return a.y1 < b.y1 ? a : b
|
||||
})
|
||||
// console.log('arrX, arrY : ', arrX, ' ', arrY)
|
||||
// console.log('currentLine.x1, arrX.x1 : ', currentLine.x1, arrX.x1, ' = ', Math.abs(currentLine.x1 - arrX.x1))
|
||||
// console.log('currentLine.y1, arrY.y1 : ', currentLine.y1, arrY.y1, ' = ', Math.abs(currentLine.y1 - arrY.y1))
|
||||
// console.log('lineDirection : ', lineDirection)
|
||||
// console.log('arrLineDirection : ', this.getLineDirection(arrX), this.getLineDirection(arrY))
|
||||
// console.log('계산전 : ', minLineLength, currentLineLength, maxLineLength)
|
||||
// console.log('dVector : ', dVector)
|
||||
|
||||
function isPointInPolygon(polygon, point) {
|
||||
const [x, y] = point
|
||||
let inside = false
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
|
||||
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
||||
const [xi, yi] = polygon[i]
|
||||
const [xj, yj] = polygon[j]
|
||||
if (arrX.x1 !== arrX.x2 && this.isBetween(currentLine.x1, currentLine.x2, arrX.x1) && this.isBetween(currentLine.x1, currentLine.x2, arrX.x2)) {
|
||||
minLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y2))
|
||||
maxLineLength = minLineLength
|
||||
} else {
|
||||
|
||||
const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)
|
||||
if (intersect) inside = !inside
|
||||
currentLineLength = Math.abs(currentLine.x1 - Math.min(arrX.x1, arrX.x2))
|
||||
minLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y2))
|
||||
}
|
||||
|
||||
break
|
||||
case 135:
|
||||
// console.log(arrX.x1, arrX.x2, currentLine.x1, currentLine.x2)
|
||||
// console.log(arrY.y1, arrY.y2, currentLine.y1, currentLine.y2)
|
||||
if (arrY.y1 !== arrY.y2 && this.isBetween(currentLine.y1, currentLine.y2, arrY.y1) && this.isBetween(currentLine.y1, currentLine.y2, arrY.y2)) {
|
||||
minLineLength = Math.abs(currentLine.x1 - Math.min(arrX.x1, arrX.x2))
|
||||
maxLineLength = minLineLength
|
||||
} else {
|
||||
// console.log('aa')
|
||||
currentLineLength = Math.abs(currentLine.y1 - Math.max(arrY.y1, arrY.y2))
|
||||
minLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrX.x2))
|
||||
}
|
||||
break
|
||||
case 225:
|
||||
if (arrY.y1 !== arrY.y2 && this.isBetween(currentLine.y1, currentLine.y2, arrY.y1) && this.isBetween(currentLine.y1, currentLine.y2, arrY.y2)) {
|
||||
minLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrX.x2))
|
||||
maxLineLength = minLineLength
|
||||
} else {
|
||||
currentLineLength = Math.abs(currentLine.y1 - Math.max(arrY.y1, arrY.y2))
|
||||
minLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrX.x2))
|
||||
}
|
||||
break
|
||||
case 315:
|
||||
if (arrX.x1 !== arrX.x2 && this.isBetween(currentLine.x1, currentLine.x2, arrX.x1) && this.isBetween(currentLine.x1, currentLine.x2, arrX.x2)) {
|
||||
currentLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y2))
|
||||
minLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrY.x2))
|
||||
} else {
|
||||
currentLineLength = Math.abs(currentLine.x1 - Math.max(arrX.x1, arrX.x2))
|
||||
minLineLength = Math.abs(currentLine.y1 - Math.min(arrY.y1, arrY.y))
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
return inside
|
||||
}
|
||||
|
||||
// console.log('계산후 : ', minLineLength, currentLineLength, maxLineLength)
|
||||
return { minLineLength, currentLineLength, maxLineLength, arrX, arrY }
|
||||
}
|
||||
|
||||
/*
|
||||
@ -1294,6 +1427,24 @@ export default class QPolygon extends fabric.Group {
|
||||
return (a < c && c < b) || (b < c && c < a)
|
||||
}
|
||||
|
||||
getPointInPolygon(polygon, point) {
|
||||
|
||||
let inside = false
|
||||
let minX = Math.min(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x),
|
||||
maxX = Math.max(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x),
|
||||
minY = Math.min(polygon[0].y, polygon[1].y, polygon[2].y, polygon[3].y),
|
||||
maxY = Math.max(polygon[0].y, polygon[1].y, polygon[2].y, polygon[3].y)
|
||||
|
||||
// console.log('minX, maxX, minY, maxY')
|
||||
// console.log(minX, maxX, minY, maxY)
|
||||
// console.log(point.x, point.y)
|
||||
if (minX <= point.x && point.x <= maxX && minY <= point.y && point.y <= maxY) {
|
||||
inside = true
|
||||
}
|
||||
|
||||
return inside
|
||||
}
|
||||
|
||||
/*
|
||||
라인과 마주하는 다른 라인과의 가장 가까운 거리를 구한다.
|
||||
*/
|
||||
@ -1303,7 +1454,7 @@ export default class QPolygon extends fabric.Group {
|
||||
|
||||
if (lineDirection === 't' || lineDirection === 'b') {
|
||||
if (dVector === 45 || dVector === 135) {
|
||||
console.log('45, 135 : currentLine을 기준으로 오른쪽에서 찾는다.')
|
||||
// console.log('45, 135 : currentLine을 기준으로 오른쪽에서 찾는다.')
|
||||
acrossLines = this.lines.filter(line => {
|
||||
if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r')
|
||||
&& (currentLine.x1 < line.x1 || currentLine.x1 < line.x2)) {
|
||||
@ -1317,7 +1468,7 @@ export default class QPolygon extends fabric.Group {
|
||||
}
|
||||
}
|
||||
if (dVector === 225 || dVector === 315) {
|
||||
console.log('225, 315 : currentLine을 기준으로 왼쪽에서 찾는다.')
|
||||
// console.log('225, 315 : currentLine을 기준으로 왼쪽에서 찾는다.')
|
||||
acrossLines = this.lines.filter(line => {
|
||||
if ((this.getLineDirection(line) === 'l' || this.getLineDirection(line) === 'r')
|
||||
&& (line.x1 < currentLine.x1 || line.x2 < currentLine.x1)) {
|
||||
@ -1337,7 +1488,7 @@ export default class QPolygon extends fabric.Group {
|
||||
acrossLines = this.lines.filter(line => {
|
||||
if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b')
|
||||
&& (line.y1 < currentLine.y1 || line.y2 < currentLine.y1)) {
|
||||
console.log(line)
|
||||
// console.log(line)
|
||||
return line
|
||||
}
|
||||
})
|
||||
@ -1348,7 +1499,7 @@ export default class QPolygon extends fabric.Group {
|
||||
}
|
||||
}
|
||||
if (dVector === 135 || dVector === 225) {
|
||||
console.log('135, 225 : currentLine을 기준으로 아래에서 찾는다.')
|
||||
// console.log('135, 225 : currentLine을 기준으로 아래에서 찾는다.')
|
||||
acrossLines = this.lines.filter(line => {
|
||||
if ((this.getLineDirection(line) === 't' || this.getLineDirection(line) === 'b')
|
||||
&& (currentLine.y1 < line.y1 || currentLine.y1 < line.y2)) {
|
||||
@ -1456,9 +1607,11 @@ export default class QPolygon extends fabric.Group {
|
||||
console.log(missedPoints)
|
||||
|
||||
missedPoints.forEach(p1 => {
|
||||
console.log('p1 : ', p1)
|
||||
let nearX, nearY, diffX, diffY, diffMinX, diffMinY
|
||||
//가장 가까운 포인트를 확인
|
||||
missedPoints.forEach(p2 => {
|
||||
console.log('p2 : ', p2)
|
||||
diffX = Math.abs(p1.x - p2.x)
|
||||
diffY = Math.abs(p1.y - p2.y)
|
||||
if (diffMinX === undefined && diffMinY === undefined && diffX > 0 && diffY > 0) {
|
||||
@ -1466,7 +1619,7 @@ export default class QPolygon extends fabric.Group {
|
||||
diffMinY = diffY
|
||||
}
|
||||
console.log(nearX, nearY, diffX, diffY, diffMinX, diffMinY)
|
||||
if (diffX !== 0 && diffY !== 0 && (diffX === diffY)
|
||||
if (diffX > 0 && diffY > 0 && (diffX === diffY)
|
||||
&& diffX <= diffMinX && diffY <= diffMinY) {
|
||||
nearX = p2.x
|
||||
nearY = p2.y
|
||||
@ -1479,7 +1632,7 @@ export default class QPolygon extends fabric.Group {
|
||||
if (p1.x < nearX && p1.y < nearY) {
|
||||
missedLine.push({ x1: p1.x, y1: p1.y, x2: nearX, y2: nearY })
|
||||
} else if (p1.x > nearX && p1.y < nearY) {
|
||||
missedLine.push({ x1: nearX, y1: p1.y, x2: p1.x, y2: nearY })
|
||||
missedLine.push({ x1: nearX, y1: nearY, x2: p1.x, y2: p1.y })
|
||||
} else if (p1.x > nearX && p1.y > nearY) {
|
||||
missedLine.push({ x1: nearX, y1: nearY, x2: p1.x, y2: p1.y })
|
||||
} else if (p1.x < nearX && p1.y > nearY) {
|
||||
@ -1491,6 +1644,8 @@ export default class QPolygon extends fabric.Group {
|
||||
missedLine = [
|
||||
...new Set(missedLine.map((line) => JSON.stringify(line))),
|
||||
].map((line) => JSON.parse(line))
|
||||
|
||||
console.log('missedLine : ', missedLine)
|
||||
missedLine.forEach((p, index) => {
|
||||
const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
|
||||
fontSize: this.fontSize,
|
||||
@ -1508,14 +1663,14 @@ export default class QPolygon extends fabric.Group {
|
||||
hip의 시작은 처마꼭지점이며 끝은 마루이기 때문에 힙의 끝 좌표와 비교한다.
|
||||
*/
|
||||
findConnectionLineCount(x, y) {
|
||||
console.log(this.hips)
|
||||
// console.log(this.hips)
|
||||
let count = 0
|
||||
this.hips.forEach((hip, index) => {
|
||||
if (x === hip.x2 && y === hip.y2) {
|
||||
count++
|
||||
}
|
||||
})
|
||||
console.log(count)
|
||||
// console.log(count)
|
||||
return count
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,22 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import QRect from '@/components/fabric/QRect'
|
||||
import QPolygon from '@/components/fabric/QPolygon'
|
||||
import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
|
||||
import {
|
||||
findTopTwoIndexesByDistance,
|
||||
getCenterPoint,
|
||||
getDirection,
|
||||
getStartIndex,
|
||||
rearrangeArray,
|
||||
} from '@/util/canvas-util'
|
||||
import { useRecoilState } from 'recoil'
|
||||
|
||||
import { fontSizeState, roofPolygonPatternArrayState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
|
||||
import {
|
||||
fontSizeState,
|
||||
roofPolygonPatternArrayState,
|
||||
roofState,
|
||||
sortedPolygonArray,
|
||||
wallState,
|
||||
} from '@/store/canvasAtom'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
|
||||
export const Mode = {
|
||||
@ -229,7 +241,7 @@ export function useMode() {
|
||||
}
|
||||
|
||||
const editMode = () => {
|
||||
canvas?.on('mouse:down', function (options) {
|
||||
canvas?.on('mouse:down', function(options) {
|
||||
const pointer = canvas?.getPointer(options.e)
|
||||
const circle = new fabric.Circle({
|
||||
radius: 1,
|
||||
@ -380,7 +392,7 @@ export function useMode() {
|
||||
}
|
||||
|
||||
const textboxMode = () => {
|
||||
canvas?.on('mouse:down', function (options) {
|
||||
canvas?.on('mouse:down', function(options) {
|
||||
if (canvas?.getActiveObject()?.type === 'textbox') return
|
||||
const pointer = canvas?.getPointer(options.e)
|
||||
|
||||
@ -395,14 +407,14 @@ export function useMode() {
|
||||
canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다.
|
||||
canvas?.renderAll()
|
||||
// textbox가 active가 풀린 경우 editing mode로 변경
|
||||
textbox?.on('editing:exited', function () {
|
||||
textbox?.on('editing:exited', function() {
|
||||
changeMode(canvas, Mode.EDIT)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const drawLineMode = () => {
|
||||
canvas?.on('mouse:down', function (options) {
|
||||
canvas?.on('mouse:down', function(options) {
|
||||
const pointer = canvas?.getPointer(options.e)
|
||||
|
||||
const line = new QLine(
|
||||
@ -423,7 +435,7 @@ export function useMode() {
|
||||
|
||||
const drawRectMode = () => {
|
||||
let rect, isDown, origX, origY
|
||||
canvas.on('mouse:down', function (o) {
|
||||
canvas.on('mouse:down', function(o) {
|
||||
isDown = true
|
||||
const pointer = canvas.getPointer(o.e)
|
||||
origX = pointer.x
|
||||
@ -443,7 +455,7 @@ export function useMode() {
|
||||
canvas.add(rect)
|
||||
})
|
||||
|
||||
canvas.on('mouse:move', function (o) {
|
||||
canvas.on('mouse:move', function(o) {
|
||||
if (!isDown) return
|
||||
const pointer = canvas.getPointer(o.e)
|
||||
if (origX > pointer.x) {
|
||||
@ -457,7 +469,7 @@ export function useMode() {
|
||||
rect.set({ height: Math.abs(origY - pointer.y) })
|
||||
})
|
||||
|
||||
canvas.on('mouse:up', function (o) {
|
||||
canvas.on('mouse:up', function(o) {
|
||||
const pointer = canvas.getPointer(o.e)
|
||||
const qRect = new QRect({
|
||||
left: origX,
|
||||
@ -556,7 +568,7 @@ export function useMode() {
|
||||
if (!otherLines) {
|
||||
// polygon.fillCell()
|
||||
canvas.renderAll()
|
||||
polygon.setViewLengthText(false)
|
||||
// polygon.setViewLengthText(false)
|
||||
setMode(Mode.DEFAULT)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user