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.
new fabric.Triangle({ centeredScaling: Boolean }: Object)Options (optional) - This parameter is a Object< /em> 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.
centeredScaling - This property accepts a boolean value and allows us to control Whether the object should use its center as the transformation origin.
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>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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
