FabricJS を使用して三角形の垂直方向の動きをロックするにはどうすればよいですか?

このチュートリアルでは、FabricJS を使用して三角形の垂直方向の動きをロックする方法を学びます。キャンバス内の三角形オブジェクトの位置、色、不透明度、サイズを指定できるのと同じように、X 軸上のみで移動するかどうかも指定できます。これは、lockMovementY 属性を使用して実行できます。

構文

 new Fabric.Triangle({ lockMovementY: Boolean }: Object)

パラメータ

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

< /ul>

オプション キー

• lockMovementY このプロパティは、Boolean 値を受け入れます。 「true」値を指定すると、オブジェクトは垂直方向に移動できなくなります。

#例 1

キャンバス内の三角形オブジェクトのデフォルトの動作< strong>

コード例を見て、その方法を理解しましょう。 ## >lockMovementY

プロパティに「true」値が割り当てられていない場合は、三角形オブジェクトを X 軸または Y 軸上で自由に移動できます。

画布中 Triangle 对象的默认行为
您可以选择三角形并将其拖动。请注意，您可以在水平和垂直方向上移动对象。


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

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

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

ログイン後にコピー
例 2
「true」値を持つキーとして lockMovementY を渡します

この例では、三角形の垂直方向の動きをロックする方法を見ていきます。オブジェクト。

lockMovementY

プロパティに「true」値を割り当てると、基本的に垂直方向の動きが停止します。 えええええ

以上がFabricJS を使用して三角形の垂直方向の動きをロックするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。