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

Brief introduction

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

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 .

Set on initialization

This is an overline 、 Underlined and underlined documents ：

• Top line  overline

• Center line  linethrough

• Underline  underline

<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<script src=&quot;../../script/fabric.5.2.1.js&quot;></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=&quot;linethrough()&quot;> Center line </button>

<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<!--  introduce fabric -->
<script src=&quot;../../script/fabric.5.2.1.js&quot;></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 ：

• Initialize canvas

• Create text

• Add text to the canvas

• linethrough
    Method to add or remove a dash line

The main operating logic is written in  

linethrough

  There's a way .

linethrough

  The logic is as follows

• Get the currently selected text

• If it is not selected, no operation will be performed

• If you choose , Determine whether to enter the editing state

• Edit state

• Gets the underline status of the currently selected text

• If the selected text has a middle dash , Just cancel the middle line

• If the selected text does not have a middle dash , Just add a middle dash

• If it is not in editing status , Just click  
  iText
    Enter the box selection status

• If you need to cancel the dash line globally

• Global cancel

• Loop each character , And cancel the middle dash of each character

• You need to underline in the global settings

• Global settings

• Then set it individually character by character

• Re render the canvas

Code warehouse

IText  Dynamically set the decorative line