FabricJS を使用して長方形の X 軸の傾斜角を設定するにはどうすればよいですか?

このチュートリアルでは、FabricJS を使用して長方形の X 軸の傾斜角度を設定する方法を学びます。 Rectangle は、FabricJS が提供するさまざまな形状の 1 つです。長方形を作成するには、Fabric.Rect クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。

長方形のオブジェクトは、寸法の変更、背景色の追加、X 軸の傾斜角の変更など、さまざまな方法でカスタマイズできます。これを行うには、skewX プロパティを使用します。

構文

new Fabric.Rect({ skewX : Number }: Object )

パラメータ

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

オプション キー

• skewX - このプロパティは digits< /strong> を受け入れますオブジェクトの X 軸の傾斜角度を決定します。

例 1

skewX プロパティが設定されていない場合に適用される

コード例を見て、その方法を理解しましょう。 skewX プロパティが適用されていない場合、長方形のオブジェクトが表示されます。この場合、長方形のオブジェクトはどの角度にも傾いて表示されません。

未应用 skewX 属性时
可以看到默认情况下矩形上任何角度都没有倾斜


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
});

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

例 2

skewX をキーとして渡し、カスタム値を割り当てます。

この例では、skewX に数値を割り当てる方法を見ていきます。 財産。渡された値によって、X 軸に沿った傾きが決まります。

えええええ

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