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

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

語法

new Fabric.Triangle( {透明Corners: Boolean }: Object)

參數

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

選項鍵

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

範例1

將transparentCorners 屬性作為帶有「false」的鍵傳遞value

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

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


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：80，
宽度：90，
身高：80，
填写：“#b0e0e6”，
笔画：“#5f9ea0”，
笔画宽度：7，
透明角：假，
});

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

範例2

將transparentCorners 作為具有「true」值的鍵傳遞

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

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


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：80，
宽度：90，
身高：80，
填写：“#b0e0e6”，
笔画：“#5f9ea0”，
笔画宽度：7，
透明角：真实，
});

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

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