ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用して三角形のキャンバスを作成するにはどうすればよいですか?
FabricJS を使用して三角形のキャンバスを作成するにはどうすればよいですか?
- WBOY転載
- 2023-09-15 12:33:03654ブラウズ
このチュートリアルでは、FabricJS を使用して Triangle オブジェクトを含むキャンバスを作成する方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、Fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。
構文
new fabric.Triangle({ width: Number, height: Number }: Object)パラメータ
オプション(オプション)- このパラメータは Object 三角形に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストローク幅、および三角形オブジェクトに関連するその他のプロパティを変更できます。また、その width および height もプロパティです。 。
オプション キー
Width -このプロパティは、幅を指定する number を受け入れます。デフォルト値は 100 です。
Height - このプロパティは、オブジェクトの高さを指定する Number を受け入れます。デフォルト値は 100 です。
例 1
Fabric.Triangle() インスタンスを作成し、キャンバスに追加します strong>
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 サイトの他の関連記事を参照してください。