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

6각형 작업중

Browse Source
This commit is contained in:
hyojun.choi 2024-07-11 15:33:49 +09:00
parent f5fc2d29bf
commit 17424457a9
3 changed files with 252 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Roof2.jsx
View File

@ -136,14 +136,20 @@ export default function Roof2() {
if (canvas) {
const polygon = new QPolygon(
[
{ x: 198.5, y: 735 },
{ x: 698.5, y: 735 },
{ x: 698.5, y: 585 },
{ x: 448.5, y: 585 },
{ x: 448.5, y: 435 },
{ x: 698.5, y: 435 },
{ x: 698.5, y: 235 },
{ x: 198.5, y: 235 },
// { x: 198.5, y: 735 },
// { x: 698.5, y: 735 },
// { x: 698.5, y: 585 },
// { x: 448.5, y: 585 },
// { x: 448.5, y: 435 },
// { x: 698.5, y: 435 },
// { x: 698.5, y: 235 },
// { x: 198.5, y: 235 },
{ x: 100, y: 100 },
{ x: 800, y: 100 },
{ x: 800, y: 800 },
{ x: 500, y: 800 },
{ x: 500, y: 400 },
{ x: 100, y: 400 },
],
{
fill: 'transparent',

239
src/components/fabric/QPolygon.js
View File

@ -33,6 +33,7 @@ export default class QPolygon extends fabric.Group {
const polygon = new fabric.Polygon(sortPoints, options)
super([polygon], {})
this.fontSize = options.fontSize
this.points = sortPoints
this.polygon = polygon
@ -354,7 +355,7 @@ export default class QPolygon extends fabric.Group {
}
#drawHelpLineInRect(chon) {
let type
let type = 1
let smallestLength = Infinity
let maxLength = 0
@ -530,7 +531,241 @@ export default class QPolygon extends fabric.Group {
}
}
#drawHelpLineInHexagon(chon) {}
#drawHelpLineInHexagon(chon) {
let type = this.shape
// 1 = 0, 3
// 2 = 2, 5
// 3 = 1, 4
// 4 = 0, 3
// 라인 기준점 1,2
let lines, lines2
// 용마루 시작점 2개
let vPoint1, vPoint2
// 용마루 시작점과 만나는 지붕의 중앙
let centerPoint1, centerPoint2
// 용마루 끝점을 위해 필요한 점 2개
let vPoint3, vPoint4
if (type === 1) {
lines = [this.lines[0], this.lines[3]]
lines2 = [this.lines[1], this.lines[4]]
vPoint1 = {
x: lines[0].x1 + lines[0].length / 2,
y: lines[0].y1 + lines[0].length / 2,
}
vPoint2 = {
x: lines[1].x1 + lines[1].length / 2,
y: lines[1].y1 - lines[1].length / 2,
}
centerPoint1 = {
x: (lines[0].x1 + lines[0].x2) / 2,
y: (lines[0].y1 + lines[0].y2) / 2,
}
centerPoint2 = {
x: (lines[1].x1 + lines[1].x2) / 2,
y: (lines[1].y1 + lines[1].y2) / 2,
}
vPoint3 = {
x: lines2[0].x2 + lines[0].length / 2,
y: lines2[0].y2 - lines[0].length / 2,
}
vPoint4 = {
x: lines2[1].x2 - lines[1].length / 2,
y: lines2[1].y2 + lines[1].length / 2,
}
} else if (type === 2) {
lines = [this.lines[2], this.lines[5]]
lines2 = [this.lines[0], this.lines[3]]
vPoint1 = {
x: lines[0].x1 - lines[0].length / 2,
y: lines[0].y1 - lines[0].length / 2,
}
vPoint2 = {
x: lines[1].x1 - lines[1].length / 2,
y: lines[1].y1 + lines[1].length / 2,
}
centerPoint1 = {
x: (lines[0].x1 + lines[0].x2) / 2,
y: (lines[0].y1 + lines[0].y2) / 2,
}
centerPoint2 = {
x: (lines[1].x1 + lines[1].x2) / 2,
y: (lines[1].y1 + lines[1].y2) / 2,
}
vPoint3 = {
x: lines2[0].x2 + lines[0].length / 2,
y: lines2[0].y2 - lines[0].length / 2,
}
vPoint4 = {
x: lines2[1].x2 - lines[1].length / 2,
y: lines2[1].y2 + lines[1].length / 2,
}
} else if (type === 3) {
lines = [this.lines[1], this.lines[4]]
lines2 = [this.lines[2], this.lines[5]]
vPoint1 = {
x: lines[0].x1 + lines[0].length / 2,
y: lines[0].y1 - lines[0].length / 2,
}
vPoint2 = {
x: lines[1].x1 - lines[1].length / 2,
y: lines[1].y1 - lines[1].length / 2,
}
centerPoint1 = {
x: (lines[0].x1 + lines[0].x2) / 2,
y: (lines[0].y1 + lines[0].y2) / 2,
}
centerPoint2 = {
x: (lines[1].x1 + lines[1].x2) / 2,
y: (lines[1].y1 + lines[1].y2) / 2,
}
vPoint3 = {
x: lines2[0].x2 - lines[0].length / 2,
y: lines2[0].y2 - lines[0].length / 2,
}
vPoint4 = {
x: lines2[1].x2 + lines[1].length / 2,
y: lines2[1].y2 + lines[1].length / 2,
}
} else if (type === 4) {
lines = [this.lines[0], this.lines[3]]
lines2 = [this.lines[1], this.lines[4]]
vPoint1 = {
x: lines[0].x1 + lines[0].length / 2,
y: lines[0].y1 + lines[0].length / 2,
}
vPoint2 = {
x: lines[1].x1 - lines[1].length / 2,
y: lines[1].y1 + lines[1].length / 2,
}
centerPoint1 = {
x: (lines[0].x1 + lines[0].x2) / 2,
y: (lines[0].y1 + lines[0].y2) / 2,
}
centerPoint2 = {
x: (lines[1].x1 + lines[1].x2) / 2,
y: (lines[1].y1 + lines[1].y2) / 2,
}
vPoint3 = {
x: lines2[0].x2 - lines[0].length / 2,
y: lines2[0].y2 - lines[0].length / 2,
}
vPoint4 = {
x: lines2[1].x2 + lines[1].length / 2,
y: lines2[1].y2 + lines[1].length / 2,
}
}
const realLine1 = new QLine(
[lines[0].x1, lines[0].y1, vPoint1.x, vPoint1.y],
{ fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
getRoofHypotenuse(lines[0].length / 2),
)
const realLine2 = new QLine(
[lines[0].x2, lines[0].y2, vPoint1.x, vPoint1.y],
{ fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
getRoofHypotenuse(lines[1].length / 2),
)
const realLine3 = new QLine(
[lines[1].x1, lines[1].y1, vPoint2.x, vPoint2.y],
{ fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
getRoofHypotenuse(lines[1].length / 2),
)
const realLine4 = new QLine(
[lines[1].x2, lines[1].y2, vPoint2.x, vPoint2.y],
{ fontSize: this.fontSize, stroke: 'black', strokeWidth: 1 },
getRoofHypotenuse(lines[1].length / 2),
)
// 옆으로 누워있는 지붕의 높이
const realLine5 = new QLine(
[vPoint1.x, vPoint1.y, centerPoint1.x, centerPoint1.y],
{
fontSize: this.fontSize,
stroke: 'black',
strokeWidth: 1,
strokeDashArray: [5, 5],
},
getRoofHeight(lines[0].length / 2, getDegreeByChon(chon)),
)
// 옆으로 누워있는 지붕의 높이
const realLine6 = new QLine(
[vPoint2.x, vPoint2.y, centerPoint2.x, centerPoint2.y],
{
fontSize: this.fontSize,
stroke: 'black',
strokeWidth: 1,
strokeDashArray: [5, 5],
},
getRoofHeight(lines[1].length / 2, getDegreeByChon(chon)),
)
// 용마루 보조선
const ridgeHelpLine1 = new QLine(
[lines2[0].x2, lines2[0].y2, vPoint3.x, vPoint3.y],
{
fontSize: this.fontSize,
stroke: 'black',
strokeWidth: 1,
},
getRoofHypotenuse(lines[0].length / 2),
)
// 용마루 보조선
const ridgeHelpLine2 = new QLine(
[lines2[1].x2, lines2[1].y2, vPoint4.x, vPoint4.y],
{
fontSize: this.fontSize,
stroke: 'black',
strokeWidth: 1,
},
getRoofHypotenuse(lines[1].length / 2),
)
// 용마루
const ridge1 = new QLine([vPoint1.x, vPoint1.y, vPoint3.x, vPoint3.y], {
fontSize: this.fontSize,
stroke: 'black',
strokeWidth: 1,
})
// 용마루
const ridge2 = new QLine([vPoint2.x, vPoint2.y, vPoint4.x, vPoint4.y], {
fontSize: this.fontSize,
stroke: 'black',
strokeWidth: 1,
})
console.log(vPoint3, vPoint4)
const ridgeEndLine = new QLine(
[vPoint3.x, vPoint3.y, vPoint4.x, vPoint4.y],
{
fontSize: this.fontSize,
stroke: 'black',
strokeWidth: 1,
},
)
this.addWithUpdate(realLine1)
this.addWithUpdate(realLine2)
this.addWithUpdate(realLine3)
this.addWithUpdate(realLine4)
this.addWithUpdate(realLine5)
this.addWithUpdate(realLine6)
this.addWithUpdate(ridgeHelpLine1)
this.addWithUpdate(ridgeHelpLine2)
this.addWithUpdate(ridge1)
this.addWithUpdate(ridge2)
this.addWithUpdate(ridgeEndLine)
this.canvas.renderAll()
}
#drawHelpLineInOctagon(chon) {}
}

2
src/hooks/useMode.js
View File

@ -856,7 +856,7 @@ export function useMode() {
const roof = makePolygon(offsetPoints)
setRoof(roof)
// roof.drawHelpLine()
roof.drawHelpLine()
}
const togglePolygonLine = (obj) => {