FabricJS を使用して Circle の中央スケーリングを無効にする方法は?-jsチュートリアル-php.cn

FabricJS を使用して Circle の中央スケーリングを無効にする方法は?

WBOY

リリース： 2023-09-07 17:13:02

転載

1454 人が閲覧しました

如何使用 FabricJS 禁用 Circle 的居中缩放？

このチュートリアルでは、FabricJS を使用してCircle の中央スケーリングを無効にする方法を学びます。円は、FabricJS が提供するさまざまな形状の 1 つです。サークルを作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。コントロールをスケーリングするときは、オブジェクトの変換原点として中心を使用して、centeredScaling プロパティに true 値を割り当てます。

構文

new fabric.Circle({ centeredScaling: Boolean }: Object)

ログイン後にコピー

パラメータ

オプション (オプション) - このパラメータは追加で提供されます。カスタムオブジェクトをサークルに追加します。このパラメータを使用すると、色、カーソル、ストローク幅、および centeredScaling プロパティ

# オプションキー

## に関連するオブジェクトのその他のプロパティを変更できます。

#centeredScaling - このプロパティは boolean 値を受け入れます。このプロパティが True の場合、オブジェクトは中心を変換原点として使用します。

#例 1

centeredScaling をキーとして渡し、「true」値を割り当てます

centeredScaling

em> プロパティが有効な場合に円形オブジェクトがどのように動作するかをコードのスニペットで見てみましょう。オブジェクトをズームインすると、変換の原点は円の中心になります。

<!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>Disabling the centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </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,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: true
         });

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

ログイン後にコピー

例 2

centeredScaling プロパティの無効化

centeredScaling

プロパティに 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>Disabling the centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: false
         });

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

ログイン後にコピー

以上がFabricJS を使用して Circle の中央スケーリングを無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。