fabric.jsを使用してキャンバスにテキストを描く

Question

キャンバスにテキストを描画したいのですが、どのようにサンプルを作成するのですか？ キャンバスにはすでにいくつかの図形が描かれていますが、キャンバスにその図形の上にテキストを表示したい どうすればいいですか？

Answer 1

はまた、あなたが実際にcufonフォントをロードしている必要があることに注意してください。 Fabric.jsを使用しているときにデフォルトのフォントはありません。

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

http://www.cufonfonts.com/

から入手できるので、多くのフォントこれは、著者がcufonの必要性を取り除くことを計画している場合であることがあります。ここで議論する：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

あなたは正しくテキストを配置助けるためにCufonのoffsetLeftを調整する必要があることは注目に値します。

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

生地の台所の流しのデモは、これを使用しています：ような何か http://kangax.github.com/fabric.js/lib/font_definitions.js