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 a Line instance using FabricJS?
In this tutorial, we are going to learn about how to find the complexity of a Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to get the complexity of a Line object, 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 Line 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>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([70, 100, 150, 200], {
stroke: "blue",
});
// Add it to the canvas
canvas.add(line);
// Using the complexity method
console.log("The complexity of Line instance is: ", line.complexity());
</script>
</body>
</html>
The complexity of Line 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 a line 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 that the complexities are different</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([70, 100, 150, 200], {
stroke: "blue",
});
// 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: 300,
top: 70,
}
);
// Add both to the canvas
canvas.add(line);
canvas.add(polygon);
// Using the complexity method
console.log("The complexity of Line instance is: ", line.complexity());
console.log(
"The complexity of Polygon instance is: ",
polygon.complexity()
);
</script>
</body>
</html>
The complexity of Line instance is: 1 The complexity of Polygon instance is: 4
Conclusion
The complexity() method helps determine the rendering complexity of FabricJS objects. Simple objects like Line return 1, while complex objects like Polylines return higher values based on their point count.
288 Views
