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

26,27,28,89번 추가

Browse Source
This commit is contained in:
hyojun.choi 2024-09-02 12:59:37 +09:00
parent 085e1ff51e
commit 7cf33ebb0f
1 changed files with 169 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
src/components/Roof2.jsx
View File

@ -31,7 +31,7 @@ import { useAxios } from '@/hooks/useAxios'
import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu'
import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu'
import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu'
import { radiansToDegrees } from '@turf/turf'
import { degreesToRadians, radiansToDegrees } from '@turf/turf'
export default function Roof2(props) {
const { name, userId, email, isLoggedIn } = props
@ -622,8 +622,6 @@ export default function Roof2(props) {
const angle = Math.atan(t2 / t)
const angle2 = Math.atan(t3 / (a - b - t))
console.log(angle, angle2)
let isDrawing = true
let pentagon
canvas?.on('mouse:move', (e) => {
@ -1466,12 +1464,15 @@ export default function Roof2(props) {
})
}
const createTemplate26 = () => {
//todo
const length1 = 300 //Number(prompt('1번'))
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) {
@ -1479,14 +1480,95 @@ export default function Roof2(props) {
}
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
const pointer = canvas?.getPointer(e.e)
const triangle = new QPolygon([], {
fill: 'transparent',
stroke: 'black',
strokeWidth: 2,
selectable: true,
fontSize: fontSize,
name: 'guideTriangle',
})
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)
})
@ -1566,6 +1648,74 @@ export default function Roof2(props) {
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()
})
}
return (
<>
@ -1779,9 +1929,15 @@ export default function Roof2(props) {
<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={createPentagon2}>
오각형 추가2
</Button>