FabricJS を使用して長方形の回転をロックするにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して長方形の回転をロックするにはどうすればよいですか?

王林

リリース： 2023-08-24 19:29:08

転載

1223 人が閲覧しました

FabricJS を使用して長方形の回転をロックするにはどうすればよいですか?

このチュートリアルでは、FabricJS を使用して長方形の回転をロックする方法を学びます。キャンバス内の長方形オブジェクトの位置、色、不透明度、寸法を指定できるのと同じように、オブジェクトを回転するかどうかも指定できます。これは、lockRotation 属性を使用して実行できます。

構文

new fabric.Rect({ lockRotation : Boolean }: Object)

ログイン後にコピー

パラメータ

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

オプションキー

lockRotation - このプロパティはブール値を受け入れます。「true」値を指定すると、オブジェクトの回転がロックされます。

例 1

キャンバス内の四角形オブジェクトのデフォルトの動作

コード例を見て、デフォルトの動作を理解しましょう。 lockRotation プロパティを使用する場合の長方形オブジェクトの動作。デフォルトでは、長方形のオブジェクトを反時計回りまたは時計回りに回転できます。

<!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>Default behaviour of a Rectangle object in the canvas</h2>
   <p>You can try rotating the rectangle to see the default behaviour</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "black",
         padding: 9,
         stroke: "#483d8b",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

ログイン後にコピー

例 2

True 値を持つキーとして lockRotation を渡します

この例では、四角形の lockRotation プロパティの関数の使用を停止する方法を示します。オブジェクトを回転します。ご覧のとおり、長方形のオブジェクトを回転しようとするとすぐにカーソルが表示されますが、これは許可されていません。これは、回転操作が許可されなくなったことを意味します。

えええええ

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