FabricJSを使用して長方形を非表示にする方法は?-jsチュートリアル-php.cn

FabricJSを使用して長方形を非表示にする方法は?

PHPz

リリース： 2023-09-22 13:01:07

転載

886 人が閲覧しました

如何使用 FabricJS 使矩形不可见？

このチュートリアルでは、FabricJS を使用して四角形を非表示にする方法を学びます。 Rectangle は、FabricJS が提供するさまざまな形状の 1 つです。四角形を作成するには、fabric.Rect クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。

四角形オブジェクトは、寸法を変更したり、背景色を追加したり、表示または非表示にしたりするなど、さまざまな方法があります。これを行うには、visible 属性を使用します。

構文

new Fabric.Rect( {visible: Boolean }: Object)

パラメータ< / h2>
オプション (オプション) - このパラメータはオブジェクトです追加のカスタマイズを提供します私たちの長方形に。このパラメータを使用すると、色、カーソル、ストローク幅、およびプロパティが visible であるオブジェクトに関連するその他のプロパティを変更できます。

オプションキー

表示 - このプロパティは、キャンバス上にオブジェクトをレンダリングできるようにする ブール値 を受け入れます。デフォルト値は true です。

例 1

可視プロパティを渡す「true」値を持つキーとして

可視を渡すと何が起こるかを理解するコード例を見てみましょうプロパティの真の価値。値を「True」に指定することで、長方形のオブジェクトがキャンバス上にレンダリングされます。これはデフォルトの動作でもあります FabricJS.

<!DOCTYPE html>
<html>

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

<h2>表示されているプロパティを値「True」のキーとして渡します</h2>
<p>キャンバス上に長方形のオブジェクトが描画されていることがわかります。 </p>
<canvas id="canvas"></canvas>
<スクリプト>
//キャンバスインスタンスを起動する
var Canvas = 新しい Fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

// 四角形オブジェクトを初期化します
varrectangle = 新しい布.rectangle({
左：55、
トップ：60、
幅: 170、
身長：70、
「#f4f0ec」と入力します。
ストローク: "#2a52be"、
ストローク幅: 5、
可視: 本物、
});

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

例

「False」値を使用して、表示されているプロパティをキーとして渡す

visible 属性を値 false のキーとして渡します。 false の値を指定すると、長方形オブジェクトがキャンバスにレンダリングされなくなります。オブジェクトを「非表示」にするだけではなく、完全に削除します。これを使用すると、コードを削除せずにキャンバスからオブジェクトを削除できます。
<!DOCTYPE html> <html>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <h2>表示されているプロパティを値「False」のキーとして渡します</h2> <p>長方形のオブジェクトがキャンバスにレンダリングされていないことがわかります。 </p> <canvas id="canvas"></canvas> <スクリプト> //キャンバスインスタンスを起動する var Canvas = 新しい Fabric.Canvas("canvas"); Canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); // 長方形オブジェクトを初期化します varrectangle = 新しい布.rectangle({ 左：55、トップ：60、幅: 170、身長：70、「#f4f0ec」と入力します。ストローク: "#2a52be"、ストローク幅: 5、可視: false、 }); //キャンバスに追加します Canvas.add(長方形); </スクリプト> </ボディ> </html>
以上がFabricJSを使用して長方形を非表示にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

FabricJSを使用して長方形を非表示にする方法は?

構文

オプション キー

例 1

例

オプションキー