使用fabric.js在畫布上繪製文本

Question

我想在畫布上繪製文本，怎樣做它的任何示例示例？ 畫布已經包含了一些繪製的形狀，我想在畫布上顯示該形狀的頂部文字 我該怎麼做？

Answer 1

另外要注意，你需要實際已加載了的Cufón字體。使用Fabric.js時沒有默認字體。

<script src="fabric.js"></script> 
<script src="cufon.calibri.js"></script> 

有從http://www.cufonfonts.com/

這是筆者上消除了對的Cufón需要規劃的情況下如此多的字體。這裏討論：Fabric.js + Google Fonts

如果你想呈現一個塊，則該塊裏面的一些文字。我會做這樣的事情。

//Render the block 
var block = canvas.add(new fabric.Rect({ 
    left: 100, 
    top: 100, 
    fill: 'blue' 
})); 

//Render the text after the block (so that it is in front of the block) 
var text = canvas.add(new fabric.Text('I love fabricjs', { 
    left: block.left, //Take the block's position 
    top: block.top, 
    fill: 'white' 
})); 

//Render the text and block on the canvas 
//This is to get the width and height of the text element 
canvas.renderAll(); 

//Set the block to be the same width and height as the text with a bit of padding 
block.set({ width: text.width + 15, height: text.height + 10 }); 

//Update the canvas to see the text and block positioned together, 
//with the text neatly fitting inside the block 
canvas.renderAll(); 

Answer 2

看看How to render text教程。

很簡單：

canvas.add(new fabric.Text('foo', { 
    fontFamily: 'Delicious_500', 
    left: 100, 
    top: 100 
})); 

Answer 3

另外值得一提的是，你可能需要調整的Cufón的offsetLeft幫助正確定位文本。喜歡的東西：

Cufon.fonts[your-fontname-in-lowercase-here].offsetLeft = 120; 

織物的廚房水槽演示使用這樣的： http://kangax.github.com/fabric.js/lib/font_definitions.js