다각형 모임지붕 계산 중
This commit is contained in:
Jaeyoung Lee
parent
7e1c8c6710
commit
6e81cd4ffd
@ -10,7 +10,6 @@ import { QLine } from '@/components/fabric/QLine'
|
||||
import { getCanvasState, insertCanvasState } from '@/lib/canvas'
|
||||
import { calculateIntersection } from '@/util/canvas-util'
|
||||
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||
import offsetPolygon from '@/util/qpolygon-utils'
|
||||
|
||||
export default function Roof2() {
|
||||
const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
|
||||
@ -276,7 +275,7 @@ export default function Roof2() {
|
||||
{ x: 450, y: 850 },
|
||||
]
|
||||
|
||||
const polygon = new QPolygon(eightPoint3, {
|
||||
const polygon = new QPolygon(type1, {
|
||||
fill: 'transparent',
|
||||
stroke: 'green',
|
||||
strokeWidth: 1,
|
||||
|
||||
@ -2,7 +2,7 @@ import { fabric } from 'fabric'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
|
||||
import { calculateAngle, dividePolygon, drawHelpLineInHexagon,drawHippedRoof } from '@/util/qpolygon-utils'
|
||||
import { calculateAngle, drawHippedRoof } from '@/util/qpolygon-utils'
|
||||
|
||||
export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
type: 'QPolygon',
|
||||
@ -356,6 +356,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
})
|
||||
},
|
||||
divideLine() {
|
||||
dividePolygon(this)
|
||||
//dividePolygon(this)
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
import { fabric } from 'fabric'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDirectionByPoint, getAdjacent, getRoofHypotenuse } from '@/util/canvas-util'
|
||||
import {
|
||||
calculateIntersection,
|
||||
distanceBetweenPoints,
|
||||
findClosestPoint,
|
||||
getAdjacent,
|
||||
getDirectionByPoint,
|
||||
getRoofHypotenuse,
|
||||
} from '@/util/canvas-util'
|
||||
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||
|
||||
const TWO_PI = Math.PI * 2
|
||||
@ -957,7 +964,7 @@ export default function offsetPolygon(vertices, offset) {
|
||||
|
||||
export const drawHippedRoof = (polygon, chon) => {
|
||||
drawRoofRidge(polygon)
|
||||
// drawHips(polygon)
|
||||
drawHips(polygon)
|
||||
// connectLinePoint(polygon)
|
||||
}
|
||||
/*마루 그리기
|
||||
@ -1081,14 +1088,20 @@ const drawRoofRidge = (polygon) => {
|
||||
|
||||
let ridgeLengthToWall, ridgeBaseLength, ridgeLengthToAcrossLine, ridgeMaxLength
|
||||
|
||||
console.log('currentWall : ', currentWall.length)
|
||||
console.log('innerPointLine : ', innerPointLine)
|
||||
if (innerPointLine !== undefined) {
|
||||
if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
|
||||
console.log('currentWall : ', currentWall)
|
||||
console.log('acrossLine : ', acrossLine)
|
||||
if (innerPointLine.y1 === innerPointLine.y2) {
|
||||
ridgeBaseLength =
|
||||
Math.abs(currentWall.y1 - innerPointLine.y1) < Math.abs(currentWall.y1 - innerPointLine.y2)
|
||||
? Math.abs(currentWall.y1 - innerPointLine.y1)
|
||||
: Math.abs(currentWall.y1 - innerPointLine.y2)
|
||||
console.log('innerPointLine : ', innerPointLine)
|
||||
ridgeBaseLength = Math.abs(currentWall.y1 - innerPointLine.y1)
|
||||
ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength
|
||||
ridgeLengthToWall = Math.min(
|
||||
Math.max(Math.abs(currentWall.x1 - innerPointLine.x1), Math.abs(currentWall.x1 - innerPointLine.x2)),
|
||||
ridgeLengthToWall,
|
||||
)
|
||||
ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1)
|
||||
ridgeMaxLength = Math.max(
|
||||
prevWall.length,
|
||||
@ -1105,6 +1118,16 @@ const drawRoofRidge = (polygon) => {
|
||||
ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1)
|
||||
ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1))
|
||||
}
|
||||
console.log(
|
||||
'ridgeBaseLength : ',
|
||||
ridgeBaseLength,
|
||||
' ridgeLengthToWall : ',
|
||||
ridgeLengthToWall,
|
||||
' ridgeLengthToAcrossLine : ',
|
||||
ridgeLengthToAcrossLine,
|
||||
'ridgeMaxLength : ',
|
||||
ridgeMaxLength,
|
||||
)
|
||||
if (ridgeBaseLength > 0) {
|
||||
if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
|
||||
if (nextWall.direction === 'right') {
|
||||
@ -1121,7 +1144,7 @@ const drawRoofRidge = (polygon) => {
|
||||
endXPoint = acrossLine.x1 - ridgeBaseLength / 2
|
||||
}
|
||||
if (nextWall.direction === 'left') {
|
||||
startXPoint = currentWall.x1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2
|
||||
startXPoint = acrossLine.x1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2
|
||||
endXPoint = startXPoint - ridgeLengthToAcrossLine
|
||||
}
|
||||
}
|
||||
@ -1136,10 +1159,15 @@ const drawRoofRidge = (polygon) => {
|
||||
}
|
||||
}
|
||||
if (currentWall.direction === 'right' || currentWall.direction === 'left') {
|
||||
console.log('currentWall.length : ', currentWall.length)
|
||||
if (innerPointLine.x1 === innerPointLine.x2) {
|
||||
ridgeBaseLength = Math.abs(currentWall.x1 - innerPointLine.x1)
|
||||
ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength
|
||||
ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1)
|
||||
ridgeLengthToWall = Math.min(
|
||||
Math.max(Math.abs(currentWall.y1 - innerPointLine.y1), Math.abs(currentWall.y1 - innerPointLine.y2)),
|
||||
ridgeLengthToWall,
|
||||
)
|
||||
ridgeMaxLength = Math.max(
|
||||
prevWall.length,
|
||||
nextWall.length,
|
||||
@ -1155,6 +1183,14 @@ const drawRoofRidge = (polygon) => {
|
||||
ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1)
|
||||
ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.y1 - acrossLine.y1))
|
||||
}
|
||||
console.log(
|
||||
'ridgeBaseLength : ',
|
||||
ridgeBaseLength,
|
||||
' ridgeLengthToWall : ',
|
||||
ridgeLengthToWall,
|
||||
' ridgeLengthToAcrossLine : ',
|
||||
ridgeLengthToAcrossLine,
|
||||
)
|
||||
if (ridgeBaseLength > 0) {
|
||||
if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
|
||||
if (nextWall.direction === 'top') {
|
||||
@ -1250,6 +1286,7 @@ const drawRoofRidge = (polygon) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(startXPoint, startYPoint, endXPoint, endYPoint)
|
||||
if (
|
||||
// polygon.ridges.length < getMaxRidge(lines.length) &&
|
||||
ridgeBaseLength <= ridgeMaxLength &&
|
||||
@ -1274,6 +1311,7 @@ const drawRoofRidge = (polygon) => {
|
||||
})
|
||||
//중복 제거
|
||||
polygon.ridges = polygon.ridges.filter((ridge, index, self) => index === self.findIndex((t) => t.x1 === ridge.x1 && t.y1 === ridge.y1))
|
||||
console.log('polygon.ridges', polygon.ridges)
|
||||
}
|
||||
const drawHips = (polygon) => {
|
||||
/*
|
||||
@ -1786,6 +1824,8 @@ const drawHips = (polygon) => {
|
||||
|
||||
adjacent = getAdjacent(hypotenuse)
|
||||
|
||||
console.log('dVector : ', dVector)
|
||||
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
endXPoint = currentLine.x1 + adjacent
|
||||
@ -1818,86 +1858,6 @@ const drawHips = (polygon) => {
|
||||
// this.canvas.renderAll()
|
||||
}
|
||||
|
||||
const getRoofBaseLine = (polygon, prevLine, currentLine, nextLine, dVector) => {
|
||||
let minX = Math.min(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
|
||||
let maxX = Math.max(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
|
||||
let minY = Math.min(currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2)
|
||||
let maxY = Math.max(currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2)
|
||||
|
||||
let lineCoordinate = [
|
||||
{ x: minX, y: minY },
|
||||
{ x: minX, y: maxY },
|
||||
{ x: maxX, y: maxY },
|
||||
{ x: maxX, y: minY },
|
||||
]
|
||||
|
||||
let innerPointLine = polygon.lines.filter((line) => {
|
||||
if (getPointInPolygon(lineCoordinate, { x: line.x1, y: line.y1 })) {
|
||||
return line
|
||||
}
|
||||
})
|
||||
|
||||
let coordinateLength
|
||||
let innerPointX
|
||||
|
||||
console.log('innerPointLine : ', innerPointLine)
|
||||
|
||||
if (innerPointLine.length > 0) {
|
||||
innerPointX = innerPointLine.reduce((a, b) => {
|
||||
return a.x1 < b.x1 ? a : b
|
||||
})
|
||||
}
|
||||
|
||||
if (dVector === 45 || dVector === 225) {
|
||||
if (innerPointX !== undefined) {
|
||||
coordinateLength = Math.abs(currentLine.y1 - innerPointX.y1)
|
||||
} else {
|
||||
coordinateLength = Math.abs(lineCoordinate[0].y - lineCoordinate[2].y)
|
||||
}
|
||||
//계산된 좌표길이가 마루를 작성 할 최소 기준에 미치지 못하면 그릴수 없다.
|
||||
if (coordinateLength < currentLine.length) {
|
||||
return {
|
||||
minLineLength: coordinateLength,
|
||||
currentLineLength: currentLine.length,
|
||||
maxLineLength: coordinateLength,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
minLineLength: Math.min(prevLine.length, nextLine.length),
|
||||
currentLineLength: currentLine.length,
|
||||
maxLineLength: coordinateLength,
|
||||
}
|
||||
}
|
||||
}
|
||||
if (dVector === 135 || dVector === 315) {
|
||||
if (innerPointX !== undefined) {
|
||||
coordinateLength = Math.abs(currentLine.x1 - innerPointX.x1)
|
||||
} else {
|
||||
coordinateLength = Math.abs(lineCoordinate[0].x - lineCoordinate[2].x)
|
||||
}
|
||||
//계산된 좌표길이가 마루를 작성 할 최소 기준에 미치지 못하면 그릴수 없다.
|
||||
if (coordinateLength < currentLine.length) {
|
||||
return {
|
||||
minLineLength: coordinateLength,
|
||||
currentLineLength: currentLine.length,
|
||||
maxLineLength: coordinateLength,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
minLineLength: Math.min(prevLine.length, nextLine.length),
|
||||
currentLineLength: currentLine.length,
|
||||
maxLineLength: coordinateLength,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
minLineLength: 0,
|
||||
currentLineLength: currentLine.length,
|
||||
maxLineLength: 0,
|
||||
}
|
||||
}
|
||||
|
||||
const getPointInPolygon = (polygon, point) => {
|
||||
let inside = false
|
||||
let minX = Math.min(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x),
|
||||
@ -1999,18 +1959,32 @@ const connectLinePoint = (polygon) => {
|
||||
missedPoints.push({ x: ridge.x2, y: ridge.y2 })
|
||||
}
|
||||
})
|
||||
|
||||
console.log('missedPoints : ', missedPoints)
|
||||
console.log(
|
||||
polygon.hips.filter((hip) => {
|
||||
let count = 0
|
||||
count += polygon.ridges.filter((ridge) => (ridge.x1 === hip.x2 && ridge.y1 === hip.y2) || (ridge.x2 === hip.x2 && ridge.y2 === hip.y2)).length
|
||||
|
||||
count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length
|
||||
if (count < 3) {
|
||||
return hip
|
||||
}
|
||||
}),
|
||||
)
|
||||
//추녀마루
|
||||
polygon.hips.forEach((hip) => {
|
||||
let count = 0
|
||||
count += polygon.ridges.filter((ridge) => (ridge.x1 === hip.x2 && ridge.y1 === hip.y2) || (ridge.x2 === hip.x2 && ridge.y2 === hip.y2)).length
|
||||
count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length
|
||||
|
||||
count += polygon.hips.filter((hip2) => (hip2.x1 === hip.x2 && hip2.y1 === hip.y2) || (hip2.x2 === hip.x2 && hip2.y2 === hip.y2)).length
|
||||
if (count < 3) {
|
||||
missedPoints.push({ x: hip.x2, y: hip.y2 })
|
||||
}
|
||||
})
|
||||
|
||||
let missedLine = []
|
||||
console.log('missedPoints : ', missedPoints)
|
||||
|
||||
//중복포인트제거
|
||||
missedPoints = [...new Set(missedPoints.map((line) => JSON.stringify(line)))].map((line) => JSON.parse(line))
|
||||
@ -2050,14 +2024,14 @@ const connectLinePoint = (polygon) => {
|
||||
missedLine.forEach((p, index) => {
|
||||
const line = new QLine([p.x1, p.y1, p.x2, p.y2], {
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'green',
|
||||
stroke: 'purple',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
polygon.canvas.add(line)
|
||||
polygon.innerLines.push(line)
|
||||
})
|
||||
|
||||
missedPoints = []
|
||||
/*missedPoints = []
|
||||
missedLine = []
|
||||
|
||||
polygon.innerLines.forEach((line, index) => {
|
||||
@ -2117,7 +2091,7 @@ const connectLinePoint = (polygon) => {
|
||||
})
|
||||
polygon.canvas.add(line)
|
||||
polygon.innerLines.push(line)
|
||||
})
|
||||
})*/
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user