FabricJSを使用して三角形の回転角度を設定するにはどうすればよいですか?

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

angleオブジェクトの 2D 回転角度は、プロパティ FabricJS で定義されます。また、centeredRotation プロパティもあります。これを使用すると、三角形の中心点を変換の原点として使用できます。

構文

new Fabric.Triangle({ angle: Number, centeredRotation: Boolean }: Object)

パラメータ

• < strong>オプション(オプション) - このパラメータは Object は、三角形に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストローク幅、および angle プロパティと centeredRotation プロパティに関連する三角形のその他のプロパティを変更できます。 < /p>

オプション キー

• Angle - このプロパティは Number を受け入れ、回転角度を指定します。三角形 (度単位)。

• centeredRotation - このプロパティは、三角形の中心が変換の原点であるかどうかを決定する Boolean 値

例 1

角度をキーとして渡すカスタム値を使用し、三角形の中心回転を無効にする

コード例を見てみましょうFabricJS で三角形の回転角度を設定します。負の角度は反時計回りの方向を指定し、正の角度は時計回りの方向を指定します。 centeredRotation に false 値を割り当てたため、三角形はその角の点を回転の中心として使用して回転します。

将角度作为带有自定义值的键并禁用三角形的居中旋转
旋转三角形可以看到居中旋转已被禁用。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
填写：“#deb887”，
居中旋转：假，
角度：15，
});

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

例 2