Question

我正在使用fabric js library在画布上工作。我无法显示缩放形状的大小。我想绘制形状如下：

我试过，它显示带有文字的ractangle，但我有多个ractangle，我希望在缩放后显示所有尺寸：

 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给出。 rect的宽度和高度保持在100和50，但是组比例因子为您提供了更大的视觉尺寸。

最后，我们使用画布的事件“object：scaling”来在画布上任何对象缩放时运行我们的更新和取消文本。

如何在使用fabric js缩放后显示形状上的大小？

1 个答案: