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 the Y-axis of a Triangle using FabricJS?
In this tutorial, we are going to learn how to set the angle of skew on the y-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 Y-axis. We can do this by using the skewY property.
Syntax
new fabric.Triangle({ skewY : 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 skewY is a property.
Options Keys
-
skewY ? This property accepts a Number value which determines the angle of skew on y-axis of an object. The value is specified in degrees.
Example 1: Triangle Without skewY Property
Let's see a code example to understand how our triangle object appears when the skewY 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 skewY property is not applied</h2>
<p>Notice that 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: Triangle With Custom skewY Value
In this example, we will see how we can assign a numerical value to the skewY property. The value that is being passed will determine the skew along the Y-axis. Here we use a skew value of 50 degrees.
<!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 skewY as key and assigning it a custom value</h2>
<p>Notice that the triangle is skewed along the Y-axis</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: 30,
width: 90,
height: 80,
fill: "#b7410e",
stroke: "#f5deb3",
strokeWidth: 7,
skewY: 50,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
How skewY Works
The skewY property transforms the triangle by slanting it along the Y-axis. Positive values skew the shape in one direction, while negative values skew it in the opposite direction. The skew transformation maintains the original area of the triangle while changing its visual appearance.
Key Points
- The skewY value is measured in degrees
- Positive values create a skew effect along the positive Y-axis direction
- Negative values can be used to skew in the opposite direction
- The skew transformation is applied after positioning and scaling
Conclusion
The skewY property in FabricJS allows you to create visually interesting triangle shapes by skewing them along the Y-axis. This transformation is useful for creating perspective effects and adding visual variety to your canvas designs.
225 Views
