FabricJS を使用して三角形の水平スケール係数を設定するにはどうすればよいですか?

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

キャンバス内の三角形オブジェクトの位置、色、不透明度、サイズを指定できるのと同じように、三角形オブジェクトの水平スケールも設定できます。これは、scaleX プロパティを使用して行うことができます。

構文

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

パラメータ

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

オプション キー

• scaleX - このプロパティは numeric 値を受け入れます。割り当てられた値によって、オブジェクトの水平スケール係数が決まります。デフォルト値は 1 です。

例 1

scaleX が使用されていない場合のデフォルトの外観

コードを見てみましょうscaleX プロパティが使用されていない場合に三角形オブジェクトがどのように見えるかを示す例。デフォルトでは、三角形オブジェクトの水平スケール係数は 1 です。 scaleX は、X 軸に沿ってオブジェクトのサイズを変更する変換を決定します。

不使用scaleX时的默认外观
您可以看到沿 x 轴没有调整大小


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

scaleX 属性をキーとして渡す

この例では、scaleX 属性は値 2 のキーとして渡されます。これは、三角形オブジェクトの水平方向の倍率が 2 倍になることを意味します。

えええええ

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