ホームページ >ウェブフロントエンド >jsチュートリアル >FabricJS を使用して円のスケール係数 (境界線) を設定するにはどうすればよいですか?

FabricJS を使用して円のスケール係数 (境界線) を設定するにはどうすればよいですか?

王林
王林転載
2023-08-24 15:45:18746ブラウズ

如何使用 FabricJS 设置圆的比例因子(边框)?

このチュートリアルでは、FabricJS を使用して円の倍率 (境界線) を設定します。円は、FabricJS が提供するさまざまな形状の 1 つです。サークルを作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。 borderScaleFactor プロパティを使用して、境界線を制御するオブジェクトのスケール係数を指定できます。

構文

new fabric.Circle({ borderScaleFactor: Number }: Object)

パラメータ

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

  • ul>

    オプション キー

    • borderScaleFactor - このプロパティ境界線の太さを指定する numbers を受け入れます。デフォルト値は 1 です。

    例 1

    borderScaleFactorプロパティのデフォルトの動作

    プロパティの説明を見てみましょう。 borderScaleFactor プロパティ デフォルトの動作の例。この例では指定しましたが、borderScaleFactor は指定しなくてもデフォルトで 1 を使用します。

    <!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 the scale factor (border) of circle using FabricJS</h2>
          <p>Select the object and notice its border. Here we have set <b>borderScaleFactor</b> at 1, which is the default value. </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: "#966fd6",
                borderScaleFactor: 1
             });
    
             // Adding it to the canvas
             canvas.add(cir);
             canvas.setWidth(document.body.scrollWidth);
             canvas.setHeight(250);
          </script>
       </body>
    </html>

    例 2

    borderScaleFactor をキーとして渡す

    円形オブジェクトの境界線がアクティブなときに、その境界線の太さを増やすコードを見てみましょう。選択されました。この例では、境界線の太さを指定する borderScaleFactor に値 5 を割り当てました。

    えええええ

以上がFabricJS を使用して円のスケール係数 (境界線) を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。