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 Skewing 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 skewing event to demonstrate how a polygon object reacts to the user while being skewed via controls.
Syntax
polygon.on("skewing", callbackFunction);
Example 1: Displaying how the Object Reacts to the skewing Event
Let's see a code example of how the polygon object reacts while using the skewing event. Skewing the object in both horizontal and vertical directions is feasible by pressing the shift key and then dragging the middle controls along the horizontal or vertical direction. The skewing event is fired continuously while the object is being skewed.
<!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 skewing event</h2>
<p>
You can keep skewing the object while the console from dev tools is open to see the logged output
</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 skewing event
polygon.on("skewing", () => {
canvas.renderAll();
console.log("The polygon object is being skewed");
});
</script>
</body>
</html>
Example 2: Changing the Fill Colour when skew Happens
Let's see a code example to understand how we can change the fill colour when the skewing event occurs. We have used the set method, a setter which allows us to specify the property that we want to change. Here, whenever we skew the polygon, 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 skew happens</h2>
<p>
You can see that the fill colour changes when the polygon is skewed
</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 skewing event
polygon.on("skewing", () => {
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 skewing event using FabricJS.
272 Views
