다각형 테스트 및 작업 중

src/components/Roof2.jsx

@@ -210,14 +210,15 @@ export default function Roof2() {
     const octaType1 = [
       { x: 100, y: 100 },
       { x: 100, y: 600 },
-      { x: 500, y: 600 },
+      { x: 650, y: 600 },
-      { x: 500, y: 400 },
+      { x: 650, y: 400 },
       { x: 350, y: 400 },
       { x: 350, y: 100 },
     ]
 
     if (canvas) {
-      const polygon = new QPolygon(octaType1, {
+      // const polygon = new QPolygon(octaType1, {
+      const polygon = new QPolygon(eightPoint2, {
         fill: 'transparent',
         stroke: 'black',
         strokeWidth: 1,

src/util/canvas-util.js

@@ -38,7 +38,7 @@ export function actionHandler(eventData, transform, x, y) {
 
 // define a function that can keep the polygon in the same position when we change its width/height/top/left
 export function anchorWrapper(anchorIndex, fn) {
-  return function (eventData, transform, x, y) {
+  return function(eventData, transform, x, y) {
     let fabricObject = transform.target
     let originX = fabricObject?.points[anchorIndex].x - fabricObject.pathOffset.x
     let originY = fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y
@@ -241,6 +241,14 @@ export const getRoofHypotenuse = (base) => {
   return Math.sqrt(base * base * 2)
 }
 
+/**
+ * 빗변의 길이를 입력받아 밑변의 길이를 반환
+ * @param base 빗변
+ */
+export const getAdjacent = (base) => {
+  return Math.round(Math.sqrt(Math.pow(line, 2) / 2))
+}
+
 /**
  * 촌을 입력받아 각도를 반환
  * @param chon