如何使用 FabricJS 使矩形的控制角透明？

在本教學中，我們將學習如何使用 FabricJS 來使 Rectangle 的控制角透明。矩形是 FabricJS 提供的各種形狀之一。為了建立一個矩形，我們必須建立一個 Fabric.Rect 類別的實例並將其新增到畫布中。 transparentCorners 屬性允許我們使 Rectangle 的控制角度透明。

語法

new Fabric.Rect( {TransparentCorners: Boolean }: 对象）

參數

• #選項（可選） - 此參數是一個物件為我們的矩形提供額外的客製化。使用此參數，可以變更與物件相關的屬性，例如顏色、遊標、描邊寬度和許多其他屬性， transparentCorners 是該物件的屬性。

ul>

選項鍵

• #transparentCorners - 此屬性接受一個布爾值，允許我們將物件的控制角渲染為透明。其預設值為 true。

範例1

將透明Corners 屬性作為具有「false」值的鍵傳遞

讓我們來看一個程式碼範例，用於建立一個帶有不透明控制角的矩形物件。為此，我們需要向 transparentCorners 屬性傳遞 False 值。

将透明角属性作为具有“False”值的键传递
您可以选择矩形以查看控制角是不透明的。


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：155，
顶部：70，
宽度：170，
身高：70，
填写：“#f4f0ec”，
笔画：“#2a52be”，
笔划宽度：5，
透明角：假，
});

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

範例2

將透明角作為具有「True」值的鍵傳遞

在此範例中，我們是向 transparentCorners 屬性傳遞一個真值。這將確保控制角呈現為透明。請注意，這也是預設行為。

将透明角作为具有“True”值的键传递
您可以选择矩形以查看控制角是否透明。


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：155，
顶部：70，
宽度：170，
身高：70，
填写：“#f4f0ec”，
笔画：“#2a52be”，
笔划宽度：5，
透明角：真实，
});

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

以上是如何使用 FabricJS 使矩形的控制角透明？的詳細內容。更多資訊請關注PHP中文網其他相關文章！