test

src/components/Roof2.jsx

@@ -205,7 +205,7 @@ export default function Roof2() {
 
   const makeQLine = () => {
     if (canvas) {
-      const line = new fabric.QLine(
+      const line = new QLine(
         [200, 200, 500, 500],
         {
           stroke: 'black',
@@ -217,7 +217,6 @@ export default function Roof2() {
       )
 
       canvas?.add(line)
-      console.log(line)
     }
   }
 

src/components/fabric/QLine.js

@@ -18,6 +18,10 @@ export class QLine extends fabric.Group {
   interSectionPoints = []
   lengthTxt = 0
 
+  initPoints
+  initOption
+  initLengthTxt
+
   constructor(points, option = { isActiveLengthText: true }, lengthTxt) {
     // 소수점 전부 제거
     points.forEach((point) => {
@@ -33,6 +37,10 @@ export class QLine extends fabric.Group {
     const line = new fabric.Line(points, { ...option, strokeWidth: 1 })
     super([line], {})
 
+    this.initPoints = points
+    this.initOption = option
+    this.initLengthTxt = lengthTxt
+
     this.x1 = x1
     this.y1 = y1
     this.x2 = x2
@@ -117,15 +125,13 @@ export class QLine extends fabric.Group {
   }
 
   fromObject(object, callback) {
-    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
+    console.log('fromObject', object, callback)
-      delete object.objects
-      callback && callback(new fabric.Frindle(enlivenedObjects, object))
-    })
   }
 
   async = true
 
   toObject(propertiesToInclude) {
+    console.log('toObject')
     return fabric.util.object.extend(this.callSuper('toObject'), {
       length: this.length,
       line: this.line,
@@ -146,6 +152,13 @@ export class QLine extends fabric.Group {
       addLengthText: this.addLengthText,
       init: this.init,
       addControl: this.addControl,
+      initPoints: this.initPoints,
+      initOption: this.initOption,
+      initLengthTxt: this.initLengthTxt,
     })
   }
+
+  _set(key, value) {
+    this.callSuper('_set', key, value)
+  }
 }

src/hooks/useCanvas.js

@@ -117,7 +117,15 @@ export function useCanvas(id) {
     QLine.prototype.canvas = canvas
     QRect.prototype.canvas = canvas
 
-    fabric.QLine = QLine
+    fabric.QLine = fabric.util.createClass(fabric.Group, {})
+
+    // fromObject 메서드를 QLine 클래스에 직접 추가
+    fabric.QLine.fromObject = function (object, callback) {
+      const { initOption, initPoints, initLengthTxt } = object
+      fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
+        return callback(new QLine(initPoints, initOption, initLengthTxt))
+      })
+    }
   }
 
   /**
@@ -539,19 +547,35 @@ export function useCanvas(id) {
   }
 
   const addCanvas = () => {
-    const canvasState = canvas?.getObjects()
+    // const canvasState = canvas
 
-    canvasState.forEach((state) => {
+    const objs = canvas
-      console.log(state)
-    })
 
-    const str = JSON.stringify(canvasState)
+    console.log(objs)
+    const str = JSON.stringify(objs)
 
     canvas?.clear()
 
-    JSON.parse(str).forEach((state) => {
+    console.log(str)
-      canvas?.add(state)
+    console.log(JSON.parse(str))
-    })
+
+    // 역직렬화하여 캔버스에 객체를 다시 추가합니다.
+    canvas?.loadFromJSON(
+      JSON.parse(str),
+      function () {
+        // 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다.
+        canvas?.renderAll() // 캔버스를 다시 그립니다.
+        console.log('Objects are reloaded and rendered on canvas.')
+      },
+      function (o, object) {
+        // 각 객체가 로드될 때마다 호출됩니다.
+        console.log('Object loaded: ', o, object)
+      },
+    )
+
+    /*canvas?.loadFromJSON(JSON.parse(str), () => {
+      console.log('load done')
+    })*/
 
     /*const stateArr = canvasState.map((state) => state.getObject().getObjects())