FabricJSを使用して長方形のY軸の傾斜角を設定するにはどうすればよいですか?-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-09-09 21:33:03

転載

1275 人が閲覧しました

如何使用 FabricJS 设置矩形 Y 轴的倾斜角度？

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

私たちの長方形のオブジェクトは、寸法の変更など、さまざまな方法でカスタマイズできます。背景色を追加するか、Y 軸の傾斜角度を変更します。私たちにできることこれは、skewY 属性を使用して実現されます。

構文

new fabric.Rect({ skewY : Number }: Object)

ログイン後にコピー

パラメータ

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

オプションキー

skewY - このプロパティは、 angle Numbery 軸上のオブジェクトの傾き。

例 1

skewY 属性が適用されない場合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 サイトの他の関連記事を参照してください。