In this tutorial, we will learn how to set the minimum allowed ratio 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. We can customize the circular 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.
new fabric.Circle({ minScaleLimit : Number }: Object)Options (optional) - This parameter is a Object< /em> Provides additional customization for our circles. Using this parameter, you can change the color, cursor, border width, and many other properties associated with the object for which minScaleLimit is a property.
##minScaleLimit - This property accepts numbers As a value that allows us to control the minimum allowed proportion of the circle.
Appearance of the default circle object
Let's take a look at the code to see what happens when # is not used ##minScaleLimit property, what the circular 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>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Setting the minimum allowed scale value of circle using FabricJS</h2>
<p>Select the object and scale it down by dragging one of its controlling corners. Here you can scale down the object freely since there is no minimum limit set.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
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 value for a circular object in the canvas. Here we are using 0.8 as the value, which means that we will not be able to shrink the object to a radius smaller than 64 pixels, which is calculated by radius * limit (0.8 * 80 = 64 pixels). The above is the detailed content of How to set the minimum scale value allowed for a Circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!<!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>Setting the minimum allowed scale value of circle using FabricJS</h2>
<p>Select the object and try to scale it down by dragging one of its controlling corners. You cannot scale down the object freely, as we have set <b>minScaleLimit</b> at 0.8. So, the minimum scale of the circle must be at least 80% of the original radius, beyond which you cannot scale it down any further. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 80,
fill: "#ff1493",
minScaleLimit: 0.8
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
The difference between keypress and keydown
What should I do if my C drive turns red?
How to open the registry
Compound usage
What key do you press to recover when your computer crashes?
How to implement line break in alert
Modify file name in linux
How to repair win7 system if it is damaged and cannot be booted
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
