How to use FabricJS to enter editing state using functions in IText?-JS Tutorial-php.cn

How to use FabricJS to enter editing state using functions in IText?

王林

Release： 2023-08-28 12:01:17

forward

982 people have browsed it

How to use FabricJS to enter editing state using functions in IText?

In this tutorial, we will learn how to enter the editing state using the IText feature in 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 enterEditing method to enter the editing state.

grammar

enterEditing(): fabric.IText

Copy after login

Example 1

Do not use the enterEditing method

Let's look at a code example to see what an IText object looks like without using the EnterEditing method.

<!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>Without using the enterEditing method</h2>
   <p>You can see that the editing mode is off</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",
      });

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

Copy after login

Example 2

Use enterEditing method

Let's look at a code example to see what the IText object looks like when entering the editing state using the enterEditing method. In this case, our itext object will now be in edit mode because the cursor is there.

<!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>Without using the enterEditing method</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",
      });

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

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

Copy after login

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