Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Make Polygon Object React to Rotating Event Using Fabric.js
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 rotating event to demonstrate how to make a polygon object reacts to the rotation via controls.
Syntax
polygon.on("rotating", callbackFunction);
Example 1: Displaying how the Object Reacts to the rotating Event
Let's see a code example of how to make the polygon object react to the rotating event. In this case, as soon as we click on the polygon object and rotate it via the middle-toprotate control, we see the logged output. This is because the rotating event is fired continuously while the object is rotating.
<!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 rotating event</h2>
<p>You can rotate the object to see the 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 rotating event
polygon.on("rotating", () => {
canvas.renderAll();
console.log("The polygon object is rotating");
});
</script>
</body>
</html>
Example 2: Changing the Fill Colour when Rotate Happens
Let's see a code example to understand how we can change the fill colour when the rotating event occurs. We can rotate an object on the canvas by using its middle-toprotate(mtr) control. Here, when we rotate the polygon object using its mtr control, the fill colour changes to "green".
<!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>Changing the fill colour when rotate happens</h2>
<p>
You can see that the fill colour changes when the polygon is rotated
</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,
top: 50,
left: 30,
scaleX: 0.5,
scaleY: 0.5
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the rotating event
polygon.on("rotating", () => {
polygon.set("fill", "green")
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 rotating event using FabricJS.
313 Views
