How to exit the editing state in IText using FabricJS?

In this tutorial, we will learn how to exit the editing state in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Similarly, we can use the exitEditing method to exit the editing state.

grammar

exitEditing(): Itext.IText

Example 1

Use only the isEditing attribute

Let's look at a code example to see what an IText object looks like when using the isEditing property alone and passing a true value to turn on editing mode. Since we are not using the exitEditing() method, our IText object will be in editing mode.

     
  
Using the isEditing property only
 
You can see that the editing mode is on
    

Example 2

Use the exitEditing method with the isEditing attribute

Let's look at a code example to see what an IText object looks like when the exitEditing method is used in conjunction with the isEditing property. Since we passed a true value to the isEditing property, the IText object should be in editing mode. However, once we use the exitEditing method, the editing mode exits.

     
  
Using the exitEditing method along with the isEditing property
 
You can see that the editing mode is off even though we have passed the isEditing property a true value
    

The above is the detailed content of How to exit the editing state in IText using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!