qLine 수정

src/components/Roof2.jsx

@@ -46,16 +46,12 @@ export default function Roof2() {
 
   const makeLine = () => {
     if (canvas) {
-      const line = new QLine([50, 50, 200, 200], {
+      const line = new QLine([50, 50, 200, 50], {
         stroke: 'black',
         strokeWidth: 2,
-        viewLengthText: true, // 이 속성이 true로 설정되면, 선분의 길이를 표시하는 텍스트가 생성됩니다.
-        selectable: false,
       })
 
       canvas?.add(line)
-
-      setTimeout(() => line.delete(), 500)
     }
   }
 

src/components/fabric/QLine.js

@@ -1,56 +1,65 @@
 import { fabric } from 'fabric'
+
 export default class QLine extends fabric.Line {
   length
-  group
+  text
 
   constructor(points, option) {
     super(points, option)
+    this.#init(option)
+    this.#addControl()
+  }
 
+  #init(option) {
+    // 선의 길이를 계산하여 length 속성을 초기화합니다.
+    const dx = this.x2 - this.x1
+    const dy = this.y2 - this.y1
+    this.length = Math.sqrt(dx * dx + dy * dy).toFixed(0)
+    this.viewLengthText = option.viewLengthText ?? true
+  }
+
+  #addControl() {
     this.on('added', () => {
-      if (this.viewLengthText) {
+      this.#addLengthText()
-        this.#addLengthText()
+    })
-      } else {
+
-        this.#makeGroupItem([this])
+    this.on('modified', (e) => {
-      }
+      const scaleX = this.scaleX
+      const scaleY = this.scaleY
+
+      // x1, y1, x2, y2 속성을 새로운 좌표로 설정합니다.
+      this.x1 = this.left
+      this.y1 = this.top
+      this.x2 = this.left + this.width * scaleX
+      this.y2 = this.top + this.height * scaleY
+
+      const dx = this.x2 - this.x1
+      const dy = this.y2 - this.y1
+      const length = Math.sqrt(dx * dx + dy * dy)
+      this.length = length.toFixed(0) // 선의 길이를 length 속성에 저장합니다.
+      this.#addLengthText()
     })
   }
 
-  delete() {
+  setViewLengthText(bool) {
-    this.group.canvas.remove(this.group)
+    this.viewLengthText = bool
-  }
+    this.#addLengthText()
-
-  #makeGroupItem(groupItems) {
-    const group = new fabric.Group(groupItems, {
-      selectable: false,
-      type: 'QRect',
-      group: this.selectable,
-      canvas: this.canvas,
-    })
-
-    this.group = group
-    this.canvas.add(group)
-    this.canvas.renderAll()
-    this.canvas.remove(this)
   }
 
   #addLengthText() {
-    const dx = this.x2 - this.x1
+    if (this.text) {
-    const dy = this.y2 - this.y1
+      this.canvas.remove(this.text)
-    const length = Math.sqrt(dx * dx + dy * dy)
+    }
 
-    this.length = length.toFixed(0)
+    if (this.viewLengthText) {
-
+      const text = new fabric.Text(this.length, {
-    const text = new fabric.Text(this.length, {
+        left: (this.x1 + this.x2) / 2,
-      left: (this.x1 + this.x2) / 2,
+        top: (this.y1 + this.y2) / 2,
-      top: (this.y1 + this.y2) / 2,
+        fontSize: 16,
-      fontSize: 16,
+        selectable: false,
-      selectable: false,
+      })
-    })
+      this.text = text
-
+      this.canvas.add(text)
-    this.#makeGroupItem([this, text])
+    }
-  }
-
-  getInfo() {
-    return this
   }
 }