ホームページ  >  記事  >  ウェブフロントエンド  >  FabricJS を使用して境界線の色を持つ三角形を作成するにはどうすればよいですか?

FabricJS を使用して境界線の色を持つ三角形を作成するにはどうすればよいですか?

WBOY
WBOY転載
2023-09-12 12:29:021397ブラウズ

如何使用 FabricJS 创建带有边框颜色的三角形?

このチュートリアルでは、FabricJS を使用して境界線の色を持つ三角形を作成します。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、Fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。

FabricJS は非常に柔軟なので、三角形オブジェクトを好きなようにカスタマイズできます。 FabricJS によって提供されるプロパティの 1 つは borderColor で、これを使用すると、オブジェクトがアクティブなときに境界線の色を操作できます。

構文

new fabric.Triangle({ borderColor: String }: Object)

パラメータ

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

  • Option Key

    • borderColor - このプロパティは、選択範囲を指定する string を受け取ります。三角形オブジェクトの境界線の色。デフォルト値は rgb(178,204,255) です。

    例 1

    文字列値を使用して borderColour キーを渡す

    コード例を見て、その方法を理解しましょう。 borderColor プロパティの割り当て。値「blue」を borderColor キーに割り当てました。これは、三角形オブジェクトが選択されたときに青い境界線を作成するのに役立ちます。

    <!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>Passing borderColour key with a String value</h2>
       <p>Select the triangle to see the border colour</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 triangle object
          var triangle = new fabric.Triangle({
             left: 105,
             top: 60,
             width: 100,
             height: 70,
             fill: "#deb887",
             borderColor: "blue",
          });
    
          // Add it to the canvas
          canvas.add(triangle);
       </script>
    </body>
    </html>

    例 2

    単純な色の名前を文字列として指定する代わりに、RGBA 値を borderColor キー

    に渡します。ちなみに、RGBA 値を使用することもできます。この値のコンポーネントは、赤、緑、青、アルファの量を指定します。アルファは不透明度を表します。この例では、紫の RGB 値である rgb(128,0,128) を使用しました。

    えええええ

以上がFabricJS を使用して境界線の色を持つ三角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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