moving 추가

src/components/fabric/QLine.js

@@ -23,6 +23,10 @@ export default class QLine extends fabric.Line {
       this.#addLengthText()
     })
 
+    this.on('moving', () => {
+      this.#addLengthText()
+    })
+
     this.on('modified', (e) => {
       const scaleX = this.scaleX
       const scaleY = this.scaleY

src/components/fabric/QPolygon.js

@@ -41,6 +41,10 @@ export default class QPolygon extends fabric.Polygon {
       this.#addLengthText()
     })
 
+    this.on('moving', () => {
+      this.#addLengthText()
+    })
+
     this.on('removed', (e) => {
       this.#text.forEach((text) => {
         this.canvas.remove(text)
@@ -62,17 +66,27 @@ export default class QPolygon extends fabric.Polygon {
     const scaleX = this.scaleX
     const scaleY = this.scaleY
 
-    for (let i = 0; i < this.points.length; i++) {
-      const start = this.points[i]
-      const end = this.points[(i + 1) % this.points.length]
+    const points = this.getCurrentPoints()
 
-      const dx = (end.x - start.x) * scaleX
-      const dy = (end.y - start.y) * scaleY
+    for (let i = 0; i < points.length; i++) {
+      const start = this.getCurrentPoints()[i]
+      const currentStart = this.getCurrentPoints()[i]
+      const end =
+        this.getCurrentPoints()[(i + 1) % this.getCurrentPoints().length]
+      const currentEnd =
+        this.getCurrentPoints()[(i + 1) % this.getCurrentPoints().length]
+      const dx = end.x - start.x
+      const dy = end.y - start.y
       const length = Math.sqrt(dx * dx + dy * dy)
 
+      const midPoint = new fabric.Point(
+        (currentStart.x + currentEnd.x) / 2,
+        (currentStart.y + currentEnd.y) / 2,
+      )
+
       const text = new fabric.Text(length.toFixed(0), {
-        left: ((start.x + end.x) / 2) * scaleX,
-        top: ((start.y + end.y) / 2) * scaleY,
+        left: midPoint.x,
+        top: midPoint.y,
         fontSize: 16,
         selectable: false,
       })
@@ -81,6 +95,18 @@ export default class QPolygon extends fabric.Polygon {
     }
   }
 
+  getCurrentPoints() {
+    const scaleX = this.scaleX
+    const scaleY = this.scaleY
+
+    return this.points.map((point) => {
+      return {
+        x: point.x * scaleX + this.left,
+        y: point.y * scaleY + this.top,
+      }
+    })
+  }
+
   #distanceFromEdge(point) {
     const vertices = this.points
     let minDistance = Infinity

src/components/fabric/QRect.js

@@ -44,6 +44,10 @@ export default class QRect extends fabric.Rect {
         this.canvas.remove(text)
       })
     })
+
+    this.on('moving', () => {
+      this.#addLengthText()
+    })
   }
   #addLengthText() {
     if (this.#text.length > 0) {