Fabric. JS upper dash, middle dash (strikethrough), underline

Brief introduction

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

<br>

stay HTML Good ,Word Good , Basically, there are underscores and strikeouts （ Center line ）.

Fabric.js As an old card canvas library , Of course, it also provides Center line and Underline The configuration of , In addition, it also provides Top line Configuration of .

This article is about this 3 This kind of decorative thread is in fabric.js How to use in . In addition to initializing the configuration , It also supports project runtime , Let users dynamically configure .

This case uses IText , This component supports editing functions .

<br>

<br>

Set on initialization

This is an overline 、 Underlined and underlined documents ：

• Top line overline
• Center line linethrough
• Underline underline

<br>

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><script src="../../script/fabric.5.2.1.js"></script><script>  const canvas = new fabric.Canvas('c')  const iText = new fabric.IText('aaa',{    styles: {      0: {        0: { overline: true }, //  Top line         1: { linethrough: true }, //  Center line         2: { underline: true } //  Underline       }    }  })  canvas.add(iText)</script>

In this case, only 3 Letters a , And all in the same line .

styles Of the first element key by 0 It means the first line , Line number subscript from 0 Start .

About that

styles: {  0: { //  The first 1 That's ok     0:, //  The first 1 That's ok   The first 1 A word     1:, //  The first 1 That's ok   The first 2 A word     2:  //  The first 1 That's ok   The first 3 A word   }}

If you need a new line , Then it should be defined according to the line number . The method of line feed is to use... In the text content \n Do a new line .

Dynamic setting

In addition to setting the decorative line during initialization ,Fabric.js It also provides user manual settings at runtime . But the code is a little more complicated .

In fact, you can dynamically set the overline 、 The operation of underline and underline is the same , The only thing to change is the attribute name .

I take the middle line as an example , After that, you just need to change the property name .

<button onclick="linethrough()"> Center line </button><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><!--  introduce fabric --><script src="../../script/fabric.5.2.1.js"></script><script>  const canvas = new fabric.Canvas('c') //  Initialize canvas   const iText = new fabric.IText('hello wor\nld') //  Create text   canvas.add(iText)  function linethrough() {    let activeTxt = canvas.getActiveObject() //  Get the currently selected text     //  If no text is currently selected , Then do nothing     if (!activeTxt) return    //  Judge whether to enter the editing status     if (activeTxt.isEditing) {      //  Edit state       const state = activeTxt.getSelectionStyles().find(item => item.linethrough !== true)      //  If at present       if (!state || (JSON.stringify(state) === '{}' && activeTxt['linethrough'] === true)) {        //  If the middle dash line is currently set , Then cancel the line in the overall situation         activeTxt.setSelectionStyles({ 'linethrough': false })      } else {        //  If the middle dash is not currently set , Then add an upper and middle dash         activeTxt.setSelectionStyles({ 'linethrough': true })      }    } else {      //  Selection status       if (activeTxt['linethrough'] === true) {        activeTxt.linethrough = false        activeTxt.dirty = true;        let s = activeTxt.styles        for(let i in s) {          for (let j in s[i]) {            s[i][j].linethrough = false          }        }      } else {        activeTxt.linethrough = true        activeTxt.dirty = true;        let s = activeTxt.styles        for(let i in s) {          for (let j in s[i]) {            s[i][j].linethrough = true          }        }      }    }    canvas.renderAll()  }</script>

The above code mainly does these steps ：

1. Initialize canvas
2. Create text
3. Add text to the canvas
4. linethrough Method to add or remove a dash line

<br>

The main operating logic is written in linethrough There's a way .

linethrough The logic is as follows

1. Get the currently selected text
2. If it is not selected, no operation will be performed
3. If you choose , Determine whether to enter the editing state
4. Edit state
   1. Gets the underline status of the currently selected text
   2. If the selected text has a middle dash , Just cancel the middle line
   3. If the selected text does not have a middle dash , Just add a middle dash
5. If it is not in editing status , Just click iText Enter the box selection status
   1. If you need to cancel the dash line globally
      1. Global cancel
      2. Loop each character , And cancel the middle dash of each character
   2. You need to underline in the global settings
      1. Global settings
      2. Then set it individually character by character
6. Re render the canvas

<br>

<br>

Code warehouse

IText Dynamically set the decorative line

<br>

<br>

Recommended reading

《Fabric.js Dynamically set the font size 》

《Fabric.js Activate the input box 》

《Fabric.js Output reduced JSON》

《 this 18 A website can make your page background cool 》 give the thumbs-up + Focus on + Collection = Learned to