search

Home >Web Front-end >JS Tutorial >How to lock the rotation of a rectangle using FabricJS?

How to lock the rotation of a rectangle using FabricJS?

王林
王林forward
2023-08-24 19:29:081264browse

How to lock the rotation of a rectangle using FabricJS?

In this tutorial, we will learn how to lock the rotation of a rectangle using FabricJS. Just as we can specify the position, color, opacity, and dimensions of a rectangular object within the canvas, we can also specify whether it is rotated. This can be done using the lockRotation attribute.

Syntax

new fabric.Rect({ lockRotation : 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 lockRotation is an attribute.

Option Key

  • lockRotation - This property accepts a Boolean value. If we give it a "true" value, the object rotation will be locked.

Example 1

Default behavior of rectangle objects in canvas

Let's look at a code example to understand how The default behavior of rectangular objects when using the lockRotation property. By default, we can rotate a rectangular object counterclockwise or clockwise. 

<!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 of a Rectangle object in the canvas</h2>
   <p>You can try rotating the rectangle to see the default behaviour</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "black",
         padding: 9,
         stroke: "#483d8b",
         strokeWidth: 5,
      });

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

Example 2

Pass lockRotation as key with True value

In this example we will see how to stop the function usage of rectangle lockRotation property to rotate the object. As we can see, as soon as we try to rotate the rectangular object, the cursor is displayed which is not allowed. This means that rotation operations are no longer allowed. 

<!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 lockRotation as key with a True value</h2>
   <p>Try rotating the object and you will see a not-allowed cursor on the rotate handle</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "black",
         padding: 9,
         stroke: "#483d8b",
         strokeWidth: 5,
         lockRotation: true,
      });

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

The above is the detailed content of How to lock the rotation of a rectangle 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：How to center an Image object in the current viewport of the canvas using FabricJS?Next article：How to center an Image object in the current viewport of the canvas using FabricJS?

Related articles

See more