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

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

構文

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

パラメータ

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

< /ul>

オプション キー

• lockSkewingY - このプロパティは Boolean 値を受け入れます。 「true」値を指定すると、オブジェクトの垂直方向の傾きがロックされます。

#例 1

#キャンバス内の Triangle オブジェクトのデフォルトの動作

コード例を見て理解しましょう。

lockSkewingY プロパティが使用されていない場合の Triangle オブジェクトのデフォルトの動作。 shift キー を押して水平または垂直にドラッグすると、オブジェクトを水平および垂直に傾けることができます。

画布中 Triangle 对象的默认行为
您可以按 Shift 键并沿 X 轴或 Y 轴拖动边缘，以查看是否可以在两个方向上倾斜。


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

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

この例では、

lockSkewingY プロパティを使用して、三角形オブジェクトが垂直に傾く機能をブロックする方法を学びます。ご覧のとおり、三角形のオブジェクトを水平方向に傾けることはできますが、同じ操作を垂直方向に行うことはできません。 えええええ

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