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
Fabric.js – How to check if an Image object is fully contained within the area of another object?
In this tutorial, we are going to learn how to check if an Image object is fully contained within the area of another object 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 check if an Image object is fully contained within the area of another object, we use the isContainedWithinObject method.
Syntax
isContainedWithinObject(other: Object, absolute: Boolean, calculate: Boolean): Boolean
Parameters
other ? This parameter accepts an Object which specifies the object we want to test.
absolute (optional) ? This parameter accepts a Boolean value which specifies whether to use coordinates without viewportTransform or not. This parameter is optional.
calculate (optional) ? This parameter accepts a Boolean value which specifies whether to use coordinates of current position. This parameter is optional.
Using isContainedWithinObject Method
Let's see a code example to see the logged output when the isContainedWithinObject method is used. The isContainedWithinObject method returns true or false on checking if an Image object is fully contained within the area of another object.
<!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 isContainedWithinObject 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="/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,
});
// Initiate a rectangle object
var rectangle = new fabric.Rect({
width: 390,
height: 130,
top: 40,
left: 80,
fill: "transparent",
stroke: "red",
strokeWidth: 6,
});
// Add them to the canvas
canvas.add(rectangle);
canvas.add(image);
// Using isContainedWithinObject method
console.log(
"Is the Image object contained within the area of the rectangle object ? : ",
image.isContainedWithinObject(rectangle)
);
</script>
</body>
</html>
Is the Image object contained within the area of the rectangle object ? : true
Using isContainedWithinObject Method with Multiple Objects
In this example, we have used the isContainedWithinObject method along with two rectangle objects rect1 and rect2 respectively. Since the Image object is not contained within the area of rect2, a false value is returned in the console.
<!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 isContainedWithinObject method with multiple objects</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="/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,
});
// Initiate a rectangle object
var rect1 = new fabric.Rect({
width: 390,
height: 130,
top: 40,
left: 80,
fill: "transparent",
stroke: "red",
strokeWidth: 6,
});
// Initiate another rectangle object
var rect2 = new fabric.Rect({
width: 120,
height: 40,
top: 170,
left: 320,
fill: "blue",
});
// Add them to the canvas
canvas.add(rect1);
canvas.add(rect2);
canvas.add(image);
// Using isContainedWithinObject method
console.log(
"Is the Image object contained within the area of the rectangle (rect2) object?: ",
image.isContainedWithinObject(rect2)
);
</script>
</body>
</html>
Is the Image object contained within the area of the rectangle (rect2) object?: false
Conclusion
The isContainedWithinObject method in FabricJS provides an efficient way to check spatial relationships between objects. Use this method for collision detection, layout validation, and interactive canvas applications.
761 Views
