使用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