[英]Draw text on canvas using fabric.js
我想在画布上绘制文本。如何做任何示例? 画布已经包含一些绘制的形状,我想在画布上该形状的顶部显示文本我该怎么做?
另请注意,您需要实际加载 cufon 字体。 使用 Fabric.js 时没有默认字体。
<script src="fabric.js"></script>
<script src="cufon.calibri.js"></script>
http://www.cufonfonts.com/ 上有很多可用的字体
在这种情况下,作者正计划消除对 cufon 的需求。 此处讨论: Fabric.js + Google 字体
如果您想渲染一个块,那么该块内的一些文本。 我会做这样的事情。
//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();
看看如何呈现文本教程。
这很简单:
canvas.add(new fabric.Text('foo', {
fontFamily: 'Delicious_500',
left: 100,
top: 100
}));
另外值得注意的是,您可能需要调整 Cufon 的 offsetLeft 以帮助正确定位文本。 就像是:
Cufon.fonts[your-fontname-in-lowercase-here].offsetLeft = 120;
织物的厨房水槽演示使用这个: http : //kangax.github.com/fabric.js/lib/font_definitions.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.