Fabric. JS activation input box

Brief introduction

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

<br>

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 .

<br>

<br>

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 .

<br>

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="canvasBox" width="600" height="600" 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('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 .

<br>

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 》

<br>

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 》

<br>

<br>

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 ~

<br>

<br>

Code warehouse

IText Activate the input box

<br>

<br>

Recommended reading

《Fabric.js Output reduced JSON》

《Fabric.js Zoom canvas 》

《Fabric.js IText Set the specified character color and background color 》

《console.log You can also use illustrations ！！！》

《 The front-end needs free online api Interface 》

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