면형상 배치 버튼 추가
This commit is contained in:
parent
6d78779455
commit
dba5d20e6d
@ -577,922 +577,6 @@ export default function Roof2(props) {
|
|||||||
canvas?.renderAll()
|
canvas?.renderAll()
|
||||||
}
|
}
|
||||||
|
|
||||||
const createPentagon2 = () => {
|
|
||||||
const a = 400 //Number(prompt('a'))
|
|
||||||
const b = 200 //Number(prompt('b'))
|
|
||||||
const c = 250 //Number(prompt('c'))
|
|
||||||
const d = 150 //Number(prompt('d'))
|
|
||||||
|
|
||||||
const t = (c * (a - b)) / (200 + c)
|
|
||||||
|
|
||||||
const t2 = Math.sqrt(c * c + t * t)
|
|
||||||
|
|
||||||
const t3 = Math.sqrt((c - d) * (c - d) + (a - b - t) * (a - b - t))
|
|
||||||
|
|
||||||
const angle = Math.atan(t2 / t)
|
|
||||||
const angle2 = Math.atan(t3 / (a - b - t))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
let pentagon
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
|
|
||||||
pentagon = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - a / 2, y: pointer.y + a / 2 - d },
|
|
||||||
{ x: pointer.x + a / 2, y: pointer.y + a / 2 - d },
|
|
||||||
{ x: pointer.x + a / 2, y: pointer.y + a / 2 - d - d },
|
|
||||||
{ x: pointer.x + a / 2 - b, y: pointer.y + a / 2 - d - d },
|
|
||||||
{
|
|
||||||
x: pointer.x + a / 2 - b - t3 * Math.cos(angle),
|
|
||||||
y: pointer.y + a / 2 - d - d - t3 * Math.sin(angle),
|
|
||||||
},
|
|
||||||
/*{
|
|
||||||
x: pointer.x - a / 2 + t2 * Math.cos(angle),
|
|
||||||
y: pointer.y + a / 2 - d - t2 * Math.sin(angle),
|
|
||||||
},*/
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'gray',
|
|
||||||
strokeWidth: 1,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(pentagon)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
pentagon.set('name', 'roof')
|
|
||||||
pentagon.set('stroke', 2)
|
|
||||||
canvas?.renderAll()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const createTemplate10 = () => {
|
|
||||||
const length1 = Number(prompt('1번'))
|
|
||||||
const length2 = Number(prompt('2번'))
|
|
||||||
const length3 = Number(prompt('3번'))
|
|
||||||
const length4 = Number(prompt('4번'))
|
|
||||||
const length5 = Number(prompt('5번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
|
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
|
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
|
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 - length5 },
|
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 },
|
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 + length5 },
|
|
||||||
{
|
|
||||||
x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
|
|
||||||
y: pointer.y + (length4 + length5) / 2 - length5 + length5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
|
|
||||||
y: pointer.y + (length4 + length5) / 2 - length5 + length5 - (length4 + length5),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate11 = () => {
|
|
||||||
const length1 = 200 //Number(prompt('1번'))
|
|
||||||
const length2 = 100 //Number(prompt('2번'))
|
|
||||||
const length3 = 400 //Number(prompt('3번'))
|
|
||||||
const length4 = 300 //Number(prompt('4번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate12 = () => {
|
|
||||||
const length1 = 200 //Number(prompt('1번'))
|
|
||||||
const length2 = 100 //Number(prompt('2번'))
|
|
||||||
const length3 = 400 //Number(prompt('3번'))
|
|
||||||
const length4 = 300 //Number(prompt('4번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2 - (length1 - length2), y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate13 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 150 //Number(prompt('2번'))
|
|
||||||
const length3 = 100 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('4번'))
|
|
||||||
const length5 = 200 //Number(prompt('5번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate14 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 150 //Number(prompt('2번'))
|
|
||||||
const length3 = 100 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('4번'))
|
|
||||||
const length5 = 200 //Number(prompt('5번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length4 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length3 + length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate15 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 150 //Number(prompt('2번'))
|
|
||||||
const length3 = 100 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('4번'))
|
|
||||||
const length5 = 200 //Number(prompt('5번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate16 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 150 //Number(prompt('2번'))
|
|
||||||
const length3 = 100 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('4번'))
|
|
||||||
const length5 = 200 //Number(prompt('5번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate17 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 150 //Number(prompt('2번'))
|
|
||||||
const length3 = 250 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('4번'))
|
|
||||||
const length5 = 200 //Number(prompt('5번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate18 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 150 //Number(prompt('2번'))
|
|
||||||
const length3 = 250 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('4번'))
|
|
||||||
const length5 = 200 //Number(prompt('5번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
|
||||||
{ x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate19 = () => {
|
|
||||||
const length1 = 500 //Number(prompt('1번'))
|
|
||||||
const length2 = 300 //Number(prompt('2번'))
|
|
||||||
const length3 = 400 //Number(prompt('3번'))
|
|
||||||
const length4 = 300 //Number(prompt('4번'))
|
|
||||||
|
|
||||||
// 좌측 빗변
|
|
||||||
const leftHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
|
|
||||||
const rightHypotenuse = (length4 / length3) * leftHypotenuse
|
|
||||||
|
|
||||||
const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle) },
|
|
||||||
{
|
|
||||||
x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle) - length2,
|
|
||||||
y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate20 = () => {
|
|
||||||
const length1 = 500 //Number(prompt('1번'))
|
|
||||||
const length2 = 300 //Number(prompt('2번'))
|
|
||||||
const length3 = 400 //Number(prompt('3번'))
|
|
||||||
const length4 = 300 //Number(prompt('4번'))
|
|
||||||
|
|
||||||
// 좌측 빗변
|
|
||||||
const rightHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
|
|
||||||
const leftHypotenuse = (length4 / length3) * rightHypotenuse
|
|
||||||
|
|
||||||
const rightAngle = Math.acos((length1 - length2) / 2 / rightHypotenuse)
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(rightAngle),
|
|
||||||
y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(rightAngle),
|
|
||||||
},
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle) },
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle) + length2,
|
|
||||||
y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 19~22번은 못함
|
|
||||||
*/
|
|
||||||
const createTemplate23 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 100 //Number(prompt('2번'))
|
|
||||||
const length3 = 150 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('4번'))
|
|
||||||
const length5 = 300 //Number(prompt('5번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
|
|
||||||
{ x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const createTemplate24 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 400 //Number(prompt('2번'))
|
|
||||||
const length3 = 300 //Number(prompt('3번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 },
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
|
|
||||||
{ x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate25 = () => {
|
|
||||||
const length1 = 300 //Number(prompt('1번'))
|
|
||||||
const length2 = 200 //Number(prompt('2번'))
|
|
||||||
const length3 = 300 //Number(prompt('3번'))
|
|
||||||
const length4 = 200 //Number(prompt('3번'))
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2,
|
|
||||||
y: pointer.y + length3 / 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + (length1 - length2) / 2,
|
|
||||||
y: pointer.y + length3 / 2 - (length3 - length4),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + (length1 - length2) / 2,
|
|
||||||
y: pointer.y + length3 / 2 - (length3 - length4) - length4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
|
|
||||||
y: pointer.y + length3 / 2 - (length3 - length4) - length4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
|
|
||||||
y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length1,
|
|
||||||
y: pointer.y + length3 / 2,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate26 = () => {
|
|
||||||
const length1 = 500 //Number(prompt('1번'))
|
|
||||||
const length2 = 200 //Number(prompt('2번'))
|
|
||||||
const length3 = 300 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('3번'))
|
|
||||||
|
|
||||||
const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
|
|
||||||
|
|
||||||
const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length1,
|
|
||||||
y: pointer.y + length3 / 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2,
|
|
||||||
y: pointer.y + length3 / 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
|
|
||||||
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2,
|
|
||||||
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
|
|
||||||
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate27 = () => {
|
|
||||||
const length1 = 500 //Number(prompt('1번'))
|
|
||||||
const length2 = 200 //Number(prompt('2번'))
|
|
||||||
const length3 = 300 //Number(prompt('3번'))
|
|
||||||
const length4 = 400 //Number(prompt('3번'))
|
|
||||||
|
|
||||||
const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
|
|
||||||
|
|
||||||
const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const triangle = new QPolygon(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2,
|
|
||||||
y: pointer.y + length3 / 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length1,
|
|
||||||
y: pointer.y + length3 / 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)),
|
|
||||||
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2,
|
|
||||||
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2 - topL * Math.cos(degreesToRadians(angle)),
|
|
||||||
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(triangle)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate28 = () => {
|
|
||||||
const length1 = Number(prompt('밑변'))
|
|
||||||
const length2 = Number(prompt('높이'))
|
|
||||||
const length3 = Number(prompt('빗변'))
|
|
||||||
|
|
||||||
const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이
|
|
||||||
|
|
||||||
const sinA = a / length3
|
|
||||||
const angleInRadians = Math.asin(sinA)
|
|
||||||
const angleInDegrees = angleInRadians * (180 / Math.PI)
|
|
||||||
const b = a - length1 / 2
|
|
||||||
|
|
||||||
const c = b / Math.tan(angleInRadians)
|
|
||||||
const d = Math.sqrt(b * b + c * c)
|
|
||||||
|
|
||||||
if (isNaN(a)) {
|
|
||||||
alert('값이 잘못되었습니다.')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (b < 0) {
|
|
||||||
alert('값이 잘못되었습니다.')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (angleInDegrees === 0 || angleInRadians === 0) {
|
|
||||||
alert('값이 잘못되었습니다.')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
let pentagon
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
|
|
||||||
|
|
||||||
pentagon = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
|
|
||||||
{ x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
|
|
||||||
{
|
|
||||||
x: pointer.x + length1 / 2 - b / 2 + d * Math.cos(newAngleInRadians),
|
|
||||||
y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: pointer.x - (length1 + b) / 2 + length3 * Math.cos(newAngleInRadians),
|
|
||||||
y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'gray',
|
|
||||||
strokeWidth: 1,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(pentagon)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
pentagon.set('name', 'roof')
|
|
||||||
pentagon.set('stroke', 2)
|
|
||||||
canvas?.renderAll()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const createTemplate29 = () => {
|
|
||||||
const length1 = Number(prompt('밑변'))
|
|
||||||
const length2 = Number(prompt('높이'))
|
|
||||||
const length3 = Number(prompt('빗변'))
|
|
||||||
|
|
||||||
const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이
|
|
||||||
|
|
||||||
const sinA = a / length3
|
|
||||||
const angleInRadians = Math.asin(sinA)
|
|
||||||
const angleInDegrees = angleInRadians * (180 / Math.PI)
|
|
||||||
const b = a - length1 / 2
|
|
||||||
|
|
||||||
const c = b / Math.tan(angleInRadians)
|
|
||||||
const d = Math.sqrt(b * b + c * c)
|
|
||||||
|
|
||||||
if (isNaN(a)) {
|
|
||||||
alert('값이 잘못되었습니다.')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (b < 0) {
|
|
||||||
alert('값이 잘못되었습니다.')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (angleInDegrees === 0 || angleInRadians === 0) {
|
|
||||||
alert('값이 잘못되었습니다.')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let isDrawing = true
|
|
||||||
let pentagon
|
|
||||||
canvas?.on('mouse:move', (e) => {
|
|
||||||
if (!isDrawing) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
|
||||||
const pointer = canvas?.getPointer(e.e)
|
|
||||||
const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
|
|
||||||
|
|
||||||
pentagon = new QPolygon(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
x: pointer.x + length1 / 2 - b / 2 - length3 * Math.cos(newAngleInRadians),
|
|
||||||
y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
|
|
||||||
},
|
|
||||||
{ x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
|
|
||||||
{ x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
|
|
||||||
{ x: pointer.x - (length1 + b) / 2 - d * Math.cos(newAngleInRadians), y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians) },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'gray',
|
|
||||||
strokeWidth: 1,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
canvas?.add(pentagon)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas?.on('mouse:down', (e) => {
|
|
||||||
isDrawing = false
|
|
||||||
pentagon.set('name', 'roof')
|
|
||||||
pentagon.set('stroke', 2)
|
|
||||||
canvas?.renderAll()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const moduleConfiguration = () => {
|
const moduleConfiguration = () => {
|
||||||
createRoofRack()
|
createRoofRack()
|
||||||
}
|
}
|
||||||
@ -1675,60 +759,6 @@ export default function Roof2(props) {
|
|||||||
<Button className="m-1 p-2" onClick={deleteCell}>
|
<Button className="m-1 p-2" onClick={deleteCell}>
|
||||||
선택 셀 지우기
|
선택 셀 지우기
|
||||||
</Button>
|
</Button>
|
||||||
<Button className="m-1 p-2" onClick={createTemplate10}>
|
|
||||||
10번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate11}>
|
|
||||||
11번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate12}>
|
|
||||||
12번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate13}>
|
|
||||||
13번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate14}>
|
|
||||||
14번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate15}>
|
|
||||||
15번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate16}>
|
|
||||||
16번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate17}>
|
|
||||||
17번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate18}>
|
|
||||||
18번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate19}>
|
|
||||||
19번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate20}>
|
|
||||||
20번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate23}>
|
|
||||||
23번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate24}>
|
|
||||||
24번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate25}>
|
|
||||||
25번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate26}>
|
|
||||||
26번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate27}>
|
|
||||||
27번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate28}>
|
|
||||||
28번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={createTemplate29}>
|
|
||||||
29번 추가
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" onClick={moduleConfiguration}>
|
<Button className="m-1 p-2" onClick={moduleConfiguration}>
|
||||||
모듈,회로구성
|
모듈,회로구성
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'
|
|||||||
import { modalState } from '@/store/modalAtom'
|
import { modalState } from '@/store/modalAtom'
|
||||||
import { QPolygon } from '@/components/fabric/QPolygon'
|
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||||
import { fontSizeState, roofMaterialState } from '@/store/canvasAtom'
|
import { fontSizeState, roofMaterialState } from '@/store/canvasAtom'
|
||||||
|
import { degreesToRadians } from '@turf/turf'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 면형상 배치 모달
|
* 면형상 배치 모달
|
||||||
@ -40,6 +41,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
|||||||
const onSave = () => {
|
const onSave = () => {
|
||||||
let isDrawing = true
|
let isDrawing = true
|
||||||
let obj = null
|
let obj = null
|
||||||
|
let points = []
|
||||||
canvas?.on('mouse:move', (e) => {
|
canvas?.on('mouse:move', (e) => {
|
||||||
if (!isDrawing) {
|
if (!isDrawing) {
|
||||||
return
|
return
|
||||||
@ -54,183 +56,98 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
|||||||
newLength2 = Math.sqrt(length3 ** 2 - (length1 / 2) ** 2)
|
newLength2 = Math.sqrt(length3 ** 2 - (length1 / 2) ** 2)
|
||||||
}
|
}
|
||||||
|
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
|
{ x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
|
||||||
{ x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
|
{ x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
|
||||||
{ x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
|
{ x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 2: {
|
case 2: {
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 3: {
|
case 3: {
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length3 / 2, y: pointer.y - length2 / 2 },
|
{ x: pointer.x + length3 / 2, y: pointer.y - length2 / 2 },
|
||||||
{ x: pointer.x - length3 / 2, y: pointer.y - length2 / 2 },
|
{ x: pointer.x - length3 / 2, y: pointer.y - length2 / 2 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 4: {
|
case 4: {
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 5: {
|
case 5: {
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
case 6: {
|
case 6: {
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y - length3 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y - length3 / 2 },
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 - length2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 - length2 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
case 7: {
|
case 7: {
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 - length3 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 - length3 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 8: {
|
case 8: {
|
||||||
const angleInRadians = Math.asin(length2 / length3)
|
const angleInRadians = Math.asin(length2 / length3)
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
|
{ x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
|
||||||
{ x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
|
{ x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 9: {
|
case 9: {
|
||||||
const angleInRadians = Math.asin(length2 / length3)
|
const angleInRadians = Math.asin(length2 / length3)
|
||||||
obj = new QPolygon(
|
points = [
|
||||||
[
|
|
||||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
{ x: pointer.x + length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
|
{ x: pointer.x + length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
|
||||||
{ x: pointer.x - length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
|
{ x: pointer.x - length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
|
||||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||||
],
|
]
|
||||||
{
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: 'black',
|
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: false,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 10: {
|
case 10: {
|
||||||
console.log(length1, length2, length3, length4, length5)
|
points = [
|
||||||
obj = new QPolygon(
|
|
||||||
[
|
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
|
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
|
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
|
||||||
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
|
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
|
||||||
@ -245,19 +162,314 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
|||||||
x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
|
x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
|
||||||
y: pointer.y + (length4 + length5) / 2 - length5 + length5 - (length4 + length5),
|
y: pointer.y + (length4 + length5) / 2 - length5 + length5 - (length4 + length5),
|
||||||
},
|
},
|
||||||
],
|
]
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 11: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
|
||||||
|
]
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 12: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2 - (length1 - length2), y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
|
||||||
|
]
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 13: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 14: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length4 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length3 + length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 15: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 16: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 17: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 18: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
||||||
|
{ x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case 19: {
|
||||||
|
const leftHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
|
||||||
|
const rightHypotenuse = (length4 / length3) * leftHypotenuse
|
||||||
|
|
||||||
|
const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
|
||||||
|
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
|
||||||
|
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
|
||||||
{
|
{
|
||||||
fill: 'transparent',
|
x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle),
|
||||||
stroke: 'black',
|
y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
|
||||||
strokeWidth: 2,
|
|
||||||
selectable: true,
|
|
||||||
fontSize: fontSize,
|
|
||||||
name: 'guideTriangle',
|
|
||||||
},
|
},
|
||||||
)
|
{
|
||||||
|
x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle) - length2,
|
||||||
|
y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 20: {
|
||||||
|
// 좌측 빗변
|
||||||
|
const rightHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
|
||||||
|
const leftHypotenuse = (length4 / length3) * rightHypotenuse
|
||||||
|
|
||||||
|
const rightAngle = Math.acos((length1 - length2) / 2 / rightHypotenuse)
|
||||||
|
points = [
|
||||||
|
{
|
||||||
|
x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(rightAngle),
|
||||||
|
y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(rightAngle),
|
||||||
|
},
|
||||||
|
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle),
|
||||||
|
y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle) + length2,
|
||||||
|
y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case 23: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
|
||||||
|
{ x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case 24: {
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 },
|
||||||
|
{ x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
|
||||||
|
{ x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
|
||||||
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
|
||||||
|
{ x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case 25: {
|
||||||
|
points = [
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2,
|
||||||
|
y: pointer.y + length3 / 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + (length1 - length2) / 2,
|
||||||
|
y: pointer.y + length3 / 2 - (length3 - length4),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + (length1 - length2) / 2,
|
||||||
|
y: pointer.y + length3 / 2 - (length3 - length4) - length4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
|
||||||
|
y: pointer.y + length3 / 2 - (length3 - length4) - length4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
|
||||||
|
y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length1,
|
||||||
|
y: pointer.y + length3 / 2,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 26: {
|
||||||
|
const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
|
||||||
|
|
||||||
|
const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
|
||||||
|
|
||||||
|
points = [
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length1,
|
||||||
|
y: pointer.y + length3 / 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2,
|
||||||
|
y: pointer.y + length3 / 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
|
||||||
|
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2,
|
||||||
|
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
|
||||||
|
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 27: {
|
||||||
|
const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
|
||||||
|
|
||||||
|
const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
|
||||||
|
points = [
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2,
|
||||||
|
y: pointer.y + length3 / 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length1,
|
||||||
|
y: pointer.y + length3 / 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)),
|
||||||
|
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2,
|
||||||
|
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2 - topL * Math.cos(degreesToRadians(angle)),
|
||||||
|
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 28: {
|
||||||
|
const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이
|
||||||
|
|
||||||
|
const sinA = a / length3
|
||||||
|
const angleInRadians = Math.asin(sinA)
|
||||||
|
const angleInDegrees = angleInRadians * (180 / Math.PI)
|
||||||
|
const b = a - length1 / 2
|
||||||
|
|
||||||
|
const c = b / Math.tan(angleInRadians)
|
||||||
|
const d = Math.sqrt(b * b + c * c)
|
||||||
|
const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
|
||||||
|
points = [
|
||||||
|
{ x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
|
||||||
|
{ x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
|
||||||
|
{
|
||||||
|
x: pointer.x + length1 / 2 - b / 2 + d * Math.cos(newAngleInRadians),
|
||||||
|
y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: pointer.x - (length1 + b) / 2 + length3 * Math.cos(newAngleInRadians),
|
||||||
|
y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 29: {
|
||||||
|
const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이
|
||||||
|
|
||||||
|
const sinA = a / length3
|
||||||
|
const angleInRadians = Math.asin(sinA)
|
||||||
|
const angleInDegrees = angleInRadians * (180 / Math.PI)
|
||||||
|
const b = a - length1 / 2
|
||||||
|
|
||||||
|
const c = b / Math.tan(angleInRadians)
|
||||||
|
const d = Math.sqrt(b * b + c * c)
|
||||||
|
const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
|
||||||
|
points = [
|
||||||
|
{
|
||||||
|
x: pointer.x + length1 / 2 - b / 2 - length3 * Math.cos(newAngleInRadians),
|
||||||
|
y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
|
||||||
|
},
|
||||||
|
{ x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
|
||||||
|
{ x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
|
||||||
|
{ x: pointer.x - (length1 + b) / 2 - d * Math.cos(newAngleInRadians), y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians) },
|
||||||
|
]
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
obj = new QPolygon(points, {
|
||||||
|
fill: 'transparent',
|
||||||
|
stroke: 'black',
|
||||||
|
strokeWidth: 2,
|
||||||
|
selectable: false,
|
||||||
|
fontSize: fontSize,
|
||||||
|
name: 'guideTriangle',
|
||||||
|
})
|
||||||
canvas?.add(obj)
|
canvas?.add(obj)
|
||||||
setCurrentPattern(obj)
|
setCurrentPattern(obj)
|
||||||
canvas?.renderAll()
|
canvas?.renderAll()
|
||||||
@ -332,40 +544,25 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
|||||||
canvas?.renderAll()
|
canvas?.renderAll()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ButtonComp = () => {
|
||||||
|
// Generate 29 buttons
|
||||||
|
const buttons = []
|
||||||
|
for (let i = 1; i <= 29; i++) {
|
||||||
|
buttons.push(
|
||||||
|
<Button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
|
||||||
|
{i}번 추가
|
||||||
|
</Button>,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div>{buttons}</div>
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<div>면형상배치{type}</div>
|
<div>면형상배치{type}</div>
|
||||||
<Button className="m-1 p-2" value="1" onClick={onChangeType}>
|
<ButtonComp></ButtonComp>
|
||||||
1번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="2" onClick={onChangeType}>
|
|
||||||
2번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="3" onClick={onChangeType}>
|
|
||||||
3번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="4" onClick={onChangeType}>
|
|
||||||
4번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="5" onClick={onChangeType}>
|
|
||||||
5번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="6" onClick={onChangeType}>
|
|
||||||
6번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="7" onClick={onChangeType}>
|
|
||||||
7번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="8" onClick={onChangeType}>
|
|
||||||
8번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="9" onClick={onChangeType}>
|
|
||||||
9번
|
|
||||||
</Button>
|
|
||||||
<Button className="m-1 p-2" value="10" onClick={onChangeType}>
|
|
||||||
10번
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
{type === 1 ? (
|
{type === 1 ? (
|
||||||
<div>
|
<div>
|
||||||
@ -377,16 +574,16 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
|||||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
길이3 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
대각선 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||||
</div>
|
</div>
|
||||||
) : type === 2 ? (
|
) : [2, 4, 5].includes(type) ? (
|
||||||
<div>
|
<div>
|
||||||
길이1
|
길이1
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||||
길이2
|
길이2
|
||||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||||
</div>
|
</div>
|
||||||
) : type === 3 ? (
|
) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
|
||||||
<>
|
<>
|
||||||
길이1
|
길이1
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||||
@ -395,21 +592,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
|||||||
길이3
|
길이3
|
||||||
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||||
</>
|
</>
|
||||||
) : type === 4 ? (
|
) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
|
||||||
<>
|
|
||||||
길이1
|
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
|
||||||
길이2
|
|
||||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
|
||||||
</>
|
|
||||||
) : type === 5 ? (
|
|
||||||
<>
|
|
||||||
길이1
|
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
|
||||||
길이2
|
|
||||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
|
||||||
</>
|
|
||||||
) : type === 6 ? (
|
|
||||||
<>
|
<>
|
||||||
길이1
|
길이1
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||||
@ -417,35 +600,10 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
|||||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||||
길이3
|
길이3
|
||||||
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||||
|
길이4
|
||||||
|
<Input type="text" name={'length4'} value={length4} onChange={setLength} />
|
||||||
</>
|
</>
|
||||||
) : type === 7 ? (
|
) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
|
||||||
<>
|
|
||||||
길이1
|
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
|
||||||
길이2
|
|
||||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
|
||||||
길이3
|
|
||||||
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
|
||||||
</>
|
|
||||||
) : type === 8 ? (
|
|
||||||
<>
|
|
||||||
길이1
|
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
|
||||||
길이2
|
|
||||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
|
||||||
길이3
|
|
||||||
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
|
||||||
</>
|
|
||||||
) : type === 9 ? (
|
|
||||||
<>
|
|
||||||
길이1
|
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
|
||||||
길이2
|
|
||||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
|
||||||
길이3
|
|
||||||
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
|
||||||
</>
|
|
||||||
) : type === 10 ? (
|
|
||||||
<>
|
<>
|
||||||
길이1
|
길이1
|
||||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user