Home > Article > Web Front-end > How to disable center scaling of triangles using FabricJS?

How to disable center scaling of triangles using FabricJS?

WBOYforward: 2023-09-15 15:33:081072browse

如何使用 FabricJS 禁用三角形的中心缩放？

In this tutorial, we will learn how to disable centered scaling of a triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the Fabric.Triangle class and add it to the canvas.

When an object is scaled by a control, a true value of the centeredScaling property is assigned, and the origin of the transformation is its center.

Syntax

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

Parameters

Options (optional) - This parameter is a Object Provides additional customization to our triangle. Using this parameter, you can change the color, cursor, stroke width and other properties of the object related to the centeredScaling property.

Option Key

centeredScaling - This property accepts a boolean value and allows us to control Whether the object should use its center as the transformation origin.

Example 1

Pass centeredScaling as key and assign it a "true" value

Let's look at a code Example of how a triangle object behaves when the centeredScaling property is enabled. When we zoom in on an object, the origin of the transformation is the center of the triangle.

<!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 it a "true" value</h2>
   <p>Try scaling the triangle to see that it is using its center as the center of transformation.</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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#5f9ea0",
         centeredScaling: true,
      });

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

Example 2

Disabling the centeredScaling property

We can disable the centeredScaling property by specifying a False value for it. This will no longer use the center of the triangle as the center of the transformation. Here is a code sample to demonstrate

<!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 triangle to see that it is using one of its corners as the center of transformation.</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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#5f9ea0",
      centeredScaling: false,
      });

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

The above is the detailed content of How to disable center scaling of triangles 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 switch page language using JavaScript?Next article：How to switch page language using JavaScript?

See more