qpolygon test
This commit is contained in:
Jaeyoung Lee
parent
9be2c65b32
commit
f69029ca69
@ -5,8 +5,8 @@ import { Button } from '@nextui-org/react'
|
||||
import QRect from '@/components/fabric/QRect'
|
||||
|
||||
import RangeSlider from './ui/RangeSlider'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { canvasSizeState, fontSizeState, roofState, sortedPolygonArray } from '@/store/canvasAtom'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import { getCanvasState, insertCanvasState } from '@/lib/canvas'
|
||||
import { calculateIntersection } from '@/util/canvas-util'
|
||||
@ -253,14 +253,14 @@ export default function Roof2() {
|
||||
]
|
||||
|
||||
const diagonalType = [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 300, y: 100 },
|
||||
{ x: 100, y: 600 },
|
||||
{ x: 250, y: 600 },
|
||||
{ x: 250, y: 450 },
|
||||
{ x: 400, y: 450 },
|
||||
{ x: 400, y: 600 },
|
||||
// { x: 250, y: 600 },
|
||||
// { x: 250, y: 450 },
|
||||
// { x: 400, y: 450 },
|
||||
// { x: 400, y: 600 },
|
||||
{ x: 600, y: 600 },
|
||||
{ x: 400, y: 100 },
|
||||
{ x: 600, y: 100 },
|
||||
]
|
||||
|
||||
const triangleType = [
|
||||
@ -287,19 +287,19 @@ export default function Roof2() {
|
||||
|
||||
const types = [type1, type2, type3, type4, type1A, type1B, eightPoint, eightPoint2, eightPoint3, eightPoint4, twelvePoint]
|
||||
|
||||
const polygon = new QPolygon(type1B, {
|
||||
const polygon = new QPolygon(diagonalType, {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
stroke: 'green',
|
||||
strokeWidth: 1,
|
||||
selectable: true,
|
||||
fontSize: fontSize,
|
||||
name: 'QPolygon1',
|
||||
})
|
||||
|
||||
canvas?.add(polygon)
|
||||
drawRoofPolygon(polygon)
|
||||
canvas?.add(polygon)
|
||||
drawRoofPolygon(polygon)
|
||||
|
||||
// handleOuterlinesTest2(polygon)
|
||||
// handleOuterlinesTest2(polygon)
|
||||
|
||||
// const lines = togglePolygonLine(polygon)
|
||||
// togglePolygonLine(lines[0])
|
||||
|
||||
@ -1203,21 +1203,11 @@ export function useMode() {
|
||||
|
||||
if (prevWall.direction !== nextWall.direction) {
|
||||
console.log('if ::::')
|
||||
console.log('currentWall.direction : ', currentWall.direction, currentWall.length)
|
||||
if (currentWall.direction === 'top') {
|
||||
console.log('prevWall degree : ', 45)
|
||||
if (prevWall.direction === 'right') {
|
||||
//밑변
|
||||
let a = Math.abs(currentWall.x1 - prevWall.x1)
|
||||
//빗변
|
||||
let c = Math.sqrt(Math.abs(currentWall.x1 - currentWall.x2) ** 2 + Math.abs(currentWall.y1 - currentWall.y2) ** 2)
|
||||
//밑변과 빗변사이의 각도
|
||||
let alphaDegree = 90 - Math.acos(a / c) * (180 / Math.PI)
|
||||
|
||||
console.log(a, c, alphaDegree)
|
||||
|
||||
let addLength = Math.abs(offset * Math.tan(alphaDegree * (Math.PI / 180)))
|
||||
|
||||
console.log(addLength)
|
||||
|
||||
let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
|
||||
expandedPoints.push({
|
||||
x1: currentWall.x1 + offset + addLength,
|
||||
y1: currentWall.y1 + offset,
|
||||
@ -1234,6 +1224,7 @@ export function useMode() {
|
||||
if (currentWall.direction === 'bottom') {
|
||||
if (prevWall.direction === 'right') {
|
||||
console.log('prevWall degree : ', 45)
|
||||
console.log('angle : ', getDegreeBetweenTwoLines(prevWall, currentWall))
|
||||
expandedPoints.push({
|
||||
x1: currentWall.x1 + offset,
|
||||
y1: currentWall.y1 - offset,
|
||||
@ -1241,8 +1232,9 @@ export function useMode() {
|
||||
}
|
||||
if (prevWall.direction === 'left') {
|
||||
console.log('prevWall degree : ', 315)
|
||||
let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
|
||||
expandedPoints.push({
|
||||
x1: currentWall.x1 - offset,
|
||||
x1: currentWall.x1 - offset + addLength,
|
||||
y1: currentWall.y1 - offset,
|
||||
})
|
||||
}
|
||||
@ -1266,14 +1258,17 @@ export function useMode() {
|
||||
if (prevWall.direction === 'bottom') {
|
||||
if (isStartPointIn) {
|
||||
console.log('prevWall degree : ', 45)
|
||||
|
||||
expandedPoints.push({
|
||||
x1: currentWall.x1 + offset,
|
||||
y1: currentWall.y1 - offset,
|
||||
})
|
||||
} else {
|
||||
console.log('prevWall degree : ', 225)
|
||||
let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
|
||||
console.log('addLength : ', addLength)
|
||||
expandedPoints.push({
|
||||
x1: currentWall.x1 - offset,
|
||||
x1: currentWall.x1 - offset - addLength,
|
||||
y1: currentWall.y1 + offset,
|
||||
})
|
||||
}
|
||||
@ -1283,28 +1278,19 @@ export function useMode() {
|
||||
if (prevWall.direction === 'top') {
|
||||
if (isStartPointIn) {
|
||||
console.log('prevWall degree : ', 225)
|
||||
let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
|
||||
console.log('addLength : ', addLength)
|
||||
expandedPoints.push({
|
||||
x1: currentWall.x1 - offset,
|
||||
x1: currentWall.x1 - offset - addLength,
|
||||
y1: currentWall.y1 + offset,
|
||||
})
|
||||
} else {
|
||||
console.log('prevWall degree : ', 45)
|
||||
|
||||
//밑변
|
||||
let a = Math.abs(currentWall.x1 - prevWall.x1)
|
||||
//빗변
|
||||
let c = Math.sqrt(Math.abs(currentWall.x1 - currentWall.x2) ** 2 + Math.abs(currentWall.y1 - currentWall.y2) ** 2)
|
||||
//밑변과 빗변사이의 각도
|
||||
let alphaDegree = 90 - Math.acos(a / c) * (180 / Math.PI)
|
||||
|
||||
console.log(a, c, alphaDegree)
|
||||
|
||||
let addLength = Math.abs(offset * Math.tan(alphaDegree * (Math.PI / 180)))
|
||||
|
||||
console.log(addLength)
|
||||
let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
|
||||
|
||||
expandedPoints.push({
|
||||
x1: currentWall.x1 + offset + addLength,
|
||||
x1: currentWall.x1 + offset - addLength,
|
||||
y1: currentWall.y1 - offset,
|
||||
})
|
||||
}
|
||||
@ -1446,6 +1432,64 @@ export function useMode() {
|
||||
const roof = makePolygon(expandedPoints)
|
||||
roof.setWall(wall)
|
||||
setRoof(roof)
|
||||
|
||||
// roof.drawHelpLine()
|
||||
}
|
||||
|
||||
/**
|
||||
* 구하려는 라인의 x1,y1좌표가 기준
|
||||
* @param line1 이전 라인
|
||||
* @param line2 현재 라인
|
||||
* @param offset
|
||||
* @returns {number}
|
||||
*/
|
||||
const getLineOffsetPoint = (line1, line2, offset) => {
|
||||
if (line1.x1 !== line2.x1 && line1.y1 !== line2.y1) {
|
||||
}
|
||||
//밑변
|
||||
let a = Math.abs(line1.x1 - line2.x1)
|
||||
//빗변
|
||||
let c = Math.sqrt(Math.abs(line1.x1 - line2.x2) ** 2 + Math.abs(line1.y1 - line2.y2) ** 2)
|
||||
//밑변과 빗변사이의 각도
|
||||
let alphaDegree = getDegreeBetweenTwoLines(line1, line2)
|
||||
alphaDegree = alphaDegree <= 90 ? alphaDegree : 180 - alphaDegree
|
||||
alphaDegree = 90 - alphaDegree
|
||||
|
||||
return Math.round(offset * Math.tan(alphaDegree * (Math.PI / 180)))
|
||||
}
|
||||
|
||||
/**
|
||||
* 구하려는 라인의 x1,y1좌표가 기준
|
||||
* @param line1 이전 라인
|
||||
* @param line2 현재 라인
|
||||
* @returns {number}
|
||||
*/
|
||||
const getDegreeBetweenTwoLines = (line1, line2) => {
|
||||
let x1 = line1.x1,
|
||||
x2 = line2.x1,
|
||||
x3 = line2.x2
|
||||
let y1 = line1.y1,
|
||||
y2 = line2.y1,
|
||||
y3 = line2.y2
|
||||
|
||||
// 각 점 사이의 벡터 계산
|
||||
const vector1 = { x: x1 - x2, y: y1 - y2 }
|
||||
const vector2 = { x: x3 - x2, y: y3 - y2 }
|
||||
|
||||
// 벡터의 길이 계산
|
||||
const magnitude1 = Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y)
|
||||
const magnitude2 = Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y)
|
||||
|
||||
// 내적 계산
|
||||
const dotProduct = vector1.x * vector2.x + vector1.y * vector2.y
|
||||
|
||||
// 각도 계산 (라디안에서도 0에서 PI 라디안 사이의 각도로 변환)
|
||||
let angle = Math.acos(dotProduct / (magnitude1 * magnitude2))
|
||||
|
||||
// 라디안에서 도 단위로 변환
|
||||
angle = angle * (180 / Math.PI)
|
||||
|
||||
return angle
|
||||
}
|
||||
|
||||
const calculateParallelPoint = (x1, y1, x2, y2, distance) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { fabric } from 'fabric'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import { distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
|
||||
import { distanceBetweenPoints, findClosestPoint, getRoofHypotenuse } from '@/util/canvas-util'
|
||||
|
||||
export const defineQPloygon = () => {
|
||||
fabric.QPolygon = fabric.util.createClass(fabric.Group, {})
|
||||
@ -382,6 +382,10 @@ const calculateTriangleArea = (point1, point2, point3) => {
|
||||
return Math.abs(x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2
|
||||
}
|
||||
|
||||
export const drawHippedRoof = (polygon, chon) => {
|
||||
drawRoofRidge(polygon)
|
||||
drawHips(polygon)
|
||||
}
|
||||
/*마루 그리기
|
||||
외벽의 모양이 돌출된 ㄷ의 형태일때
|
||||
현재 라인의 외벽길이가 붙어있는 두외벽의 길이보다 짧거나 같다면
|
||||
@ -496,12 +500,12 @@ const drawHips = (polygon) => {
|
||||
/*
|
||||
마루에서 시작되는 hip을 먼저 그립니다.
|
||||
*/
|
||||
this.ridges.forEach((ridge) => {
|
||||
polygon.ridges.forEach((ridge) => {
|
||||
let leftTop, rightTop, leftBottom, rightBottom
|
||||
if (ridge.x1 !== ridge.x2 && ridge.y1 === ridge.y2) {
|
||||
// console.log('가로방향 마루')
|
||||
//왼쪽 좌표 기준 225, 315도 방향 라인확인
|
||||
leftTop = this.lines
|
||||
leftTop = polygon.lines
|
||||
.filter((line) => line.x1 < ridge.x1 && line.y1 < ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
|
||||
.reduce((prev, current) => {
|
||||
if (prev <= 0) {
|
||||
@ -511,7 +515,7 @@ const drawHips = (polygon) => {
|
||||
}
|
||||
}, [])
|
||||
|
||||
leftBottom = this.lines
|
||||
leftBottom = polygon.lines
|
||||
.filter((line) => line.x1 < ridge.x1 && line.y1 > ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
|
||||
.reduce((prev, current) => {
|
||||
if (prev <= 0) {
|
||||
@ -522,7 +526,7 @@ const drawHips = (polygon) => {
|
||||
}, [])
|
||||
|
||||
//오른쪽 좌표 기준 45, 135도 방향 라인확인
|
||||
rightTop = this.lines
|
||||
rightTop = polygon.lines
|
||||
.filter((line) => line.x1 > ridge.x2 && line.y1 < ridge.y2 && Math.abs(line.x1 - ridge.x2) === Math.abs(line.y1 - ridge.y2))
|
||||
.reduce((prev, current) => {
|
||||
if (prev <= 0) {
|
||||
@ -532,7 +536,7 @@ const drawHips = (polygon) => {
|
||||
}
|
||||
}, [])
|
||||
|
||||
rightBottom = this.lines
|
||||
rightBottom = polygon.lines
|
||||
.filter((line) => line.x1 > ridge.x2 && line.y1 > ridge.y2 && Math.abs(line.x1 - ridge.x2) === Math.abs(line.y1 - ridge.y2))
|
||||
.reduce((prev, current) => {
|
||||
if (prev <= 0) {
|
||||
@ -544,7 +548,7 @@ const drawHips = (polygon) => {
|
||||
|
||||
if (leftTop.length > 0) {
|
||||
const hip = new QLine([leftTop.x1, leftTop.y1, ridge.x1, ridge.y1], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
@ -554,31 +558,31 @@ const drawHips = (polygon) => {
|
||||
}
|
||||
if (leftBottom.length > 0) {
|
||||
const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x1, ridge.y1], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
polygon.canvas.add(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
}
|
||||
if (rightTop.length > 0) {
|
||||
const hip = new QLine([rightTop.x1, rightTop.y1, ridge.x2, ridge.y2], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
polygon.canvas.add(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
}
|
||||
if (rightBottom.length > 0) {
|
||||
const hip = new QLine([rightBottom.x1, rightBottom.y1, ridge.x2, ridge.y2], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
polygon.canvas.add(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
}
|
||||
@ -586,7 +590,7 @@ const drawHips = (polygon) => {
|
||||
if (ridge.y1 !== ridge.y2 && ridge.x1 === ridge.x2) {
|
||||
// console.log('세로방향 마루')
|
||||
//위쪽 좌표 기준 45, 315도 방향 라인확인
|
||||
leftTop = this.lines
|
||||
leftTop = polygon.lines
|
||||
.filter((line) => line.x1 < ridge.x1 && line.y1 < ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
|
||||
.reduce((prev, current) => {
|
||||
if (prev <= 0) {
|
||||
@ -596,7 +600,7 @@ const drawHips = (polygon) => {
|
||||
}
|
||||
}, [])
|
||||
|
||||
rightTop = this.lines
|
||||
rightTop = polygon.lines
|
||||
.filter((line) => line.x1 > ridge.x1 && line.y1 < ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
|
||||
.reduce((prev, current) => {
|
||||
if (prev <= 0) {
|
||||
@ -607,7 +611,7 @@ const drawHips = (polygon) => {
|
||||
}, [])
|
||||
|
||||
//아래쪽 좌표 기준 135, 225도 방향 라인확인
|
||||
leftBottom = this.lines
|
||||
leftBottom = polygon.lines
|
||||
.filter((line) => line.x1 < ridge.x2 && line.y1 > ridge.y2 && Math.abs(line.x1 - ridge.x2) === Math.abs(line.y1 - ridge.y2))
|
||||
.reduce((prev, current) => {
|
||||
if (prev <= 0) {
|
||||
@ -617,7 +621,7 @@ const drawHips = (polygon) => {
|
||||
}
|
||||
}, [])
|
||||
|
||||
rightBottom = this.lines
|
||||
rightBottom = polygon.lines
|
||||
.filter((line) => line.x1 > ridge.x2 && line.y1 > ridge.y2 && Math.abs(line.x1 - ridge.x2) === Math.abs(line.y1 - ridge.y2))
|
||||
.reduce((prev, current) => {
|
||||
if (prev.length <= 0) {
|
||||
@ -629,13 +633,13 @@ const drawHips = (polygon) => {
|
||||
|
||||
if (leftTop.length > 0) {
|
||||
const hip = new QLine([leftTop.x1, leftTop.y1, ridge.x1, ridge.y1], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
polygon.canvas.add(hip)
|
||||
polygon.hips.push(hip)
|
||||
polygon.innerLines.push(hip)
|
||||
}
|
||||
if (rightTop.length > 0) {
|
||||
const hip = new QLine([rightTop.x1, rightTop.y1, ridge.x1, ridge.y1], {
|
||||
@ -643,58 +647,58 @@ const drawHips = (polygon) => {
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
polygon.canvas.add(hip)
|
||||
polygon.hips.push(hip)
|
||||
polygon.innerLines.push(hip)
|
||||
}
|
||||
if (leftBottom.length > 0) {
|
||||
const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x2, ridge.y2], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
polygon.canvas.add(hip)
|
||||
polygon.hips.push(hip)
|
||||
polygon.innerLines.push(hip)
|
||||
}
|
||||
if (rightBottom.length > 0) {
|
||||
const hip = new QLine([rightBottom.x1, rightBottom.y1, ridge.x2, ridge.y2], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
polygon.canvas.add(hip)
|
||||
polygon.hips.push(hip)
|
||||
polygon.innerLines.push(hip)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 가장 가까운 마루를 확인하여 그릴 수 있는 라인이 존재하면 먼저 그린다.
|
||||
let prevLine, currentLine, nextLine
|
||||
this.lines.forEach((value, index) => {
|
||||
polygon.lines.forEach((value, index) => {
|
||||
if (index === 0) {
|
||||
prevLine = this.lines[this.lines.length - 1]
|
||||
prevLine = polygon.lines[polygon.lines.length - 1]
|
||||
} else {
|
||||
prevLine = this.lines[index - 1]
|
||||
prevLine = polygon.lines[index - 1]
|
||||
}
|
||||
currentLine = this.lines[index]
|
||||
currentLine = polygon.lines[index]
|
||||
|
||||
if (index === this.lines.length - 1) {
|
||||
nextLine = this.lines[0]
|
||||
} else if (index === this.lines.length) {
|
||||
nextLine = this.lines[1]
|
||||
if (index === polygon.lines.length - 1) {
|
||||
nextLine = polygon.lines[0]
|
||||
} else if (index === polygon.lines.length) {
|
||||
nextLine = polygon.lines[1]
|
||||
} else {
|
||||
nextLine = this.lines[index + 1]
|
||||
nextLine = polygon.lines[index + 1]
|
||||
}
|
||||
|
||||
if (!this.isAlreadyHip(currentLine)) {
|
||||
let dVector = this.getDirectionForDegree(prevLine, currentLine)
|
||||
if (!isAlreadyHip(polygon, currentLine)) {
|
||||
let dVector = getDirectionForDegree(prevLine, currentLine)
|
||||
let nearRidge
|
||||
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
nearRidge = this.ridges
|
||||
nearRidge = polygon.ridges
|
||||
.filter(
|
||||
(ridge) =>
|
||||
(currentLine.x1 < ridge.x1 && currentLine.y1 > ridge.y1) ||
|
||||
@ -724,7 +728,7 @@ const drawHips = (polygon) => {
|
||||
}, undefined)
|
||||
break
|
||||
case 135:
|
||||
nearRidge = this.ridges
|
||||
nearRidge = polygon.ridges
|
||||
.filter(
|
||||
(ridge) =>
|
||||
((currentLine.x1 < ridge.x1 && currentLine.y1 < ridge.y1) || (currentLine.x1 < ridge.x2 && currentLine.y1 < ridge.y2)) &&
|
||||
@ -752,7 +756,7 @@ const drawHips = (polygon) => {
|
||||
}, undefined)
|
||||
break
|
||||
case 225:
|
||||
nearRidge = this.ridges
|
||||
nearRidge = polygon.ridges
|
||||
.filter(
|
||||
(ridge) =>
|
||||
((currentLine.x1 > ridge.x1 && currentLine.y1 < ridge.y1) || (currentLine.x1 > ridge.x2 && currentLine.y1 < ridge.y2)) &&
|
||||
@ -780,7 +784,7 @@ const drawHips = (polygon) => {
|
||||
}, undefined)
|
||||
break
|
||||
case 315:
|
||||
nearRidge = this.ridges
|
||||
nearRidge = polygon.ridges
|
||||
.filter(
|
||||
(ridge) =>
|
||||
((currentLine.x1 > ridge.x1 && currentLine.y1 > ridge.y1) || (currentLine.x1 > ridge.x2 && currentLine.y1 > ridge.y2)) &&
|
||||
@ -929,21 +933,21 @@ const drawHips = (polygon) => {
|
||||
{ x: maxX, y: minY },
|
||||
]
|
||||
|
||||
let innerPoint = this.lines.filter((line) => {
|
||||
if (this.getPointInPolygon(lineCoordinate, { x: line.x1, y: line.y1 })) {
|
||||
let innerPoint = polygon.lines.filter((line) => {
|
||||
if (getPointInPolygon(lineCoordinate, { x: line.x1, y: line.y1 })) {
|
||||
return line
|
||||
}
|
||||
})
|
||||
|
||||
if (innerPoint <= 0) {
|
||||
const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
polygon.canvas.add(hip)
|
||||
polygon.hips.push(hip)
|
||||
polygon.innerLines.push(hip)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -951,26 +955,26 @@ const drawHips = (polygon) => {
|
||||
|
||||
// 마루와 연결되지 않은 hip을 그린다.
|
||||
console.log('마루와 연결되지 않은 hip')
|
||||
this.lines.forEach((line, index) => {
|
||||
if (!this.isAlreadyHip(line)) {
|
||||
polygon.lines.forEach((line, index) => {
|
||||
if (!isAlreadyHip(polygon, line)) {
|
||||
let prevLine, currentLine, nextLine
|
||||
if (index === 0) {
|
||||
prevLine = this.lines[this.lines.length - 1]
|
||||
prevLine = polygon.lines[polygon.lines.length - 1]
|
||||
} else {
|
||||
prevLine = this.lines[index - 1]
|
||||
prevLine = polygon.lines[index - 1]
|
||||
}
|
||||
currentLine = this.lines[index]
|
||||
currentLine = polygon.lines[index]
|
||||
|
||||
if (index === this.lines.length - 1) {
|
||||
nextLine = this.lines[0]
|
||||
} else if (index === this.lines.length) {
|
||||
nextLine = this.lines[1]
|
||||
if (index === polygon.lines.length - 1) {
|
||||
nextLine = polygon.lines[0]
|
||||
} else if (index === polygon.lines.length) {
|
||||
nextLine = polygon.lines[1]
|
||||
} else {
|
||||
nextLine = this.lines[index + 1]
|
||||
nextLine = polygon.lines[index + 1]
|
||||
}
|
||||
|
||||
let endXPoint, endYPoint
|
||||
let dVector = this.getDirectionForDegree(prevLine, currentLine)
|
||||
let dVector = getDirectionForDegree(prevLine, currentLine)
|
||||
|
||||
let minX = Math.min(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
|
||||
let maxX = Math.max(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
|
||||
@ -984,10 +988,12 @@ const drawHips = (polygon) => {
|
||||
{ x: maxX, y: minY },
|
||||
]
|
||||
|
||||
let acrossLine = getAcrossLine(currentLine, dVector)
|
||||
let acrossLine = getAcrossLine(polygon, currentLine, dVector)
|
||||
let hypotenuse, adjacent
|
||||
|
||||
if (this.getLineDirection(prevLine) === this.getLineDirection(nextLine)) {
|
||||
console.log(acrossLine)
|
||||
|
||||
if (getLineDirection(prevLine) === getLineDirection(nextLine)) {
|
||||
hypotenuse = Math.round(getRoofHypotenuse(Math.abs(currentLine.x1 - acrossLine.x1) / 2))
|
||||
} else {
|
||||
hypotenuse = Math.min(
|
||||
@ -1018,13 +1024,13 @@ const drawHips = (polygon) => {
|
||||
}
|
||||
|
||||
const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], {
|
||||
fontSize: this.fontSize,
|
||||
fontSize: polygon.fontSize,
|
||||
stroke: 'red',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(hip)
|
||||
this.hips.push(hip)
|
||||
this.innerLines.push(hip)
|
||||
polygon.canvas.add(hip)
|
||||
polygon.hips.push(hip)
|
||||
polygon.innerLines.push(hip)
|
||||
}
|
||||
})
|
||||
// this.canvas.renderAll()
|
||||
@ -1100,6 +1106,12 @@ const getRoofBaseLine = (polygon, prevLine, currentLine, nextLine, dVector) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
minLineLength: 0,
|
||||
currentLineLength: currentLine.length,
|
||||
maxLineLength: 0,
|
||||
}
|
||||
}
|
||||
|
||||
const getPointInPolygon = (polygon, point) => {
|
||||
@ -1117,16 +1129,17 @@ const getPointInPolygon = (polygon, point) => {
|
||||
|
||||
/**
|
||||
* 라인과 마주하는 다른 라인과의 가장 가까운 거리를 구한다.
|
||||
* @param polygon
|
||||
* @param currentLine 현재 라인
|
||||
* @param dVector 현재 라인의 방향
|
||||
* @returns {*[]|null}
|
||||
*/
|
||||
const getAcrossLine = (currentLine, dVector) => {
|
||||
const getAcrossLine = (polygon, currentLine, dVector) => {
|
||||
let acrossLine
|
||||
|
||||
switch (dVector) {
|
||||
case 45:
|
||||
acrossLine = this.lines
|
||||
acrossLine = polygon.lines
|
||||
.filter((line) => line.x1 > currentLine.x1 && line.y1 <= currentLine.y1)
|
||||
.reduce((prev, current) => {
|
||||
if (prev.length > 0) {
|
||||
@ -1137,7 +1150,7 @@ const getAcrossLine = (currentLine, dVector) => {
|
||||
}, [])
|
||||
break
|
||||
case 135:
|
||||
acrossLine = this.lines
|
||||
acrossLine = polygon.lines
|
||||
.filter((line) => line.x1 > currentLine.x1 && line.y1 >= currentLine.y1)
|
||||
.reduce((prev, current) => {
|
||||
if (prev.length > 0) {
|
||||
@ -1148,7 +1161,7 @@ const getAcrossLine = (currentLine, dVector) => {
|
||||
}, [])
|
||||
break
|
||||
case 225:
|
||||
acrossLine = this.lines
|
||||
acrossLine = polygon.lines
|
||||
.filter((line) => line.x1 < currentLine.x1 && line.y1 >= currentLine.y1)
|
||||
.reduce((prev, current) => {
|
||||
if (prev.length > 0) {
|
||||
@ -1159,7 +1172,7 @@ const getAcrossLine = (currentLine, dVector) => {
|
||||
}, [])
|
||||
break
|
||||
case 315:
|
||||
acrossLine = this.lines
|
||||
acrossLine = polygon.lines
|
||||
.filter((line) => line.x1 < currentLine.x1 && line.y1 <= currentLine.y1)
|
||||
.reduce((prev, current) => {
|
||||
if (prev.length > 0) {
|
||||
@ -1176,9 +1189,9 @@ const getAcrossLine = (currentLine, dVector) => {
|
||||
/*
|
||||
추녀마루(hip) 중복방지를 위해 마루와 함께 그려진 추녀마루를 확인한다
|
||||
*/
|
||||
const isAlreadyHip = (line) => {
|
||||
const isAlreadyHip = (polygon, line) => {
|
||||
let isAlreadyHip = false
|
||||
this.hips.forEach((hip) => {
|
||||
polygon.hips.forEach((hip) => {
|
||||
if (line.x1 === hip.x1 && line.y1 === hip.y1) {
|
||||
isAlreadyHip = true
|
||||
}
|
||||
@ -1190,7 +1203,7 @@ const isAlreadyHip = (line) => {
|
||||
3개 이상 이어지지 않은 라인 포인트 계산
|
||||
모임지붕에서 point는 3개 이상의 라인과 접해야 함.
|
||||
*/
|
||||
const connectLinePoint = () => {
|
||||
const connectLinePoint = (polygon) => {
|
||||
// 연결되지 않은 모든 라인의 포인트를 구한다.
|
||||
let missedPoints = []
|
||||
//마루
|
||||
@ -1256,7 +1269,7 @@ const connectLinePoint = () => {
|
||||
stroke: 'green',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(line)
|
||||
polygon.canvas.add(line)
|
||||
this.innerLines.push(line)
|
||||
})
|
||||
|
||||
@ -1318,7 +1331,7 @@ const connectLinePoint = () => {
|
||||
stroke: 'purple',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
this.addWithUpdate(line)
|
||||
polygon.canvas.add(line)
|
||||
this.innerLines.push(line)
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user