How to set the tilt angle of a rectangle's x-axis using FabricJS?

In this tutorial, we will learn how to set the x-axis tilt angle of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we must create an instance of the Fabric.Rect class and add it to the canvas.

Our rectangular object can be customized in many ways, such as changing its dimensions, adding a background color, or changing the tilt angle on the x-axis. We can do this by using the skewX property.

Syntax

new Fabric.Rect({ skewX : Number }: Object )

Parameters

• Options (optional) - This parameter is an object It provides additional customization to our rectangle. Using this parameter, you can change properties related to the object for which skewX is the attribute, such as color, cursor, stroke width, and many other properties.

Option Key

• skewX - This property accepts digits< /strong> Determines the tilt angle on the object's X-axis.

Example 1

Applied when the skewX property is not set

Let's look at a code example to understand how How rectangular objects appear when the skewX property is not applied. In this case, our rectangular object will not appear tilted at any angle.

未应用 skewX 属性时
可以看到默认情况下矩形上任何角度都没有倾斜


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
});

// 将其添加到画布中
canvas.add(矩形);

Copy after login

Example 2

Pass skewX as the key and assign it a custom value.

In this example we will see how to assign a numeric value to skewX property. The value passed will determine the tilt along the X-axis.

将 skewX 作为键传递并为其分配自定义值
您可以看到矩形在 X 轴上倾斜了 50 度角


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
偏斜X：50，
});

// 将其添加到画布中
canvas.add(矩形);

Copy after login

The above is the detailed content of How to set the tilt angle of a rectangle's x-axis using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!