How to disable center rotation of a rectangle using FabricJS?-JS Tutorial-php.cn

How to disable center rotation of a rectangle using FabricJS?

王林

Release： 2023-09-09 19:13:12

forward

1060 people have browsed it

How to disable center rotation of a rectangle using FabricJS?

In this tutorial, we will learn how to disable centered rotation 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. By default, all objects in FabricJS use their center as the rotation point. However, we can change this behavior using the centeredRotation property.

Syntax

new fabric.Rect({ centeredRotation: 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 the color, cursor, stroke width and other properties of the object related to the centeredRotation property.

centeredRotation - This property accepts a Boolean value, allowing us to Use the control to control whether to use the center point as its transformation origin when the object rotates. Its default value is True.

Default behavior of rectangle rotation in FabricJS

property is set to true by default, the rectangular object uses its center as the point of rotation.

<!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 rotation of Rectangle in FabricJS</h2>
   <p>Click on the rectangle and rotate it. You will notice that the object rotates around its center, which is 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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
      });

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

Copy after login

Passing the centeredRotation key with value "false"

<!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 centeredRotation key with the value as &ldquo;false&rdquo;</h2>
   <p>Click on the rectangle and rotate it to see the changed center of rotation</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,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         centeredRotation: false,
      });

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

Copy after login

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