Fabric.js：如何将自定义大小设置为 Text 或 IText？

Question

我正在使用出色的 Fabric.js 在画布中绘制一些文本。 当我为 IText 对象指定自定义大小（假设为 200x200 矩形）时，似乎 Farbric.js 强制对象的宽度和高度适合文本。

var t = new fabric.IText("Hello world !", {
  top: 100,
  left: 100,
  width: 200,
  height:200,
  backgroundColor: '#FFFFFF',
  fill: '#000000',
  fontSize: 12,
  lockScalingX: true,
  lockScalingY: true,
  hasRotatingPoint: false,
  transparentCorners: false,
  cornerSize: 7
});

这是我的问题的小提琴： http : //jsfiddle.net/K52jG/4/

在这个例子中，我想要“Hello World！” 文本位于 200x200 框中。 是否有可能做到这一点，以及如何做到这一点？

Answer 1

好的，因为这是不可能的，所以我发现的最好方法是使用 Group 将 IText 框嵌套在 Rectangle 对象中

var r = new fabric.Rect({
    width: 200, 
    height: 200, 
    fill: '#FFFFFF',
  });


// create a rectangle object
var t = new fabric.IText("Hello world !", {
  backgroundColor: '#FFFFFF',
  fill: '#000000',
  fontSize: 12,
  top : 3,


});


var group = new fabric.Group([ r, t ], {
  left: 100,
  top: 100,
  lockScalingX: true,
  lockScalingY: true,
  hasRotatingPoint: false,
  transparentCorners: false,
  cornerSize: 7


});

这个小提琴中的例子： http : //jsfiddle.net/4HE3U/1/

注意：我必须为文本设置一个“顶部”值，因为它是开箱即用的。 该值似乎是：fontSize / 4