Fabric. JS iText set italics manually

Brief introduction

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

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

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=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<!--  introduce  fabric.js -->
<script src=&quot;https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js&quot;></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 》

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 .

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

 .

Set italics manually

Manually set the italic division 2 In this case ：

• Full Text Italic  /  Restore the default

• The selected text is italicized  /  Restore the default

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

The operation is as shown in the figure

<button onclick=&quot;italic()&quot;> Italics </button>
<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<!--  introduce  fabric.js -->
<script src=&quot;https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js&quot;></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 ：

• adopt  
  canvas.getActiveObject()
    Method to get the currently selected object .

• If no text is currently selected , No operation .

• adopt  
  isEditing
    Property to detect whether the text is in the editing state .

• In editing state , Italicize the selected text or restore the default operation .

• In the non editing state , Italicize the full text or restore the default operation .

The above is the main content of this article .

Code warehouse

Fabric.js IText  Set italics manually