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

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

WBOY

リリース： 2023-09-17 16:25:02

転載

918 人が閲覧しました

如何使用 FabricJS 设置三角形从顶部的位置？

このチュートリアルでは、FabricJS を使用して三角形の位置を設定します。 top プロパティを使用すると、オブジェクトの位置を操作できます。デフォルトでは、上部の位置はオブジェクトの上部を基準にしています。

構文

 new Fabric.Triangle({ top: Number }: Object)< /pre><h2>パラメータ</h2><ul class="list"><li><p><strong> オプション< ;/strong><strong> (オプション)</strongphpcngtphp cn - このパラメータは、三角形に追加のカスタマイズを提供する <em>Object</em> です。このパラメータを使用すると、属性として <em>top</em> を使用して、色、カーソル、ストローク幅、およびオブジェクトに関連するその他のプロパティを変更できます。 </p></li></ul><h2>オプション キー</h2phpcngt phpcn<ul Class= list"><li><p><strong>top</strong> - このプロパティは、キャンバスの上部から三角形までの距離を設定できる <strong>数値</strong> を受け入れます。</p></li> </ul><h2>例 1</h2> <p><strong>三角形オブジェクトのデフォルトの外観</strong></p><p>トップのプロパティが次の場合に三角形オブジェクトがどのように表示されるかをコード例で見てみましょう。使用されません。</ p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html>
<html>

<!-- Fabric JS ライブラリを追加します-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>

<h2> 三角形オブジェクトのデフォルトの外観</h2>
<p> 三角形のデフォルトの外観は、<b>top</b> 属性が使用されていない場合に表示されます。 </p>
<canvas id="canvas"></canvas>
<スクリプト>
//キャンバスインスタンスを起動する
var Canvas = 新しい Fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//三角形オブジェクトを初期化する
var 三角形 = 新しい Fabric.Triangle({
左：105、
幅: 90、
身長：80、
「#ffc1cc」と入力してください。
ストローク: "#fbaed2",
ストローク幅: 5、
});

//キャンバスに追加します
Canvas.add(三角形);
</スクリプト>
</ボディ>
</html>

例 2

カスタム値を使用して top 属性をキーとして渡す

この例では、top 属性を値 70 のキーとして渡します。これは、三角形オブジェクトが上から 70 ピクセルの位置に配置されることを意味します。

<!DOCTYPE html>
<html>

<!-- Fabric JS ライブラリを追加します-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>

<h2>トップ属性をカスタム値を持つキーとして渡します</h2>
<p>三角形のオブジェクトが上から 70px の位置に配置されていることがわかります</p>
<canvas id="canvas"></canvas>
<スクリプト>
//キャンバスインスタンスを起動する
var Canvas = 新しい Fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//三角形オブジェクトを初期化する
var 三角形 = 新しい Fabric.Triangle({
左：105、
トップ：70、
幅: 90、
身長：80、
「#ffc1cc」と入力してください。
ストローク: "#fbaed2",
ストローク幅: 5、
});

//キャンバスに追加します
Canvas.add(三角形);
</スクリプト>
</ボディ>
</html>

以上がFabricJSを使用して上から三角形の位置を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。