Text

Supported operations

  1. Multiline support Native text methods unfortunately simply ignore new lines.
  2. Text alignment Left, center, right. Useful when working with multiline text.
  3. Text background Background also respects text alignment.
  4. Text decoration Underline, overline, strike-through.
  5. Line height Useful when working with multiline text.
  6. Char spacing Makes text more compact or more spaced
  7. Subranges apply colors and properties to subranges of your text object
  8. Multibyte support emoticons!
  9. On canvas editing with the interactive class you can type text directly over the canvas

For example,

Simple initialization

 var text = new fabric.Text('hello world', { left: 100, top: 100 });
 canvas.add(text);
Copy the code

fontFamily

var comicSansText = new fabric.Text("I'm in Comic Sans", {
    fontFamily: 'Comic Sans'
});
Copy the code

Set the font

fontSize

var text40 = new fabric.Text("I'm at fontSize 40", {
    fontSize: 40
});
Copy the code

Set font size

fontWeight

var boldText = new fabric.Text("I'm at bold text", {
    fontWeight: 'bold'
});
Copy the code

textDecoration

 var underlineText = new fabric.Text("I'm an underlined text", {
    underline: true
});
Copy the code

shadow

Var shadowText1 = new fabric.Text("I'm a Text with shadow", {shadow: 'rgba(0,0,0,0.3) 5px 5px 5px'});Copy the code

Set the shadow

fontStyle

 var italicText = new fabric.Text("A very fancy italic text", {
    fontStyle: 'italic',
    fontFamily: 'Delicious'
});
Copy the code

stroke and strokeWidth

var textWithStroke = new fabric.Text("Text with a stroke", {
    stroke: '#ff1318',
    strokeWidth: 1
   });
Copy the code

textAlign

var text = 'this is\na multiline\ntext\naligned right! '; var alignedRightText = new fabric.Text(text, { textAlign: 'right' });Copy the code

lineHeight

 var lineHeight3 = new fabric.Text('Lorem ipsum Lorem\nLorem ipsum Lorem\n', {
    lineHeight: 3
});
Copy the code

Click on the event

var text = 'this is\na multiline\ntext\nwith\ncustom lineheight\n&background'; Var textWithBackground = new fabric.Text(Text, {textBackgroundColor: 'RGB (0,200,0)'}); canvas.add(textWithBackground); textWithBackground.on('selected', function() { console.log('selected'); });Copy the code

reference

  1. The website address

To contact me

Pay attention to wechat: big front-end said, to obtain the code case mentioned in the article. If you have any problem with the library, please contact me and add my WX: MeetBC. Any topic about the front end is welcome.