- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 to find whether a polygon object is fully contained within the area of another object. It can be used to test whether an object is fully contained within the area of another 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.
absolute (optional) − This parameter accepts a String 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.
Example 1: 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 a polygon 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>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polygon object
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: "red",
left: 100,
top: 50,
fill: "black",
strokeWidth: 2,
strokeLineJoin: "bevil",
}
);
// 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(polygon);
canvas.add(rectangle);
// Using isContainedWithinObject method
console.log(
"Is the Polygon object contained within the area of the rectangle object?: ",
polygon.isContainedWithinObject(rectangle)
);
</script>
</body>
</html>
Example 2: 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 polygon 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>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polygon object
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: "red",
left: 100,
top: 50,
fill: "black",
strokeWidth: 2,
strokeLineJoin: "bevil",
}
);
// 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(polygon);
// Using isContainedWithinObject method
console.log(
"Is the Polygon object contained within the area of the rectangle (rect2) object?: ",
polygon.isContainedWithinObject(rect2)
);
</script>
</body>
</html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can check if a Polygon object is fully contained within the area of another object using FabricJS.
286 Views
