ホームページ > 記事 > ウェブフロントエンド > FabricJSを使用して長方形のY軸の傾斜角を設定するにはどうすればよいですか?
FabricJSを使用して長方形のY軸の傾斜角を設定するにはどうすればよいですか?
- WBOY転載
- 2023-09-09 21:33:031202ブラウズ
このチュートリアルでは、y 軸の傾斜角を設定する方法を学習します。 FabricJSを使用した長方形。長方形は、によって提供されるさまざまな形状の 1 つです。 FabricJS。長方形を作成するにはインスタンスを作成する必要があります fabric.Rect クラスを作成し、キャンバスに追加します。
私たちの長方形のオブジェクトは、寸法の変更など、さまざまな方法でカスタマイズできます。 背景色を追加するか、Y 軸の傾斜角度を変更します。私たちにできること これは、skewY 属性を使用して実現されます。
構文
new fabric.Rect({ skewY : Number }: Object)パラメータ
オプション (オプション) - このパラメータは、四角形であるオブジェクトです。追加のカスタマイズを提供します。 。このパラメータを使用すると、色、カーソル、ストローク幅などのプロパティ、および skewY が属性であるオブジェクトに関連付けられたその他の多くのプロパティを変更できます。
オプション キー
skewY - このプロパティは、 angle Numbery 軸上のオブジェクトの傾き。
skewY 属性が適用されない場合 p>skewY 属性が適用されるタイミングを理解するために、コード例を見てみましょう。属性は適用されません
skewY 属性、四角形 オブジェクト がどのように表示されるか。この場合、長方形のオブジェクトには角度の傾きはありません。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>When the skewY property is not applied</h2>
<p>You can see there is no skew by any angle on the rectangle by default</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 105,
top: 70,
width: 170,
height: 70,
fill: "#8f9779",
stroke: "#8fbc8f",
strokeWidth: 9,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>例 2
skewY をキーとして渡し、カスタム値を割り当てます。
この例では、skewY の値を割り当てる方法を見ていきます。 財産。渡された値によって、Y 軸に沿った傾きが決まります。えええええ
以上がFabricJSを使用して長方形のY軸の傾斜角を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。