Fabric. JS iText sets the color and background color of the specified text

Brief introduction

give the thumbs-up + Focus on + Collection = Learned to

<br>

IText yes Fabric.js One of the Editable text The elements of .

To set the text color , You can set fill .

but fill Will set the color of all text , If you only want to change the color of the specified text , Only fill It is not so easy to realize .

This article is about Set the specified text color and background color .

<br>

Set the text color or background color , It needs to be discussed according to the situation ：

1. Full text settings
2. Sets the specified text color （ A single ）
3. Sets the specified text color （ Multiple lines ）

Next, I will explain the above situations one by one .

<br>

<br>

start

<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas><!--  introduce  Fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script>  //  Initialize canvas   const canvas = new fabric.Canvas('c')  //  Create text   const iText = new fabric.IText('hello world')  //  Add text to the canvas   canvas.add(iText)</script>

First turn on the Fabric.js introduce , Then initialize the canvas . If you are not familiar with this concept , You can see Fabric.js From entry to expansion .

Finally through new fabric.IText Create a piece of text and add it to the canvas .

<br><br>

Full text settings

//  Omitted code const iText = new fabric.IText('hello world', {  fill: 'pink'})

fill You can set the fill color of the text . stay Fabric.js This attribute is used to set the color in , and css Set the text color to use color Dissimilarity ~

<br>

<br>

A single ： Sets the specified text color

const iText = new fabric.IText('hello world', {  styles: {    0: {      1: {        fill: '#f00' //  Text color ,#f00 It's red       }    }  }})

When I first saw the above code, I also felt a little strange , After a careful look, I found the intention of this design .

styles It's an object .

styles: { //  Set the style   0: { //  The first 1 That's ok     1: { //  The first 2 Characters       //  The style to set     }  }}

The above code means . The line number and character position are from 0 From the beginning , A bit like array subscript .

Our example only has 1 That's ok , So the line number is 0.

e The subscript of is 1 . So the code above puts e Set to red . Other characters are the default colors .

<br>

<br>

Multiple lines ： Sets the specified text color

const iText = new fabric.IText('hello\nworld', {  styles: { //  Set the style     0: { //  The first 1 That's ok       1: {        fill: '#f00' //  Text color       }    },    1: { //  The first 2 That's ok       2: {        fill: 'hotpink'      }    }  }})

IText The newline of is \n To express the .

This example should Amendment No 1 Xing di 2 The text color of characters is red , The first 2 Xing di 3 Characters are bright pink .

You can understand this operation from the comments in the code .

<br>

<br>

Set the text background color

const iText = new fabric.IText('hello world', {  styles: {  0: {    1: {      textBackgroundColor: 'yellowgreen', //  Background color     }  },})

The same principle as setting the text color , Just change the keyword .

textBackgroundColor Translated into Chinese is the text background color .

<br>

<br>

Code warehouse

Fabric Set up IText Specify character color and background color

<br>

<br>

Recommended reading

《Fabric.js How to use the brush ？》

《Fabric.js Circular brush 》

《 pure CSS Red brick background wall 》

《Fabric.js Draw ellipses freely 》

give the thumbs-up + Focus on + Collection = Learned to