使用fabric.js在画布上绘制文本

时间:2011-10-19 09:46:21

标签: text canvas draw fabricjs

我想在画布上绘制文字。,如何做任何示例示例? 画布已经包含一些绘制的形状,我想在画布的顶部显示文本 我该怎么办?

3 个答案:

答案 0 :(得分:5)

另请注意,您需要实际加载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();

答案 1 :(得分:4)

查看How to render text教程。

这很简单:

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

答案 2 :(得分:1)

另外值得注意的是,您可能需要调整Cufon的offsetLeft以帮助正确定位文本。类似的东西:

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

面料的厨房水槽演示使用: http://kangax.github.com/fabric.js/lib/font_definitions.js