6각형 작업중
This commit is contained in:
parent
17424457a9
commit
d529e94143
@ -133,24 +133,43 @@ export default function Roof2() {
|
||||
}, [verticalSize, horizontalSize])
|
||||
|
||||
const makeQPolygon = () => {
|
||||
const type1 = [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 800, y: 100 },
|
||||
{ x: 800, y: 800 },
|
||||
{ x: 500, y: 800 },
|
||||
{ x: 500, y: 400 },
|
||||
{ x: 100, y: 400 },
|
||||
]
|
||||
const type2 = [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 100, y: 1000 },
|
||||
{ x: 1000, y: 1000 },
|
||||
{ x: 1000, y: 600 },
|
||||
{ x: 550, y: 600 },
|
||||
{ x: 550, y: 100 },
|
||||
]
|
||||
|
||||
const type3 = [
|
||||
{ x: 100, y: 50 },
|
||||
{ x: 100, y: 650 },
|
||||
{ x: 450, y: 650 },
|
||||
{ x: 450, y: 400 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 700, y: 50 },
|
||||
]
|
||||
|
||||
const type4 = [
|
||||
{ x: 153.96209743461895, y: 446.46989831140326 },
|
||||
{ x: 153.96209743461895, y: 796.879061239893 },
|
||||
{ x: 754.3712603631087, y: 796.879061239893 },
|
||||
{ x: 754.3712603631087, y: 196.46989831140326 },
|
||||
{ x: 403.962097434619, y: 196.46989831140326 },
|
||||
{ x: 403.962097434619, y: 446.46989831140326 },
|
||||
]
|
||||
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: 100, y: 100 },
|
||||
{ x: 800, y: 100 },
|
||||
{ x: 800, y: 800 },
|
||||
{ x: 500, y: 800 },
|
||||
{ x: 500, y: 400 },
|
||||
{ x: 100, y: 400 },
|
||||
],
|
||||
type4,
|
||||
{
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
|
||||
@ -30,6 +30,7 @@ export default class QPolygon extends fabric.Group {
|
||||
}
|
||||
|
||||
const sortPoints = sortedPoints(points)
|
||||
console.log(sortPoints)
|
||||
const polygon = new fabric.Polygon(sortPoints, options)
|
||||
|
||||
super([polygon], {})
|
||||
@ -545,9 +546,10 @@ export default class QPolygon extends fabric.Group {
|
||||
let vPoint1, vPoint2
|
||||
// 용마루 시작점과 만나는 지붕의 중앙
|
||||
let centerPoint1, centerPoint2
|
||||
// 용마루 끝점을 위해 필요한 점 2개
|
||||
let vPoint3, vPoint4
|
||||
|
||||
// 용마루 길이
|
||||
let ridgeLength = 0
|
||||
let ridgePoint1, ridgePoint2
|
||||
if (type === 1) {
|
||||
lines = [this.lines[0], this.lines[3]]
|
||||
lines2 = [this.lines[1], this.lines[4]]
|
||||
@ -567,14 +569,10 @@ export default class QPolygon extends fabric.Group {
|
||||
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,
|
||||
}
|
||||
|
||||
ridgeLength = Math.min(this.lines[1].length, this.lines[2].length)
|
||||
ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength, vPoint1.y]
|
||||
ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y - ridgeLength]
|
||||
} else if (type === 2) {
|
||||
lines = [this.lines[2], this.lines[5]]
|
||||
lines2 = [this.lines[0], this.lines[3]]
|
||||
@ -594,14 +592,10 @@ export default class QPolygon extends fabric.Group {
|
||||
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,
|
||||
}
|
||||
|
||||
ridgeLength = Math.min(this.lines[3].length, this.lines[4].length)
|
||||
ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x - ridgeLength, vPoint1.y]
|
||||
ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength]
|
||||
} else if (type === 3) {
|
||||
lines = [this.lines[1], this.lines[4]]
|
||||
lines2 = [this.lines[2], this.lines[5]]
|
||||
@ -621,14 +615,10 @@ export default class QPolygon extends fabric.Group {
|
||||
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,
|
||||
}
|
||||
|
||||
ridgeLength = Math.min(this.lines[0].length, this.lines[3].length)
|
||||
ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x, vPoint1.y - ridgeLength]
|
||||
ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x - ridgeLength, vPoint2.y]
|
||||
} else if (type === 4) {
|
||||
lines = [this.lines[0], this.lines[3]]
|
||||
lines2 = [this.lines[1], this.lines[4]]
|
||||
@ -648,14 +638,10 @@ export default class QPolygon extends fabric.Group {
|
||||
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,
|
||||
}
|
||||
|
||||
ridgeLength = Math.min(this.lines[2].length, this.lines[5].length)
|
||||
ridgePoint1 = [vPoint1.x, vPoint1.y, vPoint1.x + ridgeLength, vPoint1.y]
|
||||
ridgePoint2 = [vPoint2.x, vPoint2.y, vPoint2.x, vPoint2.y + ridgeLength]
|
||||
}
|
||||
|
||||
const realLine1 = new QLine(
|
||||
@ -667,7 +653,7 @@ export default class QPolygon extends fabric.Group {
|
||||
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),
|
||||
getRoofHypotenuse(lines[0].length / 2),
|
||||
)
|
||||
|
||||
const realLine3 = new QLine(
|
||||
@ -682,7 +668,7 @@ export default class QPolygon extends fabric.Group {
|
||||
getRoofHypotenuse(lines[1].length / 2),
|
||||
)
|
||||
|
||||
// 옆으로 누워있는 지붕의 높이
|
||||
// 옆으로 누워있는 지붕의 높이 점선
|
||||
const realLine5 = new QLine(
|
||||
[vPoint1.x, vPoint1.y, centerPoint1.x, centerPoint1.y],
|
||||
{
|
||||
@ -694,7 +680,7 @@ export default class QPolygon extends fabric.Group {
|
||||
getRoofHeight(lines[0].length / 2, getDegreeByChon(chon)),
|
||||
)
|
||||
|
||||
// 옆으로 누워있는 지붕의 높이
|
||||
// 옆으로 누워있는 지붕의 높이 점선
|
||||
const realLine6 = new QLine(
|
||||
[vPoint2.x, vPoint2.y, centerPoint2.x, centerPoint2.y],
|
||||
{
|
||||
@ -708,7 +694,7 @@ export default class QPolygon extends fabric.Group {
|
||||
|
||||
// 용마루 보조선
|
||||
const ridgeHelpLine1 = new QLine(
|
||||
[lines2[0].x2, lines2[0].y2, vPoint3.x, vPoint3.y],
|
||||
[lines2[1].x2, lines2[1].y2, ridgePoint1[2], ridgePoint1[3]],
|
||||
{
|
||||
fontSize: this.fontSize,
|
||||
stroke: 'black',
|
||||
@ -719,7 +705,7 @@ export default class QPolygon extends fabric.Group {
|
||||
|
||||
// 용마루 보조선
|
||||
const ridgeHelpLine2 = new QLine(
|
||||
[lines2[1].x2, lines2[1].y2, vPoint4.x, vPoint4.y],
|
||||
[lines2[0].x2, lines2[0].y2, ridgePoint2[2], ridgePoint2[3]],
|
||||
{
|
||||
fontSize: this.fontSize,
|
||||
stroke: 'black',
|
||||
@ -729,22 +715,21 @@ export default class QPolygon extends fabric.Group {
|
||||
)
|
||||
|
||||
// 용마루
|
||||
const ridge1 = new QLine([vPoint1.x, vPoint1.y, vPoint3.x, vPoint3.y], {
|
||||
const ridge1 = new QLine(ridgePoint1, {
|
||||
fontSize: this.fontSize,
|
||||
stroke: 'black',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
|
||||
// 용마루
|
||||
const ridge2 = new QLine([vPoint2.x, vPoint2.y, vPoint4.x, vPoint4.y], {
|
||||
const ridge2 = new QLine(ridgePoint2, {
|
||||
fontSize: this.fontSize,
|
||||
stroke: 'black',
|
||||
strokeWidth: 1,
|
||||
})
|
||||
|
||||
console.log(vPoint3, vPoint4)
|
||||
const ridgeEndLine = new QLine(
|
||||
[vPoint3.x, vPoint3.y, vPoint4.x, vPoint4.y],
|
||||
[ridgePoint1[2], ridgePoint1[3], ridgePoint2[2], ridgePoint2[3]],
|
||||
{
|
||||
fontSize: this.fontSize,
|
||||
stroke: 'black',
|
||||
@ -765,6 +750,7 @@ export default class QPolygon extends fabric.Group {
|
||||
this.addWithUpdate(ridgeEndLine)
|
||||
|
||||
this.canvas.renderAll()
|
||||
console.log(JSON.stringify(this.points))
|
||||
}
|
||||
|
||||
#drawHelpLineInOctagon(chon) {}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user