How to disable Ellipse's centered scaling using FabricJS?-JS Tutorial-php.cn

How to disable Ellipse's centered scaling using FabricJS?

王林

Release： 2023-09-17 09:25:02

forward

1083 people have browsed it

如何使用 FabricJS 禁用 Ellipse 的居中缩放？

In this tutorial, we will learn how to disable Ellipse’s Centered Zoom using FabricJS. The oval is one of the various shapes provided by FabricJS. In order to create an ellipse, we must create an instance of the Fabric.Ellipse class and add it to the canvas. When scaling through a control, assign the centeredScaling property a value of "true" to use the center as the object's transformation origin.

Syntax

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

Copy after login

Parameters

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

Option Key

##centeredScaling - This property accepts a Boolean value 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
The following example demonstrates how an ellipse 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 ellipse.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to disable the centered scaling of Ellipse using FabricJS?</h2> <p>Select the object and stretch it from its corners. The ellipse will scale up from its center. This is the default behavior.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 215, top: 100, fill: "white", rx: 90, ry: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#daa520", centeredScaling: true, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copy after login
Example 2
Disable 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 ellipse as the center of the transformation. Here is a code to demonstrate -
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to disable the centered scaling of Ellipse using FabricJS?</h2> <p>Select the object and stretch it from its corners. You will notice the object scales up but not from its center because we have set <b>centeredScaling</b> as False. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 215, top: 100, fill: "", rx: 90, ry: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#daa520", centeredScaling: false, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copy after login
The above is the detailed content of How to disable Ellipse's centered scaling using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!