Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the angle of skew on x-axis of Triangle using FabricJS?
In this tutorial, we are going to learn how to set the angle of skew on the x-axis of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas.
Our triangle object can be customized in various ways like changing its dimensions, adding a background color or by changing the angle of skew on the x-axis. We can do this by using the skewX property.
Syntax
new fabric.Triangle({ skewX : Number }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which skewX is a property.
Options Keys
-
skewX ? This property accepts a Number value which determines the angle of skew on x-axis of an object in degrees.
Example 1: Triangle without skewX
Let's see a code example to understand how our triangle object appears when the skewX property is not applied. In this case, there will be no skew by any angle in our triangle 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>When the skewX property is not applied</h2>
<p>You can see there is no skew by any angle on the triangle by default</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 triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
height: 80,
fill: "#b7410e",
stroke: "#f5deb3",
strokeWidth: 7,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Applying skewX Property
In this example, we will see how we can assign a numerical value to the skewX property. The value that is being passed will determine the skew along the X-axis.
<!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>Passing skewX as key and assigning it a custom value</h2>
<p>You can see the triangle has skewed on x-axis at a 50 degree angle</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 triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
height: 80,
fill: "#b7410e",
stroke: "#f5deb3",
strokeWidth: 7,
skewX: 50,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
How It Works
The skewX property transforms the triangle by slanting it horizontally. A positive value skews the triangle to the right, while a negative value skews it to the left. The angle is measured in degrees, where 0 means no skew and values like 30, 45, or 60 create increasingly pronounced slanting effects.
Key Points
- The skewX value is in degrees
- Positive values skew the triangle to the right
- Negative values skew the triangle to the left
- The skew transformation affects only the x-axis orientation
Conclusion
The skewX property in FabricJS provides an easy way to create slanted triangle effects. By adjusting the numerical value, you can achieve various visual transformations for your triangle objects on the canvas.
233 Views
