QPolygon addLengthText 수정

src/components/fabric/QPolygon.js

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