In this tutorial, we will learn how to set the tilt angle 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 need to create an instance of the fabric.Triangle class and add it to the canvas.
We can customize our triangle object by changing its size, adding a background color, or changing the tilt angle on the x-axis. We can achieve this using the skewX attribute.
new fabric.Triangle({ skewX: Number }: Object )Options (optional Option) − This parameter is an object that provides options for additional customization of our triangle. Using this parameter, you can change the object's color, cursor, stroke width, and many other properties related to the skewX property.
skewX< /strong> − This property accepts a number value that determines the tilt angle of the object along the x-axis.
When the skewX attribute is not applied
< ;p> Let's look at a code example to see how our triangle object looks when the skewX property is not applied. In this case, our triangle object won't be tilted at any angle.<!DOCTYPE html>
The Chinese translation of <html> is: <html>
The Chinese translation of <head> is: <head>
<!-- Add Fabric JS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
The Chinese translation of </head> is: </head>
The Chinese translation of <body> is: <body>
<h2>When the skewX attribute is not applied</h2>
<p>By default, you can see that the triangle is not tilted at any angle</p>
<canvas id="canvas"></canvas>
The Chinese translation of <script> is: <script>
// Initialize a canvas instance
var canvas = new fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// Initialize a triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
Height: 80,
fill: "#b7410e"，
Stroke: "#f5deb3",
(Note: This is a piece of HTML code, where represents a space)
strokeWidth: 7,
});
//Add it to the canvas
Canvas.add(triangle);
</script>
The Chinese translation of </body> is: </body>
</html>Put skewX as a key and assign it a custom value.
In this example, we will see how to assign a numeric value to the skewX property. The value passed will determine the degree of tilt along the X-axis.
<!DOCTYPE html>
The Chinese translation of <html> is: <html>
The Chinese translation of <head> is: <head>
<!-- Add Fabric JS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
The Chinese translation of </head> is: </head>
The Chinese translation of <body> is: <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>
The Chinese translation of <script> is: <script>
// Initialize a canvas instance
var canvas = new fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// Initialize a triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
Height: 80,
fill: "#b7410e"，
Stroke: "#f5deb3",
(Note: This is a piece of HTML code, where represents a space)
strokeWidth: 7,
skewX: 50,
});
//Add it to the canvas
Canvas.add(triangle);
</script>
The Chinese translation of </body> is: </body>
The Chinese translation of </html>