FabricJSを使用して三角形の不透明度を設定するにはどうすればよいですか?

#このチュートリアルでは、FabricJS を使用して三角形の不透明度を設定する方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、Fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。塗りつぶしの色を追加したり、境界線を削除したり、寸法を変更したりすることで、三角形オブジェクトをカスタマイズできます。同様に、opacity プロパティを使用して不透明度を変更することもできます。

構文

new Fabric.Triangle({ opacity: Number }: Object)

パラメータ

• オプション (オプション) - このパラメータは Object は、三角形に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、境界線の幅、および不透明度が属性であるオブジェクトに関連するその他の多くのプロパティを変更できます。

#オプション キー

• Opacity - このプロパティは numbers を受け入れますオブジェクトの不透明度を制御できる値として。不透明度属性のデフォルト値は 1 です。

例 1

Triangle オブジェクトのデフォルトの外観

コード例を見て Triangle オブジェクトを見てみましょう

opacity プロパティのデフォルト値を使用するとどのように見えるか。次の例に示すように、クラスには不透明度キーを渡しません。 -

三角形对象的默认外观
请注意，三角形是完全不透明的。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
});

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

例 2

opacity プロパティをキーとして渡します

この例では、

opacity プロパティに値を代入することで、キャンバス内の三角形オブジェクトの不透明度がどのように変更されるかを見ていきます。ここでは不透明度として 0.3 を使用しています。これにより、三角形オブジェクトが完全に不透明ではなく半透明に見えます。 えええええ

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