FabricJS を使用して三角形のコントロールの角を透明にする方法は?

#このチュートリアルでは、FabricJS を使用して三角形のコントロールの角を透明にする方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、Fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。 transparentCorners プロパティを使用すると、三角形のコントロールの角を透明にすることができます。

構文

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

パラメータ

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

オプション キー

• transparentCorners - このプロパティは boolean 値を受け入れ、次のことを可能にします。オブジェクトのコントロールの角は、透明または不透明にレンダリングされます。デフォルト値は true です。

#例 1

transparentCorners 属性を「false」値のキーとして渡す

不透明なコントロールコーナーを持つ三角形オブジェクトを作成するコード例を見てみましょう。これを行うには、

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

値が「true」のキーとして transparentCorners を渡す

この例では、次のように渡します。

transparentCorners プロパティの true 値。これにより、コントロールの角が確実に透明になります。これはデフォルトの動作でもあることに注意してください。 えええええ

以上がFabricJS を使用して三角形のコントロールの角を透明にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。