ホームページ > 記事 > ウェブフロントエンド > FabricJSを使用して左から始まる円の位置を設定するにはどうすればよいですか?
FabricJSを使用して左から始まる円の位置を設定するにはどうすればよいですか?
- WBOY転載
- 2023-09-01 13:25:02734ブラウズ
このチュートリアルでは、FabricJS を使用して左から円の位置を設定する方法を学びます。円は、FabricJS が提供するさまざまな形状の 1 つです。サークルを作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。円形オブジェクトの位置、不透明度、ストローク、サイズを変更することで、円形オブジェクトを操作できます。 left プロパティを使用して、左から位置を変更できます。
構文
new fabric.Circle( { left: Number }: Object)パラメータ
オプション (オプション) - このパラメータは Object サークルに追加のカスタマイズを提供します。このパラメータを使用すると、left が属性であるオブジェクトに関連するプロパティ (色、カーソル、ストローク幅、その他の多くのプロパティなど) を変更できます。
ul>left - このプロパティは を受け入れます数値 オブジェクトの左位置を設定します。この値は、オブジェクトを左にどれだけ配置するかを決定します。
オプション キー
例 1
円オブジェクトのデフォルトの配置
円を理解するためにコード例を見てみましょう。 オブジェクトのデフォルトの位置キャンバス内の位置が変更されていないとき。
<!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>Setting the position of Circle from left using FabricJS</h2>
<p>This is the default placement of the circle. Here we have not used the <b>left</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
fill: "white",
radius: 100,
stroke: "yellow",
strokeWidth: 3
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
左属性をキーとして渡す
この例では、カスタム値を割り当てます。 digits を受け入れるため、左からの位置を表す数値を割り当てる必要があります。 えええええ
以上がFabricJSを使用して左から始まる円の位置を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。