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？

回答

相關問題