FabricJSを使用して三角形選択の背景色を設定するにはどうすればよいですか?

このチュートリアルでは、FabricJS を使用して三角形選択の背景色を設定する方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、Fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。

オブジェクトがアクティブに選択されている場合、オブジェクトのサイズを変更したり、回転したり、操作したりできます。 selectionBackgroundColor プロパティを使用して、三角形の選択範囲の背景色を変更できます。

構文

new Fabric.Triangle({ SelectionBackgroundColor : String }: Object)

パラメータ

• オプション< /strong> (オプション) - このパラメータは Object は、三角形に追加のカスタマイズを提供します。このパラメーターを使用すると、selectionBackgroundColor がプロパティであるオブジェクトに関連するプロパティ (色、カーソル、ストローク幅、その他の多くのプロパティなど) を変更できます。

< /ul>

オプション キー

• selectionBackgroundColor - このプロパティは、 文字列 値を受け入れます。割り当てられた値によって、選択範囲の背景色が決まります。

例 1

BackgroundColor 選択時のデフォルト色 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 プロパティには値が割り当てられます。この場合、マゼンタの 16 進値「da70d6」を渡しているため、選択領域はその色で表示されます。

えええええ

以上がFabricJSを使用して三角形選択の背景色を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。