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 mouse events 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 mouseup and mousedown events to demonstrate how a polygon object reacts to the mouse events triggered by a user.
Syntax
polygon.on(“mouseup”, callbackFunction); polygon.on(“mousedown”, callbackFunction);
Example 1: Displaying how the Object Reacts to the mouseup Event
Let’s see a code example of how the polygon object reacts when the mouseup event is triggered. A mouseup event occurs when the user releases the left mouse button. Here, as soon as the mouseup event is triggered, the stroke width changes to 33.
<!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 mouseup event</h2>
<p>
You can select the object and release the left mouse button to see that the stroke width has changed
</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: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 50, y: 50 },
{ x: 50, y: 0 },
],
{
left: 100,
top: 30,
fill: "red",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the mouseup event
polygon.on("mouseup", () => {
polygon.set("strokeWidth", 33);
canvas.renderAll();
});
</script>
</body>
</html>
Example 2: Displaying how the Object Reacts to the mousedown Event
Let’s see a code example of how the polygon object reacts when the mousedown event is triggered. A mousedown event occurs when a user presses a button down. Here, we can see that the object reacts to the mousedown event by changing its stroke width from 33 to 2.
<!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 mousedown event</h2>
<p>
You can press the left mouse button to trigger the mousedown event to see that the stroke width has changed
</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: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 50, y: 50 },
{ x: 50, y: 0 },
],
{
left: 100,
top: 30,
fill: "red",
stroke: "blue",
strokeWidth: 33,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the mousedown event
polygon.on("mousedown", () => {
polygon.set("strokeWidth", 2);
canvas.renderAll();
});
</script>
</body>
</html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can make a polygon object react to the mouse events using FabricJS.
472 Views
