FabricJS キャンバスでユニファイドスケーリングを有効/無効にするカスタムキーを設定するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS キャンバスでユニファイドスケーリングを有効/無効にするカスタムキーを設定するにはどうすればよいですか?

PHPz

リリース： 2023-09-07 11:57:08

転載

1010 人が閲覧しました

如何设置自定义键以启用/禁用 FabricJS 画布上的统一缩放？

この記事では、FabricJS でユニファイドスケーリングを有効/無効にするカスタムキーを設定する方法を学びます。 FabricJS では、オブジェクトを隅からドラッグすると、オブジェクトは比例して変形します。これを均一スケーリングと呼びます。ただし、uniScaleKey を使用してこの動作を有効/無効にすることができます。

構文

new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)

ログイン後にコピー

パラメータ

element - このパラメータは要素そのものです, 文書導出が使用できます。 getElementById() または要素自体の ID。 FabricJS キャンバスはこの要素で初期化されます。

オプション (オプション) - このパラメータは、キャンバスに追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅など、キャンバスに関連する多くの属性を変更できます。uniScaleKey はその属性の 1 つです。どのキーが統合スケーリングを切り替えるかを決定する文字列値を受け入れます。デフォルト値はshiftKeyです。

例 1

値「altKey」を使用して uniScaleKey 属性を渡す

FabricJS コード例でユニファイドスケーリングを無効にするカスタマイズを見てみましょう鍵用。ここでは、uniScaleKey を「altKey」に設定します。

<!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>Setting a custom key to enable/disable uniform scaling on a canvas</h2>
   <p>Hold the <b>alt</b> key and stretch the object diagonally. The object will scale non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
   // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniformScaling: true,
         uniScaleKey: "altKey"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange",
      });
      // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
   </script>
</body>
</html>

ログイン後にコピー