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

Posted 2023-03-25

【中文标题】使用 fabric.js 在画布上绘制文本

【英文标题】：Draw text on canvas using fabric.js

【发布时间】：2011-12-10 18:54:36

【问题描述】：

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

【参考方案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();

【参考方案2】：

看看How to render text教程。

很简单：

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

【参考方案3】：

另外值得注意的是，您可能需要调整 Cufon 的 offsetLeft 以帮助正确定位文本。比如：

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

织物的厨房水槽演示使用了这个： http://kangax.github.com/fabric.js/lib/font_definitions.js