fabric.js를 사용하여 캔버스에 텍스트를 그립니다.

Question

캔버스에 텍스트를 그립니다. 예제 예제를 어떻게 작성합니까? 캔버스에 이미 일부 모양이 그려져 있습니다. 캔버스에 그 모양의 위쪽에 텍스트를 표시하고 싶습니다. 어떻게 할 수 있습니까?

Answer 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(); 

Answer 2

자습서 How to render text을 살펴보십시오.

그것은 간단합니다 같은 :

또한

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

Answer 3

제대로 도움이되는 텍스트의 위치를 ​​Cufon의 offsetLeft을 조정해야 할 수도 있음을 주목할 필요. 뭔가 같은 :

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

직물의 부엌 싱크대 데모이를 사용 http://kangax.github.com/fabric.js/lib/font_definitions.js