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

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

1 个答案: