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 an Image instance using FabricJS?
In this tutorial, we are going to learn how to identify the type of an Image instance in 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 identify the type of an Image 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 object type matches the specified type, false otherwise.
Using isType method
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>
<img src="https://www.tutorialspoint.com/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 isType method
console.log(
"Is the specified type identical to an image instance? : ",
image.isType("image")
);
</script>
</body>
</html>
Is the specified type identical to an image 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 an image 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>
<img src="https://www.tutorialspoint.com/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 isType method
console.log(
"Is the specified type identical to an image instance? : ",
image.isType("circle")
);
</script>
</body>
</html>
Is the specified type identical to an image instance? : false
Common FabricJS Object Types
The isType method can check for various FabricJS object types. Here are some common types you can check:
-
"image"- for fabric.Image objects -
"rect"- for fabric.Rect objects -
"circle"- for fabric.Circle objects -
"text"- for fabric.Text objects -
"group"- for fabric.Group objects
Conclusion
The isType method is a useful utility in FabricJS for type checking objects on the canvas. It returns true when the object type matches the specified string, making it ideal for conditional operations based on object types.
356 Views
