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 identify the type of a Line instance using FabricJS?
In this tutorial, we are going to learn about how to identify the type of a Line instance 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 identify the type of a Line instance, we use the isType method.
Syntax
isType(type: String): Boolean
Parameters
type ? This parameter accepts a String which specifies the type we want to check.
Return Value
The isType method returns a Boolean value - true if the specified type matches the instance type, false otherwise.
Using isType Method - Checking for "line" Type
Let's see a code example to see the logged output when the isType method is used. The isType method returns a true or false value depending on whether the type of the instance matches against the type that we want to check or not. In this case, a true value is returned since the type matches.
<!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 isType method</h2>
<p>
You can open console from dev tools and see that the logged output contains a true value
</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([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Add it to the canvas
canvas.add(line);
// Using isType method
console.log(
"Is the specified type identical to a line instance? : ",
line.isType("line")
);
</script>
</body>
</html>
Is the specified type identical to a line instance? : true
Using isType Method with a Different Value
In this example, we have used the isType to check if the specified circle type is identical to a line instance. Here, a false value is returned since they are not identical.
<!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 isType method with a different value</h2>
<p>
You can open console from dev tools and see that the logged output contains a false value
</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([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Add it to the canvas
canvas.add(line);
// Using isType method
console.log(
"Is the specified type identical to a line instance? : ",
line.isType("circle")
);
</script>
</body>
</html>
Is the specified type identical to a line instance? : false
Common Use Cases
The isType method is particularly useful when working with collections of fabric objects where you need to identify specific types for conditional operations or filtering.
Conclusion
The isType method provides a reliable way to identify Line instances in FabricJS. It returns true when checking for "line" type and false for any other type, making it essential for type checking in fabric applications.
237 Views
