search

Home >Web Front-end >JS Tutorial >How to exit the editing state in IText using FabricJS?

How to exit the editing state in IText using FabricJS?

PHPz
PHPzforward
2023-09-07 14:29:101148browse

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. 

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the isEditing property only</h2>
   <p>You can see that the editing mode is on</p>
   <canvas id="canvas"></canvas>
   
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
         isEditing: true,
      });

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

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. 

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the exitEditing method along with the isEditing property</h2>
   <p>You can see that the editing mode is off even though we have passed the isEditing property a true value</p>
   <canvas id="canvas"></canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
         isEditing: true,
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using the exitEditing method
      itext.exitEditing();
   </script>
</body>
</html>

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!

对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to change text and images by clicking a button in JavaScript?Next article：How to change text and images by clicking a button in JavaScript?

Related articles

See more