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
How to make a polygon object react to the selected and deselected event using FabricJS?
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 selected and deselected events to demonstrate how to make a polygon object react on user’s selection and deselection of object.
Syntax
polygon.on("selected", callbackFunction);
polygon.on("deselected", callbackFunction);
Example 1: Displaying how the Object Reacts to the selected Event
Let’s see a code example of how to make the polygon object react to the selected event. A click on the object will fire the selected event which executes the callback function. In this case, as soon as we click on the polygon object, its fill colour changes and a logged output is displayed.
<!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>Displaying how the object reacts to the selected event</h2>
<p>Select the object to see the event callback function fired</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 polygon instance
var polygon = new fabric.Polygon(
[
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
{ x: 500, y: 20 },
],
{
fill: "black",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the selected event
polygon.on("selected", () => {
polygon.fill = "blue";
canvas.renderAll();
console.log("The polygon object is selected");
});
</script>
</body>
</html>
Example 2: Displaying how the Object Reacts to the deselected Event
Let’s see a code example to understand how to make the Polygon object react to deselected event. Here, the event is fired as soon as the polygon object is deselected thereby changing the fill colour as well.
<!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>Displaying how the object reacts to the deselected event</h2>
<p>Deselect the object to see the event callback function fired</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 polygon instance
var polygon = new fabric.Polygon(
[
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
{ x: 500, y: 20 },
],
{
fill: "red",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the deselected event
polygon.on("deselected", () => {
polygon.fill = "black";
canvas.renderAll();
console.log("The polygon object is deselected");
});
</script>
</body>
</html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can make a polygon object react to the selected and deselected event using FabricJS.
340 Views
