qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

팔작지붕 추가.

Browse Source
This commit is contained in:
Jaeyoung Lee 2024-09-11 16:42:30 +09:00
parent d7dfbf59c7
commit bf2f642368
3 changed files with 276 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Roof2.jsx
View File

@ -634,7 +634,7 @@ export default function Roof2(props) {
const polygon = canvas?.getObjects()
console.log('gable roof offset : ', offset)
console.log('polygon : ', polygon)
changeAllGableRoof(polygon, canvas)
changeAllGableRoof(polygon, offset, canvas)
} else {
alert('offset 은 0 보다 커야 함')
}

4
src/components/fabric/QLine.js
View File

@ -1,6 +1,6 @@
import { fabric } from 'fabric'
import { v4 as uuidv4 } from 'uuid'
import { getDirection, getDirectionByPoint } from '@/util/canvas-util'
import { getDirectionByPoint } from '@/util/canvas-util'
export const QLine = fabric.util.createClass(fabric.Line, {
type: 'QLine',
@ -52,6 +52,8 @@ export const QLine = fabric.util.createClass(fabric.Line, {
})
this.on('modified', (e) => {
this.startPoint = { x: this.x1, y: this.y1 }
this.endPoint = { x: this.x2, y: this.y2 }
this.addLengthText()
})

288
src/util/qpolygon-utils.js
View File

@ -967,6 +967,11 @@ export const splitPolygonWithLines = (polygon) => {
const roofs = []
const allLines = [...polygon.innerLines]
allLines.forEach((line) => {
line.startPoint = { x: line.x1, y: line.y1 }
line.endPoint = { x: line.x2, y: line.y2 }
})
// allLines에 x1,y1,x2,y2를 비교해서 중복되는 값을 제거한다.
allLines.forEach((line, index) => {
const startPoint = line.startPoint
@ -2674,20 +2679,17 @@ const getLineDirection = (line) => {
}
}
export const changeAllGableRoof = (polygon, canvas) => {
const walls = polygon.find((p) => p.name === 'wall').lines // 외벽의 라인
export const changeAllGableRoof = (polygon, offset, canvas) => {
const roof = polygon.filter((p) => p.name === 'roofBase')[0] // 지붕
const roofLines = roof.lines // 지붕의 라인
const ridges = roof.ridges // 마루의 라인
const hips = roof.hips // 추녀마루의 라인
ridges.forEach((ridge) => {
console.log('ridge : ', ridge)
console.log(ridge.direction)
let ridgeHip1 = hips.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1)
let ridgeHip2 = hips.filter((hip) => hip.x2 === ridge.x2 && hip.y2 === ridge.y2)
let gableLines = []
if (ridgeHip1.length > 1) {
console.log('ridgeHip1 : ')
let x1 = ridgeHip1[0].x1,
y1 = ridgeHip1[0].y1,
x2 = ridgeHip1[1].x1,
@ -2697,13 +2699,11 @@ export const changeAllGableRoof = (polygon, canvas) => {
(roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
(roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
) {
roofLine.stroke = 'blue'
canvas?.renderAll()
gableLines.push(setGableRoof(polygon, ridge, ridgeHip1[0], ridgeHip1[1], offset, canvas))
}
})
}
if (ridgeHip2.length > 1) {
console.log('ridgeHip2 : ')
let x1 = ridgeHip2[0].x1,
y1 = ridgeHip2[0].y1,
x2 = ridgeHip2[1].x1,
@ -2713,12 +2713,274 @@ export const changeAllGableRoof = (polygon, canvas) => {
(roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
(roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
) {
roofLine.stroke = 'blue'
gableLines.push(setGableRoof(polygon, ridge, ridgeHip2[0], ridgeHip2[1], offset, canvas))
}
})
}
gableLines.forEach((gableLine) => {
roof.innerLines.push(gableLine)
})
})
// splitPolygonWithLines(roof)
}
const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
let x1 = hip1.x1,
y1 = hip1.y1
let gableLine, diffOffset
if (ridge.direction === 'top') {
if (ridge.y1 > y1 && ridge.y2 > y1) {
offset = Math.abs(ridge.y1 - y1) - offset
ridge.set({
x1: ridge.x1,
y1: ridge.y1,
x2: ridge.x2,
y2: ridge.y2 + offset,
})
gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'gableLine',
})
canvas?.add(gableLine)
hip1.set({
x1: hip1.x1,
y1: hip1.y1,
x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
y2: hip1.y2 + offset,
})
hip2.set({
x1: hip2.x1,
y1: hip2.y1,
x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
y2: hip2.y2 + offset,
})
}
if (ridge.y1 < y1 && ridge.y2 < y1) {
offset = Math.abs(ridge.y2 - y1) - offset
ridge.set({
x1: ridge.x1,
y1: ridge.y1 - offset,
x2: ridge.x2,
y2: ridge.y2,
})
gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'gableLine',
})
canvas?.add(gableLine)
hip1.set({
x1: hip1.x1,
y1: hip1.y1,
x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
y2: hip1.y2 - offset,
})
hip2.set({
x1: hip2.x1,
y1: hip2.y1,
x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
y2: hip2.y2 - offset,
})
}
}
if (ridge.direction === 'bottom') {
if (ridge.y1 > y1 && ridge.y2 > y1) {
offset = Math.abs(ridge.y1 - y1) - offset
ridge.set({
x1: ridge.x1,
y1: ridge.y1 - offset,
x2: ridge.x2,
y2: ridge.y2,
})
gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'gableLine',
})
canvas?.add(gableLine)
hip1.set({
x1: hip1.x1,
y1: hip1.y1,
x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
y2: hip1.y2 - offset,
})
hip2.set({
x1: hip2.x1,
y1: hip2.y1,
x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
y2: hip2.y2 - offset,
})
}
if (ridge.y1 < y1 && ridge.y2 < y1) {
offset = Math.abs(ridge.y2 - y1) - offset
ridge.set({
x1: ridge.x1,
y1: ridge.y1,
x2: ridge.x2,
y2: ridge.y2 + offset,
})
gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'gableLine',
})
canvas?.add(gableLine)
hip1.set({
x1: hip1.x1,
y1: hip1.y1,
x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
y2: hip1.y2 + offset,
})
hip2.set({
x1: hip2.x1,
y1: hip2.y1,
x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
y2: hip2.y2 + offset,
})
}
}
if (ridge.direction === 'right') {
if (ridge.x1 > x1 && ridge.x2 > x1) {
offset = Math.abs(ridge.x1 - x1) - offset
ridge.set({
x1: ridge.x1 - offset,
y1: ridge.y1,
x2: ridge.x2,
y2: ridge.y2,
})
gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'gableLine',
})
canvas?.add(gableLine)
hip1.set({
x1: hip1.x1,
y1: hip1.y1,
x2: hip1.x2 - offset,
y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
})
hip2.set({
x1: hip2.x1,
y1: hip2.y1,
x2: hip2.x2 - offset,
y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
})
}
if (ridge.x1 < x1 && ridge.x2 < x1) {
offset = Math.abs(ridge.x2 - x1) - offset
ridge.set({
x1: ridge.x1,
y1: ridge.y1,
x2: ridge.x2 + offset,
y2: ridge.y2,
})
gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'gableLine',
})
canvas?.add(gableLine)
hip1.set({
x1: hip1.x1,
y1: hip1.y1,
x2: hip1.x2 + offset,
y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
})
hip2.set({
x1: hip2.x1,
y1: hip2.y1,
x2: hip2.x2 + offset,
y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
})
}
}
if (ridge.direction === 'left') {
if (ridge.x1 > x1 && ridge.x2 > x1) {
offset = Math.abs(ridge.x1 - x1) - offset
ridge.set({
x1: ridge.x1,
y1: ridge.y1,
x2: ridge.x2 + offset,
y2: ridge.y2,
})
gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'gableLine',
})
canvas?.add(gableLine)
hip1.set({
x1: hip1.x1,
y1: hip1.y1,
x2: hip1.x2 + offset,
y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
})
hip2.set({
x1: hip2.x1,
y1: hip2.y1,
x2: hip2.x2 + offset,
y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
})
}
if (ridge.x1 < x1 && ridge.x2 < x1) {
offset = Math.abs(ridge.x2 - x1) - offset
ridge.set({
x1: ridge.x1 - offset,
y1: ridge.y1,
x2: ridge.x2,
y2: ridge.y2,
})
gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
fontSize: polygon.fontSize,
stroke: 'blue',
strokeWidth: 1,
name: 'gableLine',
})
canvas?.add(gableLine)
hip1.set({
x1: hip1.x1,
y1: hip1.y1,
x2: hip1.x2 - offset,
y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
})
hip2.set({
x1: hip2.x1,
y1: hip2.y1,
x2: hip2.x2 - offset,
y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
})
}
}
canvas?.renderAll()
}
})
}
})
return gableLine
}
function arePointsEqual(point1, point2) {