使用 fabric js 缩放后如何在形状上显示尺寸？

Question

我正在 canvas 使用 fabric js library.i 无法显示缩放形状的大小。我想画这样的形状：

我已经尝试过，它显示了带文本的矩形，但我有不止一个矩形，我想在它们缩放后显示所有矩形的大小：

 var rect1 = new fabric.Rect({
                         left: 100,
                         top: 50,
                         width: 200,
                         height: 100,
                         fill: 'white',
                         stroke: '#ccc',
                         bringToFront: true
                     });

 var t = new fabric.IText("200", {
  top:110,
  left: 100,
  width: 50,
  height:50,
  backgroundColor: '#FFFFFF',
  fill: '#000000',
  fontSize: 12,
  Scaling: false,
  hasRotatingPoint: false,
  transparentCorners: false,
  selectable: false,
  angle: 270,
  cornerSize: 7
});

 var group1 = new fabric.Group([ rect1, t,h ]); canvas.add(group1);`

Answer 1

function updateMeasures(evt) {
   var obj = evt.target;
   if (obj.type != 'group') {
   return;
   }
   var width = obj.getWidth();
   var height = obj.getWidth();
   obj._objects[1].text = width.toFixed(2) + 'px';
   obj._objects[1].scaleX= 1 / obj.scaleX;
   obj._objects[1].scaleY= 1 / obj.scaleY;
   obj._objects[2].text = height.toFixed(2) + 'px';
   obj._objects[2].scaleX= 1 / obj.scaleY;
   obj._objects[2].scaleY= 1 / obj.scaleX;
}
canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({width: 100, height: 50, top:0, left: 0, fill:'blue', stroke: 'red'});
var text = new fabric.Text('W',{top: 4, left: 100, fontSize: 16, originX: 'right'});
var text2 = new fabric.Text('H',{top: 50, left: 0, fontSize: 16, originX: 'left', angle: -90});
var group = new fabric.Group([rect, text, text2], {strokeWidth:0});
canvas.add(group);
canvas.on("object:scaling", updateMeasures);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

这背后的想法基本上是创建一个组、一个矩形和文本对象作为标签。这是一个基本实现，您应该将其用作特定解决方案的提示。如果你必须广泛使用它，你应该考虑创建你自己的子类来处理这个问题。这个特定的实现必须考虑组中的比例因子，而你真正测量的是组维度，它主要由缩放的矩形给出。 rect 的宽度和高度保持在 100 和 50，但组比例因子为您提供更大的视觉尺寸。

最后，我们使用 canvas 的事件 "object:scaling" 来运行每当任何对象在 canvas 上缩放时，我们都会更新和取消缩放文本。

使用 fabric js 缩放后如何在形状上显示尺寸？

how to display size on shape after scaled using fabric js?

javascript

canvas

fabricjs