팔각형 타입 추가 및 시작점 큰 빨간 원으로 수정

src/components/Roof2.jsx

@@ -207,8 +207,30 @@ export default function Roof2() {
       { x: 897, y: 215 },
     ]
 
+    const eightPoint3 = [
+      { x: 190, y: 147 },
+      { x: 190, y: 747 },
+      { x: 490, y: 747 },
+      { x: 490, y: 497 },
+      { x: 640, y: 497 },
+      { x: 640, y: 747 },
+      { x: 1090, y: 747 },
+      { x: 1090, y: 147 },
+    ]
+
+    const eightPoint4 = [
+      { x: 228, y: 92 },
+      { x: 228, y: 592 },
+      { x: 478, y: 592 },
+      { x: 478, y: 342 },
+      { x: 728, y: 342 },
+      { x: 728, y: 592 },
+      { x: 1078, y: 592 },
+      { x: 1078, y: 92 },
+    ]
+
     if (canvas) {
-      const polygon = new QPolygon(eightPoint, {
+      const polygon = new QPolygon(eightPoint4, {
         fill: 'transparent',
         stroke: 'black',
         strokeWidth: 1,

src/hooks/useCanvas.js

@@ -7,6 +7,8 @@ import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
 import QPolygon from '@/components/fabric/QPolygon'
 import { QLine } from '@/components/fabric/QLine'
 import QRect from '@/components/fabric/QRect'
+import { defineQPloygon } from '@/util/qpolygon-utils'
+import { defineQLine } from '@/util/qline-utils'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
@@ -118,21 +120,8 @@ export function useCanvas(id) {
     fabric.QLine = fabric.util.createClass(fabric.Group, {})
     fabric.QPolygon = fabric.util.createClass(fabric.Group, {})
 
-    // fromObject 메서드를 QLine 클래스에 직접 추가
+    defineQPloygon()
-    fabric.QLine.fromObject = function (object, callback) {
+    defineQLine()
-      const { initOption, initPoints, initLengthTxt } = object
-      fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
-        return callback(new QLine(initPoints, initOption, initLengthTxt))
-      })
-    }
-
-    // fromObject 메서드를 QLine 클래스에 직접 추가
-    fabric.QPolygon.fromObject = function (object, callback) {
-      const { initOption, initPoints, initLengthTxt } = object
-      fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
-        return callback(new QPolygon(initPoints, initOption, initLengthTxt))
-      })
-    }
   }
 
   /**

src/hooks/useMode.js

@@ -329,11 +329,11 @@ export function useMode() {
     canvas?.on('mouse:down', function (options) {
       const pointer = canvas?.getPointer(options.e)
       const circle = new fabric.Circle({
-        radius: 1,
+        radius: 5,
         fill: 'transparent', // 원 안을 비웁니다.
-        stroke: 'black', // 원 테두리 색상을 검은색으로 설정합니다.
+        stroke: 'red', // 원 테두리 색상을 검은색으로 설정합니다.
-        left: pointer.x,
+        left: pointer.x - 5,
-        top: pointer.y,
+        top: pointer.y - 5,
         originX: 'center',
         originY: 'center',
         selectable: false,

src/util/qpolygon-utils.js

@@ -48,7 +48,7 @@ export const drawHelpLineInHexagon = (polygon, chon) => {
 
     // line을 이등변 삼각형의 밑변으로 보고 높이를 구한다.
 
-    const helpLineLength = Math.sqrt(Math.pow(line.length, 2) - Math.pow(line.length / 2, 2)) - 50
+    const helpLineLength = Math.sqrt(Math.pow(line.length, 2) - Math.pow(line.length / 2, 2)) - 10
 
     const firstX2 = Math.floor(line.x1 + helpLineLength * Math.cos(angle1))
     const firstY2 = Math.floor(line.y1 + helpLineLength * Math.sin(angle1))