Home >Web Front-end >JS Tutorial >How to disable IText selectivity using FabricJS?

How to disable IText selectivity using FabricJS?

王林forward: 2023-08-24 20:13:021345browse

如何使用 FabricJS 禁用 IText 的选择性？

In this tutorial, we will learn how to disable IText selectivity 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. In order to modify an object, we have to select it in FabricJS. However, we can change this behavior by using the selectable attribute.

grammar

new fabric.IText(text: String, { selectable: Boolean }: Object)

parameter

text - This parameter accepts String, which is the text string we want to display in the IText object.
Options (optional) - This parameter is an object that provides additional customization to our object. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with an object whose properties can be selected.

Option key

selectable - This property accepts a boolean value. When it is assigned a "false" value, the object cannot be selected for modification. Its default value is true.

Example 1

When the default behavior or optional property is set to "true"

Let's look at a code example to understand how an object behaves when the selectable property is set to true by default. When the selectable property is set to true, we can select an object, move it around the canvas and modify it.

<!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>Default behaviour or when selectable property is set to ‘true’</h2>
   <p>You can try moving the itext object around the canvas or scaling it to prove that it's selectable</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.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#6ae18b",
         }
      );

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

Example 2

Pass optional attributes as keys with a value of "false"

In this example, we assigned a false value to the optional attribute. This means we can no longer select IText objects for modification.

<!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>Passing selectable property as key with “false” value</h2>
   <p>You can see that the itext object is no longer selectable</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.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#6ae18b",
            selectable: false,
         }
      );

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

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

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript program to swap nodes in a linked list without exchanging dataNext article：JavaScript program to swap nodes in a linked list without exchanging data

See more