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

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

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

構文

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

パラメータ

• オプション (オプション) - このパラメータは オブジェクト です。それが私たちの長方形です。このパラメータを使用すると、色、カーソル、ストローク幅などのプロパティ、および angle とcenteredRotationがプロパティである四角形に関連するその他の多くのプロパティを変更できます。

オプション キー

• Angle - このプロパティは、指定された number 回転角度を受け入れます。長方形(度単位)。

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

例 1

カスタム値を持つキーとして角度を渡し、四角形の中心回転を無効にします

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

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


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：125，
顶部：90，
宽度：170，
身高：70，
填写：“#cf1020”，
居中旋转：假，
角度：15，
});

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

例 2

四角形の中心回転を有効にする

この例から、centeredRotation プロパティを true に設定すると、 長方形はその中心を回転の中心として使用します。バージョン 1.3.4 より前では、 CenteredScalingとcenteredRotationは、というパッケージに含まれています。 センタートランスフォーム。

えええええ

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