如何使用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中文網其他相關文章！