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

我正在使用优秀的Fabric.js在画布中绘制一些文本。当我为IText对象指定一个自定义大小（比如一个200x200的矩形）时，看起来Farbric.js强制对象的宽度和高度适合文本。Fabric.js：如何将自定义大小设置为文本或IText？

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 
});

这里是我的问题小提琴： “Hello World” 的http://jsfiddle.net/K52jG/4/

在这个例子中，我想要的文本将在200x200框中。有没有可能做到这一点，以及如何？

来源

2014-01-17 Derek

't.setFontSize（36）' – kangax

Thks @ kangax，但它不完全是我的意思。我想在200x200的IText框中保留字体大小为12。 – Derek

文本框取决于字体大小;你不能相互独立地改变它们 – kangax

OK，是因为它是不可能的，最好的办法，我发现是窝在一个矩形对象iText的框，使用组在这个小提琴

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

来源

2014-01-20 10:21:07 Derek

但与此解决方案，文本无法编辑。 CMIIW – Praditha

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

回答

相关问题