FabricJSを使用して左からの三角形の位置を設定するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJSを使用して左からの三角形の位置を設定するにはどうすればよいですか?

WBOY

リリース： 2023-09-11 17:05:09

転載

1186 人が閲覧しました

如何使用 FabricJS 设置三角形从左开始的位置？

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

三角形オブジェクトの位置を変更できます。不透明度、ストロークとその寸法を使用して、三角形のオブジェクトを操作します。 left プロパティを使用して、左側の位置を変更できます。

構文

new Fabric.Triangle( { left: Number }: Object )

パラメータ

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

オプションキー
left - このプロパティは、オブジェクトの左位置を設定する Number 値を受け入れます。この値は、オブジェクトがキャンバスの左端からどのくらい離れた位置に配置されるかを決定します。

例 1
三角形オブジェクトのデフォルトの配置
コードを見てみましょう位置が変更されていない場合のキャンバス上の三角形オブジェクトのデフォルトの配置を理解するための例です。
<! DOCTYPE html> <html>  <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
左側の属性をキーとして渡す
この例ではたとえば、left 属性にカスタム値を割り当てています。 Number を受け入れるため、左からの位置を表す数値を割り当てる必要があります。
<!DOCTYPE html> <html>  <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 サイトの他の関連記事を参照してください。