Fabric. JS iText set italics manually

Keep creating , Accelerate growth ！ This is my participation 「 Nuggets day new plan · 6 Yuegengwen challenge 」 Of the 29 God , Click to see the event details

---

Brief introduction

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

<br>

Whether in the rich text editor or in Word in , There are “ Italics ” function . and Fabric.js No exception . This article mainly explains in Fabric.js Use in IText Italicize the created text .

These include ：

• Set italics when creating text
• Let the user set italics manually

<br>

<br>

Initialize canvas

It is necessary to initialize the canvas , The content explained later will be developed based on the code in this section .

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

The initialization code is very simple , If you don't understand the above code, you can take a look first 《Fabric.js From entry to expansion 》

<br>

<br>

Set italics when creating text

IText To set italics, use italic perhaps oblique These two keywords , You can use either , This article USES the italic Explain .

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

To set italics during initialization , Just put the fontStyle Set to italic perhaps oblique that will do .

<br>

The above code is italicized in full text , If you just want to set a character , You can use the following method

//  Omitted code const iText = new fabric.IText('hello world', {  styles: {    0: {      1: {        fontStyle: 'italic'      }    }  }})

I will “e” Set to Italic .

Use styles It can be set line by line and word by word .“e” Located at 1 Xing di 2 Characters , The rows and columns are calculated from Subscript 0 At the beginning , therefore “e” The position is 0-1 .

<br>

<br>

Set italics manually

Manually set the italic division 2 In this case ：

1. Full Text Italic / Restore the default
2. The selected text is italicized / Restore the default

<br>

So that you can set it manually , I added a button to the page .

The operation is as shown in the figure

<button onclick="italic()"> Italics </button><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><!--  introduce  fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script>  const canvas = new fabric.Canvas('c') //  Create a canvas , And bind elements   const iText = new fabric.IText('hello world') //  Create text   canvas.add(iText) //  Add text to the canvas   function italic() {    let activeTxt = canvas.getActiveObject()    if (!activeTxt) return    if (activeTxt.isEditing) {      //  Edit state , Italicize the selected text or restore the default operation       const state = activeTxt.getSelectionStyles().find(item => item.fontStyle !== 'italic')      if (!state || (JSON.stringify(state) === '{}' && activeTxt['fontStyle'] === 'italic')) {        activeTxt.setSelectionStyles({ 'fontStyle': 'normal' })      } else {        activeTxt.setSelectionStyles({ 'fontStyle': 'italic' })      }    } else {      //  Selection status , Italicize the full text or restore the default operation       if (activeTxt['fontStyle'] === 'italic') {        activeTxt.fontStyle = 'normal'        let s = activeTxt.styles        for(let i in s) {          for (let j in s[i]) {            s[i][j].fontStyle = 'normal'          }        }      } else {        activeTxt.fontStyle = 'italic'        let s = activeTxt.styles        for(let i in s) {          for (let j in s[i]) {            s[i][j].fontStyle = 'italic'          }        }      }    }    canvas.renderAll()  }</script>

The idea and steps of the above code are ：

1. adopt canvas.getActiveObject() Method to get the currently selected object .
2. If no text is currently selected , No operation .
3. adopt isEditing Property to detect whether the text is in the editing state .
4. In editing state , Italicize the selected text or restore the default operation .
5. In the non editing state , Italicize the full text or restore the default operation .

<br>

The above is the main content of this article .

<br>

<br>

Code warehouse

Fabric.js IText Set italics manually

<br>

<br>

Recommended reading

《Fabric.js Control element level 》

《Fabric.js Top line 、 Center line （ Delete line ）、 Underline 》

《Fabric.js Activate the input box 》

《Fabric.js Output reduced JSON》

《Fabric.js Dynamically set the font size 》 give the thumbs-up + Focus on + Collection = Learned to