FabricJS。如何添加控件中显示的尺寸？

Question

如何在屏幕截图中添加显示控件的尺寸？

Answer 1

创建一个文本对象并将其隐藏。当你正在剥削对象时，将比例宽度和高度设置为隐藏文本并使其可见。在对象上修改后，将text设置为false。

<强> 样本

var canvas = new fabric.Canvas("c");
canvas.setHeight(200);
canvas.setWidth(300);
var dimText = new fabric.Text("demo", {
  fontSize: 15,
  visible: false
});
canvas.add(dimText);
var circle = new fabric.Circle({
  left: 15,
  top: 15,
  radius: 20,
  fill:'',
  stroke: 'red'
});
canvas.add(circle);
var text = new fabric.Text("2018", {
  padding: 30,
  lineHeight: 30
});
canvas.add(text);
canvas.centerObject(text);
text.setCoords();
canvas.on('object:scaling', function(option) {
  var object = option.target;
  var pointer = canvas.getPointer(option.e);
  dimText.set({
    left: pointer.x - 20,
    top: pointer.y - 20,
    text: parseInt(object.width * object.scaleX) + 'x' + parseInt(object.height * object.scaleY),
    visible: true
  })
});
canvas.on('object:modified', function(option) {
  dimText.set('visible', false);
});

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<canvas id="c"></canvas>