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
FabricJS – Check if a Polygon Object is Fully Contained within Another Object?
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc.
We use the isContainedWithinObject method to find whether a polygon object is fully contained within the area of another object. This method returns a boolean value indicating if the polygon is completely inside the boundaries of another fabric object.
Syntax
isContainedWithinObject(other: Object, absolute: Boolean, calculate: Boolean): Boolean
Parameters
other ? This parameter accepts an Object which specifies the object we want to test against.
absolute (optional) ? This parameter accepts a Boolean value which specifies whether to use coordinates without viewportTransform or not.
calculate (optional) ? This parameter accepts a Boolean value which specifies whether to use coordinates of current position.
Return Value
Returns true if the polygon object is fully contained within the specified object, otherwise false.
Example 1: Polygon Contained Within Rectangle
Let's see a code example where the polygon is fully contained within a rectangle. The isContainedWithinObject method will return true in this case.
<!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>Check the console to see if the polygon is contained within the rectangle</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(600);
canvas.setHeight(300);
// Create a polygon object (hexagon)
var polygon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 }
],
{
stroke: "blue",
left: 150,
top: 100,
fill: "lightblue",
strokeWidth: 2
}
);
// Create a rectangle object that contains the polygon
var rectangle = new fabric.Rect({
width: 200,
height: 150,
top: 50,
left: 100,
fill: "transparent",
stroke: "red",
strokeWidth: 3
});
// Add objects to canvas
canvas.add(rectangle);
canvas.add(polygon);
// Check if polygon is contained within rectangle
console.log(
"Is polygon contained within rectangle?",
polygon.isContainedWithinObject(rectangle)
);
</script>
</body>
</html>
Is polygon contained within rectangle? true
Example 2: Polygon Not Contained Within Object
In this example, we test the polygon against a smaller rectangle that cannot contain it completely. The method will return false because the polygon extends beyond the rectangle's boundaries.
<!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>Polygon not contained within smaller rectangle</h2>
<p>Check console - polygon extends beyond the small rectangle</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(600);
canvas.setHeight(300);
// Create the same polygon
var polygon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 }
],
{
stroke: "blue",
left: 150,
top: 100,
fill: "lightblue",
strokeWidth: 2
}
);
// Large rectangle that contains polygon
var rect1 = new fabric.Rect({
width: 200,
height: 150,
top: 50,
left: 100,
fill: "transparent",
stroke: "green",
strokeWidth: 2
});
// Small rectangle that cannot contain polygon
var rect2 = new fabric.Rect({
width: 60,
height: 40,
top: 200,
left: 350,
fill: "rgba(255,0,0,0.3)",
stroke: "red",
strokeWidth: 2
});
// Add objects to canvas
canvas.add(rect1);
canvas.add(rect2);
canvas.add(polygon);
// Test containment with both rectangles
console.log(
"Is polygon contained within large rectangle (rect1)?",
polygon.isContainedWithinObject(rect1)
);
console.log(
"Is polygon contained within small rectangle (rect2)?",
polygon.isContainedWithinObject(rect2)
);
</script>
</body>
</html>
Is polygon contained within large rectangle (rect1)? true Is polygon contained within small rectangle (rect2)? false
Key Points
The method checks if all points of the polygon are within the target object's boundaries
It returns a boolean value:
truefor complete containment,falseotherwiseThe method considers the object's transformations and current position
Useful for collision detection and boundary validation in fabric applications
Conclusion
The isContainedWithinObject method provides an efficient way to determine if a polygon is completely contained within another FabricJS object. This functionality is essential for implementing drag-and-drop constraints, collision detection, and boundary validation in canvas applications.
621 Views
