FabricJS を使用して三角形にストロークを追加するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して三角形にストロークを追加するにはどうすればよいですか?

WBOY

リリース： 2023-09-21 13:49:02

転載

750 人が閲覧しました

如何使用 FabricJS 向三角形添加描边？

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

三角形オブジェクトは、寸法の変更、背景色の追加、オブジェクトの周囲に描かれた線の色の変更など、さまざまな方法でカスタマイズできます。これを行うには、Stroke 属性を使用します。

構文

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

ログイン後にコピー

パラメータ

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

< /ul>
Options Keys
Stroke - このプロパティは、オブジェクトの境界線を決定するための String を受け入れます。の色。
例 1

ストロークを 16 進値のキーとして渡すstrong>

コード例を見て、三角形がどのように機能するかを見てみましょう。 lines プロパティを使用すると、オブジェクトが表示されます。 16 進数のカラーコードは「#」で始まり、その後に色を表す 6 桁の数字が続きます。今回はミッドシーグリーンの「#3cb371」を使用しました。

<!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 stroke as key with a hexadecimal value</h2>
   <p>You can see that the stroke around the triangle is of medium sea-green 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: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: "#ecebbd",
         stroke: "#3cb371",
         strokeWidth: 7,
      });

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

ログイン後にコピー

例 2

rgba 値を StrokeAttribute

この例では、rgba 値を指定する方法を説明します。ストローク属性の場合。 16 進数のカラーコードの代わりに、赤、緑、青、アルファを表す RGBA 値を使用できます。 alpha パラメーターは、色の不透明度を指定します。この例では、rgba 値 (46,139,87,0.8) を使用しました。これは、不透明度 0.8 のシーグリーンです。
えええええ
以上がFabricJS を使用して三角形にストロークを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。