How to hide the control border of a rectangle using FabricJS?-JS Tutorial-php.cn

How to hide the control border of a rectangle using FabricJS?

WBOY

Release： 2023-08-23 15:49:02

forward

1035 people have browsed it

How to hide the control border of a rectangle using FabricJS?

In this tutorial, we will learn how to hide the control border of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we need to create an instance of the fabric.Rect class and add it to the canvas.

We can customize the control border in many ways, such as adding a specific color to it, a dotted line mode, etc. However, we can also eliminate the borders entirely by using the hasBorders property.

Syntax

new fabric.Rect({ hasBorders: Boolean }: Object)

Copy after login

Parameters

Options (optional) − This parameter is an object, Used to provide additional customizations for the rectangle. Using this parameter, you can change the color, cursor, stroke width, and many other properties related to objects with border properties.

Option key

hasBorders − This property accepts a boolean value. When set to false, the control borders will will not be rendered. It helps with rendering control borders. The default value is true.

Example 1

Rectangle object controls the default appearance of the border

Let's look at a code example showing the control of a rectangle The default appearance of the border. Since the default value of the hasBorders property is True, borders are rendered when a rectangular object is selected.

<!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 appearance of controlling borders of a rectangle object</h2>
   <p>Select the rectangle to see the default appearance of controlling borders</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 a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
      });

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

Copy after login

Example 2

Use hasBorders as the key and assign it a value of "false"

If the hasBorders attribute is assigned a false value, the border will not be rendered again. This means that when we select the rectangular object, the control border will be hidden.

<!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 hasBorders as key and assigning a False value to it</h2>
   <p>Select the rectangle to see that the controlling borders have now been hidden</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 a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
         hasBorders: false,
      });

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

Copy after login

The above is the detailed content of How to hide the control border of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!