ホームページ >ウェブフロントエンド >jsチュートリアル >FabricJSを使用して左からの三角形の位置を設定するにはどうすればよいですか?
FabricJSを使用して左からの三角形の位置を設定するにはどうすればよいですか?
- WBOY転載
- 2023-09-11 17:05:091229ブラウズ
このチュートリアルでは、FabricJS を使用して左から三角形の位置を設定する方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。
三角形オブジェクトの位置を変更できます。不透明度、ストロークとその寸法を使用して、三角形のオブジェクトを操作します。 left プロパティを使用して、左側の位置を変更できます。
構文
new Fabric.Triangle( { left: Number }: Object ) パラメータ
オプション (オプション)phpcnltphp cn /strong> - このパラメータは、三角形に追加のカスタマイズを提供する Object です。このパラメータを使用すると、属性として left を使用して、色、カーソル、ストローク幅、およびオブジェクトに関連するその他のプロパティを変更できます。
オプション キー
left - このプロパティは、オブジェクトの左位置を設定する Number 値を受け入れます。この値は、オブジェクトがキャンバスの左端からどのくらい離れた位置に配置されるかを決定します。
例 1
三角形オブジェクトのデフォルトの配置 コードを見てみましょう位置が変更されていない場合のキャンバス上の三角形オブジェクトのデフォルトの配置を理解するための例です。 左側の属性をキーとして渡す この例ではたとえば、left 属性にカスタム値を割り当てています。 Number を受け入れるため、左からの位置を表す数値を割り当てる必要があります。 <! DOCTYPE html>
<html>
<!-- Fabric JS ライブラリを追加します-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<h2>三角形オブジェクトのデフォルトの配置</h2>
<p>三角形のデフォルトの位置を確認できます</p>
<canvas id="canvas"></canvas>
<スクリプト>
//キャンバスインスタンスを起動する
var Canvas = 新しい Fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
//三角形オブジェクトを初期化する
var 三角形 = 新しい Fabric.Triangle({
トップ：50、
「#b0e0e6」と入力してください。
身長：90、
幅: 100、
});
//キャンバスに追加します
Canvas.add(三角形);
</スクリプト>
</ボディ>
</html>例 2
<!DOCTYPE html>
<html>
<!-- Fabric JS ライブラリを追加します-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<h2>左のプロパティをキーとして渡します</h2>
<p>三角形が左から 80px のところに配置されていることがわかります。 </p>
<canvas id="canvas"></canvas>
<スクリプト>
//キャンバスインスタンスを起動する
var Canvas = 新しい Fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
//三角形オブジェクトを初期化する
var 三角形 = 新しい Fabric.Triangle({
左：80、
トップ：50、
「#b0e0e6」と入力してください。
身長：90、
幅: 100、
});
//キャンバスに追加します
Canvas.add(三角形);
</スクリプト>
</ボディ>
</html>
以上がFabricJSを使用して左からの三角形の位置を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。