javascript - Fabric .js : How to set a custom size to Text or IText?

Question

我正在使用出色的 Fabric.js 在 Canvas 中绘制一些文本。当我为我的 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
});

这是解决我的问题的 fiddle :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


});

此 fiddle 中的示例:http://jsfiddle.net/4HE3U/1/

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