From 7cf33ebb0f9844999252fad7a16e9fd5ff0b9490 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Mon, 2 Sep 2024 12:59:37 +0900 Subject: [PATCH] =?UTF-8?q?26,27,28,89=EB=B2=88=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 182 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 169 insertions(+), 13 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index d7130911..ce843784 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -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) { + +