如何使用FabricJS设置矩形x轴的倾斜角度？

在本教程中，我们将学习如何使用 FabricJS 设置矩形的 x 轴倾斜角度。矩形是 FabricJS 提供的各种形状之一。为了创建一个矩形，我们必须创建一个 Fabric.Rect 类的实例并将其添加到画布中。

我们的矩形对象可以通过多种方式自定义，例如更改其尺寸、添加背景颜色或更改 x 轴上的倾斜角度。我们可以通过使用 skewX 属性来做到这一点。

语法

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

参数

• 选项（可选） - 此参数是一个对象 它为我们的矩形提供了额外的定制。使用此参数，可以更改与 skewX 为属性的对象相关的属性，例如颜色、光标、描边宽度和许多其他属性。

选项键

• skewX - 此属性接受数字< /strong> 确定对象 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(矩形);

以上是如何使用FabricJS设置矩形x轴的倾斜角度？的详细内容。更多信息请关注PHP中文网其他相关文章！