원복

src/components/fabric/QPolygon.js

@@ -287,64 +287,50 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         this.canvas.remove(text)
       })
 
+    let points = this.getCurrentPoints()
+
     this.texts = []
-    const lines = this.lines
 
-    lines.forEach((line, i) => {
+    points.forEach((start, i) => {
-      const length = line.getLength()
+      const end = points[(i + 1) % points.length]
-      const { planeSize, actualSize } = line.attributes
+      const dx = Big(end.x).minus(Big(start.x))
-      const scaleX = line.scaleX
+      const dy = Big(end.y).minus(Big(start.y))
-      const scaleY = line.scaleY
+      const length = dx.pow(2).plus(dy.pow(2)).sqrt().times(10).round().toNumber()
-      const x1 = line.left
-      const y1 = line.top
-      const x2 = line.left + line.width * scaleX
-      const y2 = line.top + line.height * scaleY
 
-      let left, top
+      let midPoint
 
-      if (line.direction === 'right') {
+      midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
-        left = (x1 + x2) / 2
-        top = (y1 + y2) / 2 + 10
-      } else if (line.direction === 'top') {
-        left = (x1 + x2) / 2 + 10
-        top = (y1 + y2) / 2
-      } else if (line.direction === 'left') {
-        left = (x1 + x2) / 2
-        top = (y1 + y2) / 2 - 30
-      } else if (line.direction === 'bottom') {
-        left = (x1 + x2) / 2 - 50
-        top = (y1 + y2) / 2
-      }
 
-      const minX = line.left
+      const degree = Big(Math.atan2(dy.toNumber(), dx.toNumber())).times(180).div(Math.PI).toNumber()
-      const maxX = line.left + line.width
-      const minY = line.top
-      const maxY = line.top + line.length
-      const degree = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI
 
-      const text = new fabric.Textbox(planeSize ? planeSize.toString() : length.toString(), {
+      // Create new text object if it doesn't exist
-        left: left,
+      const text = new fabric.Text(length.toString(), {
-        top: top,
+        left: midPoint.x,
-        fontSize: this.fontSize.value,
+        top: midPoint.y,
-        minX,
+        fontSize: this.fontSize,
-        maxX,
-        minY,
-        maxY,
-        parentDirection: line.direction,
-        parentDegree: degree,
         parentId: this.id,
-        planeSize: planeSize ?? length,
+        minX: Math.min(start.x, end.x),
-        actualSize: actualSize ?? length,
+        maxX: Math.max(start.x, end.x),
-        editable: false,
+        minY: Math.min(start.y, end.y),
+        maxY: Math.max(start.y, end.y),
+        parentDirection: getDirectionByPoint(start, end),
+        parentDegree: degree,
+        dirty: true,
+        editable: true,
         selectable: true,
         lockRotation: true,
         lockScalingX: true,
         lockScalingY: true,
-        parent: this,
+        idx: i,
+        actualSize: this.lines[i].attributes?.actualSize,
+        planeSize: this.lines[i].attributes?.planeSize,
         name: 'lengthText',
+        parent: this,
       })
+
       this.texts.push(text)
       this.canvas.add(text)
+      this.canvas.renderAll()
     })
   },
   setFontSize(fontSize) {