How to set the minimum allowed proportion value of an ellipse using FabricJS?-JS Tutorial-php.cn

How to set the minimum allowed proportion value of an ellipse using FabricJS?

PHPz

Release： 2023-09-08 16:25:02

forward

538 people have browsed it

如何使用 FabricJS 设置椭圆的最小允许比例值？

In this tutorial, we will learn how to set the minimum allowed proportion of an ellipse using FabricJS. The oval is one of the various shapes provided by FabricJS. To create an ellipse, we will create an instance of the Fabric.Ellipse class and add it to the canvas. We can customize the ellipse object by adding a fill color, removing its borders, and even changing its dimensions. Likewise, we can also use the minScaleLimit property to set its minimum allowed scale.

Syntax

new fabric.Ellipse({ minScaleLimit : Number }: Object)

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em> Provides additional customization for our ellipse. Use this parameter to change the color, cursor, border width, and many other properties associated with the object for which minScaleLimit is a property.

Option Key

##minScaleLimit - This property accepts numbers as a value that allows us to control the minimum scale allowed for the ellipse.

Example 1
The appearance of the default ellipse object
Let's take an example to see without using
The minScaleLimit property is what the ellipse object looks like. In this case we will be able to scale the object freely since no minimum limit is set.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2> <p>Here you can select the object and scale it up freely to any extent, as we have not used the <b>minScaleLimit</b> property. </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: 115, top: 50, rx: 80, ry: 50, fill: "#ff1493", }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copy after login
Example 2
Passing the minScaleLimit attribute as a key with a custom value
In this example, We'll see how assigning a value to the minScaleLimit property changes the minimum allowed scale of an ellipse object in the canvas. Here we use 0.8 as the value, which means we will not be able to shrink the object smaller than the horizontal radius of 64 pixels and the vertical radius of 40 pixels, calculated as
radius*limit (0.8 * 80 = 64 pixels, 0.8 * 50 = 40 pixels).
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2> <p>Select the object and try to scale it down. Here we have set the <b>minScaleLimit</b> to 0.8 beyond which the ellipse cannot be reduced further in size. </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: 115, top: 50, rx: 80, ry: 50, fill: "#ff1493", minScaleLimit: 0.8, }); // 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 set the minimum allowed proportion value of an ellipse using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!