FabricJSを使用して円の回転角度を設定するにはどうすればよいですか?-jsチュートリアル-php.cn

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

王林

リリース： 2023-09-14 08:57:23

転載

1584 人が閲覧しました

如何使用 FabricJS 设置圆的旋转角度？

このチュートリアルでは、FabricJS を使用して円の回転角度を設定します。円は、FabricJS が提供するさまざまな形状の 1 つです。サークルを作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。 FabricJS の angle プロパティは、オブジェクトの 2D 回転角度を定義します。また、centeredRotation プロパティもあります。これを使用すると、円の中心点を変換の原点として使用できます。

構文

new fabric.Circle({ angle: Number, centeredRotation: Boolean }: Object)

ログイン後にコピー

パラメータ

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

オプションキー

Angle - このプロパティは # を受け入れます##Number、円の回転角度を度単位で指定します。
centeredRotation - このプロパティは、中心を決定する Boolean 値を受け入れます。円変身の原点かどうか。

例 1

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

以下の例は、その方法を示しています。 FabricJSで円の回転角度を設定します。負の角度は反時計回りの方向を指定し、正の角度は時計回りの方向を指定します。

centeredRotation に False 値を指定したため、円はその角を回転の中心として使用して回転します。

<!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>Set the angle of rotation of a Circle using FabricJS</h2>
      <p>Select the object and observe its controlling corners. You will notice that the angle of rotation is set at 60 degrees in the anti-clockwise direction, as we have set the <b>angle</b> at <b>-60</b>. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -60,
            centeredRotation: false,
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

ログイン後にコピー

例 2

円の中心回転を有効にする

この例から、

centeredRotation を次のように設定するとわかります。プロパティ True を使用すると、円はその中心を回転の中心として使用します。バージョン 1.3.4 より前では、centeredScaling と centeredRotation は centerTransform というプロパティに含まれていました。うわー

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