Нарисуйте текст на холсте, используя fabric.js

Question

Я хочу нарисовать текст на холсте. Как это сделать на примере? Холст уже содержит нарисованную форму, я хочу показать текст поверх этой фигуры на холсте Как я могу это сделать?

Answer 1

Также имейте в виду, что вам действительно нужно загрузить шрифт cufon. При использовании Fabric.js нет шрифта по умолчанию.

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

Есть так много шрифтов, доступных с http://www.cufonfonts.com/

В этом случае автор планирует устранить необходимость в куфоне. Обсуждено здесь: 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

Взгляните на Как визуализировать текст учебник.

Это так просто, как:

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

Answer 3

Также стоит отметить, что вам может понадобиться настроить offsetLeft Cufon, чтобы помочь правильно расположить текст.Примерно так:

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

Демо из кухонной раковины из ткани использует это: http://kangax.github.com/fabric.js/lib/font_definitions.js