简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to disable centered scaling of a rectangle using FabricJS?

How to disable centered scaling of a rectangle using FabricJS?

WBOY
WBOYforward
2023-08-24 20:53:071171browse

How to disable centered scaling of a rectangle using FabricJS?

In this tutorial, we will learn how to disable centered scaling of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we need to create an instance of the fabric.Rect class and add it to the canvas. When scaling via a controller, set the centeredScaling property to true to use the center as the starting point for the object's transformation.

Syntax

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

Parameters

  • Options (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which centeredScaling is a property.

Options Keys

  • centeredScaling − This property accepts a Boolean value. When this property is true, the object uses the center as its origin of transformation.

Example 1

Passing centeredScaling as key and assigning a “true” value to it

Let's see a code example to see how a rectangle object behaves when centeredScaling property is enabled. When we scale the object up the origin of transformation is the center of the rectangle.

<!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 centeredScaling as key and assigning a "true" value to it</h2>
   <p>Try scaling the rectangle to see that centered scaling has been enabled</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,
         centeredScaling: true,
      });

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

Example 2

Disable the centeredScaling attribute

We can disable the centeredScaling attribute by assigning it a value of False. This will no longer use the center of the rectangle as the center of the transformation. Here is a code example to demonstrate this -

<!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>Disabling the centeredScaling property</h2>
   <p>Try scaling the rectangle to see that centered scaling has been disabled</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,
         centeredScaling: false,
      });

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

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

Boolean Object using Property 对象 this fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to show loading indicator in React Native?Next article：How to show loading indicator in React Native?

Related articles

See more