How to lock the rotation of a rectangle using FabricJS?-JS Tutorial-php.cn

How to lock the rotation of a rectangle using FabricJS?

王林

Release： 2023-08-24 19:29:08

forward

1272 people have browsed it

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)

Copy after login

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>

Copy after login

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>

Copy after login

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!