search

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

How to disable center rotation of a rectangle using FabricJS?

王林
王林forward
2023-09-09 19:13:121176browse

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)

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.

    • Option Key

    • 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.

    Example 1

    Default behavior of rectangle rotation in FabricJS

    Let’s look at a code that describes the default behavior of a rectangle object Example. Because the centeredRotation 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>
    Example 2

    Passing the centeredRotation key with value "false"

    Now that we have seen the default behavior, let's look at the code example to see what happens when you assign a False value to the centeredRotation property. 

    <!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>

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!

对象 ul fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to add elements to a JSON object using JavaScript?Next article：How to add elements to a JSON object using JavaScript?

Related articles

See more