Fabric. JS activation input box

Brief introduction

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

stay  

HTML

  in ,

input

  The input box has 2 Methods of auto focusing , The simplest is in  

input

  Add on label  

autofocus

  attribute .

The way to click again is to use  

JS

  Get input box element , Call again  

focus

  Event check input box .

stay  

Fabric.js

  in ,

IText

  Components provide a similar approach .

Practice

Fabric.js

  Of  

IText

  Is an editable text box , You can enter text while the project is running , The function is actually the same as  

HTML

  Of  

input

  almost , Can let the user input .

By default

stay  

Fabric.js

  in , If you're creating  

IText

  No text was added to the , It's hard to see where your input box is on the canvas with the naked eye .

<canvas id=&quot;canvasBox&quot; width=&quot;600&quot; height=&quot;600&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('canvasBox')
 
 const iText = new fabric.IText('', {
 left: 100, //  The distance from the input box to the left of the canvas
 top: 100, //  The distance from the input box to the top of the canvas
 padding: 7 //  Set the inside margin of the input box
 })
 
 canvas.add(iText) //  Add an input box to the canvas
</script>


The canvas and input box are created , But it's hard to find the input box with the naked eye .

Activate the input box

To solve these problems , Input box can be activated .

//  Omitted code
iText.enterEditing()


use  

enterEditing()

  Method to activate the input field . At this point, you can see that the position of the cursor is flashing .

《enterEditing  file 》

Further

Use  

enterEditing()

  The rear input box is activated , You can also see the cursor flashing .

But is that the end of it ？

We can go further , coordination  

Fabric Canvas

  Of  

setActiveObject()

  Method , Activate the selected object .

In this way, the effect of selecting the input box will be more obvious .

//  Omitted code

canvas.add(iText).setActiveObject(iText)

iText.enterEditing()


It can be seen from the above figure that , add  

setActiveObject()

  after , The effect is more obvious .

《setActiveObject  file 》

summary

Fabric.js

  It's not hard , It is better than using native  

Canvas

  It's a lot easier .

Use  

Fabric.js

  The most important thing is to read more documents , Then put multiple  

api

  Use in combination , Can create a variety of effects ~

Code warehouse

IText  Activate the input box