在本教程中，我们将学习如何使用 FabricJS 设置矩形的 x 轴倾斜角度。矩形是 FabricJS 提供的各种形状之一。为了创建一个矩形，我们必须创建一个 Fabric.Rect 类的实例并将其添加到画布中。
我们的矩形对象可以通过多种方式自定义，例如更改其尺寸、添加背景颜色或更改 x 轴上的倾斜角度。我们可以通过使用 skewX 属性来做到这一点。
语法
new Fabric.Rect({ skewX : Number }: Object )参数
选项（可选） - 此参数是一个对象 它为我们的矩形提供了额外的定制。使用此参数，可以更改与 skewX 为属性的对象相关的属性，例如颜色、光标、描边宽度和许多其他属性。
ul>skewX - 此属性接受数字 确定对象 X 轴上的倾斜角度。
选项键
示例 1
当 skewX 属性未设置时已应用
让我们看一个代码示例，以了解在未应用 skewX 属性时矩形对象的显示方式。在这种情况下，我们的矩形对象不会出现任何角度的倾斜。
未应用 skewX 属性时
可以看到默认情况下矩形上任何角度都没有倾斜
// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);
// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
});
// 将其添加到画布中
canvas.add(矩形);
示例 2
将 skewX 作为键传递并为其分配自定义值。
在此示例中，我们将看到如何为 skewX 分配一个数值 财产。传递的值将确定沿 X 轴的倾斜。
将 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(矩形);
