FabricJS を使用して三角形のキャンバスを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して三角形のキャンバスを作成するにはどうすればよいですか?

WBOY

リリース： 2023-09-15 12:33:03

転載

738 人が閲覧しました

如何使用 FabricJS 创建带有 Triangle 的画布？

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

構文

new fabric.Triangle({ width: Number, height: Number }: Object)

ログイン後にコピー

パラメータ

オプション(オプション)- このパラメータは Object< /em> 三角形に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストローク幅、および三角形オブジェクトに関連するその他のプロパティを変更できます。また、その width および height もプロパティです。。

オプションキー

Width -このプロパティは、幅を指定する number を受け入れます。デフォルト値は 100 です。
Height - このプロパティは、オブジェクトの高さを指定する Number を受け入れます。デフォルト値は 100 です。

例 1

Fabric.Triangle() インスタンスを作成し、キャンバスに追加します

1 つ見てみましょうキャンバスに三角形を追加する方法を学習するコード例。ここでは、幅 100px、高さ 70px のオブジェクトを作成します。さらに、塗りつぶしの色として「orange」という色を使用しました。

<!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>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
   <p>You can move around the triangle and interact with it</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: 55,
         top: 60,
         width: 100,
         height: 70,
         fill: "orange",
      });

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

ログイン後にコピー

例 2

set メソッドを使用して Triangle オブジェクトを操作する

この例では、set メソッドをセッターとして使用します。値。ストローク、ストロークの幅、角度、スケール、回転などに関連するプロパティは、このメソッドを使用して変更できます。
えええええ
以上がFabricJS を使用して三角形のキャンバスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

FabricJS を使用して三角形のキャンバスを作成するにはどうすればよいですか?

構文

パラメータ

オプション キー

例 1

例 2

オプションキー