FabricJS を使用して三角形の最小許容比率値を設定するにはどうすればよいですか?

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

三角形オブジェクトは、パディングの追加、色の追加、境界線の削除、さらにはサイズの変更によってカスタマイズできます。同様に、minScaleLimit プロパティを使用して、最小許容スケールを設定することもできます。

構文

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

パラメータ

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

オプション キー

• minScaleLimit - このプロパティは、値として Number を受け入れます。三角形に許可される最小スケールを制御します。

例 1

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

コード例を見て、Triangle オブジェクトを使用せずにどのように動作するかを見てみましょう。 minScaleLimit プロパティは、三角形オブジェクトの外観です。この場合、最小制限が設定されていないため、オブジェクトを自由に拡大縮小できます。

三角形对象的默认外观
您可以缩放三角形对象以查看是否没有设置最小限制


// 启动画布实例
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

minScaleLimit プロパティをカスタム値を持つキーとして渡す

この例では、次のことを行います。 minScaleLimit プロパティに値を割り当てると、キャンバス内の三角形オブジェクトの最小許容スケール値がどのように変更されるかを確認してください。ここでは値として 0.8 を使用しています。これは、オブジェクトを幅 72 ピクセル、高さ 64 ピクセル未満に縮小できないことを意味します。これは radius*limit (0.8 * 90 = 72) で計算されます。ピクセル)、0.8 * 80 = 64ピクセル)。

えええええ

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