Home > Article > Web Front-end > How to disable centered scaling of a Circle using FabricJS?
How to disable centered scaling of a Circle using FabricJS?
- WBOYforward
- 2023-09-07 17:13:021374browse
In this tutorial, we will learn how to disable centered scaling of a Circle using FabricJS. Circles are one of the various shapes provided by FabricJS. In order to create a circle, we must create an instance of the Fabric.Circle class and add it to the canvas. When scaling through a control, assign a true value to the centeredScaling property, using the center as the object's transformation origin.
Syntax
new fabric.Circle({ centeredScaling: Boolean }: Object)Parameters
Options (optional) - This parameter is a provided Additional custom objects to our circles. 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. When this property is True, the object uses the center as the transformation origin.
Example 1
Pass centeredScaling as the key and assign it a "true" value
Let's look at a snippet of code to see how a circular object behaves when the centeredScaling
em> property is enabled. When we zoom in on an object, the origin of the transformation is the center of the circle.
<!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 centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Disabling the centeredScaling property
We can disable the centeredScaling property by specifying a false value for it. It will force the circle to no longer use the center of the circle as the center of the transformation. Here is a code 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 centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: false
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>The above is the detailed content of How to disable centered scaling of a Circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!