Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find the complexity of an Image instance using FabricJS?
In this tutorial, we are going to learn how to find the complexity of an Image instance using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to find the complexity of an Image instance, we use the complexity method. This method will return 1 if the current object is directly inherited from a base class and not from a subclass.
Syntax
complexity(): Number
Using the complexity method
Let's see a code example to see the logged output when we use the complexity method to obtain the complexity of the Image instance. The complexity is 1 unless sub-classed.
<!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>Using the complexity method</h2>
<p>You can open console from dev tools and see the logged output</p>
<canvas id="canvas"></canvas>
<img src="/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using the complexity method
console.log("The complexity of Image instance is: ", image.complexity());
</script>
</body>
</html>
The complexity of Image instance is: 1
Using the complexity method to compare different objects
In this example, we have used the complexity method to compare the complexities of an Image instance and a polygon instance. You can open the console from dev tools to see that the complexities are different.
<!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>Using the complexity method to compare different objects</h2>
<p>You can open console from dev tools and see the logged output</p>
<canvas id="canvas"></canvas>
<img src="/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 50,
});
// Initiate a Polygon object
var polygon = new fabric.Polyline(
[
{ x: 50, y: 30 },
{ x: 105, y: 10 },
{ x: 160, y: 30 },
{ x: 100, y: 150 },
],
{
fill: "red",
left: 450,
top: 70,
}
);
// Add them both to the canvas
canvas.add(image);
canvas.add(polygon);
// Using the complexity method
console.log("The complexity of Image instance is: ", image.complexity());
console.log(
"The complexity of Polygon instance is: ",
polygon.complexity()
);
</script>
</body>
</html>
The complexity of Image instance is: 1 The complexity of Polygon instance is: 4
Understanding Complexity Values
The complexity method returns different values based on the object type:
| Object Type | Complexity Value | Description |
|---|---|---|
| Image | 1 | Simple objects have complexity of 1 |
| Polygon/Polyline | Number of points | Complex objects based on number of vertices |
| Group | Sum of all objects | Combined complexity of grouped objects |
Conclusion
The complexity() method in FabricJS helps determine the rendering complexity of objects. Simple objects like Images return 1, while complex shapes return values based on their structure.
222 Views
