首頁 > web前端 > js教程 > 如何使用 FabricJS 設定三角形選擇的背景顏色?

如何使用 FabricJS 設定三角形選擇的背景顏色?

WBOY
發布: 2023-08-30 16:01:02
轉載
1414 人瀏覽過

如何使用 FabricJS 设置三角形选择的背景颜色?

在本教學中,我們將學習如何使用 FabricJS 設定三角形選擇的背景顏色。三角形是 FabricJS 提供的各種形狀之一。為了創建一個三角形,我們必須建立一個 Fabric.Triangle 類別的實例並將其新增到畫布中。

我們可以更改物件的尺寸、旋轉它或當它被主動選擇時對其進行操作。我們可以使用 selectionBackgroundColor 屬性來變更三角形選取範圍的背景顏色。

語法

new Fabric.Triangle({ SelectionBackgroundColor : String }: Object)
登入後複製

參數

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

  • < /ul>

    選項鍵

    • selectionBackgroundColor - 此屬性接受字串值。分配的值將決定選區的背景顏色。

    範例1

    selectionBackgroundColor 時的預設顏色 em> 未使用屬性

    ##讓我們來看一個程式碼範例,以了解未使用

    selectionBackgroundColor 屬性時選擇內容的顯示方式。從這個例子我們可以看到,選擇區域或物件後面的區域沒有顏色。

    
    
    
    
    
    
    不使用selectionBackgroundColor属性时的默认颜色
    可以选择三角形,可以看到选择区域没有颜色。
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:180,
    顶部:70,
    宽度:90,
    身高:80,
    填写:“#228b22”,
    笔画:“#d8e4bc”,
    笔画宽度:7,
    填充:30,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    
    登入後複製

    範例2

    selectionBackgroundColor 屬性作為鍵傳遞##在此範例中,我們正在為

    selectionBackgroundColor

    屬性指派一個值。在本例中,我們向其傳遞了十六進位值“da70d6”,即洋紅色,因此選擇區域看起來就是該顏色。

    
    
    
    
    
    
    将selectionBackgroundColor属性作为键传递
    您可以选择三角形以查看选择区域现在具有洋红色
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:180,
    顶部:70,
    宽度:90,
    身高:80,
    填写:“#228b22”,
    笔画:“#d8e4bc”,
    笔画宽度:7,
    填充:30,
    选择背景颜色:“#da70d6”,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    
    登入後複製

    以上是如何使用 FabricJS 設定三角形選擇的背景顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板