search

Home >Web Front-end >JS Tutorial >How to hide the control corners of a rectangle using FabricJS?

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

王林
王林forward
2023-08-31 18:05:08663browse

如何使用 FabricJS 隐藏矩形的控制角？

In this tutorial, we will learn how to hide the control corners of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we must create an instance of the Fabric.Rect class and add it to the canvas. An object's control corners allow us to increase or decrease its proportions, stretch it, or change its position.

We can customize the control corner in many ways, such as adding a specific color to it, changing its size, etc. We can also hide them using the hasControls property.

Syntax

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

Parameters

  • Options (optional) - This parameter is a ## that provides additional customization #Object to our rectangle. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties related to the object for which hasControls is a property.

Option Key

  • hasControls - This property accepts a boolean value that allows us to display Or hide the control corners of actively selected objects. Its default value is true.

Example 1

Controlling the default appearance of corners

Let us see the code that shows the default appearance of controlling corners Example. Since the default value of the hasControls property is True, the control corners are not 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>Default appearance of controlling corners</h2>
   <p>Select the rectangle to see the default appearance of controlling corners</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>

Example 2

Pass hasControls as key and assign it False value

In this example we will see how to To hide control corners use the hasControls property. We need to assign False value to hasControls key. By doing this, the control corners 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 hasControls as key and assigning it a False value</h2>
   <p>Select the rectangle and observe that its controlling corners are 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,
         hasControls: false,
      });

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

The above is the detailed content of How to hide the control corners of a rectangle 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 get an SVG representation of a line using FabricJS?Next article：How to get an SVG representation of a line using FabricJS?

Related articles

See more