ホームページ > 記事 > ウェブフロントエンド > FabricJSを使用して長方形を非表示にする方法は?
FabricJSを使用して長方形を非表示にする方法は?
- PHPz転載
- 2023-09-22 13:01:07870ブラウズ
このチュートリアルでは、FabricJS を使用して四角形を非表示にする方法を学びます。 Rectangle は、FabricJS が提供するさまざまな形状の 1 つです。四角形を作成するには、fabric.Rect クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。
四角形オブジェクトは、寸法を変更したり、背景色を追加したり、表示または非表示にしたりするなど、さまざまな方法があります。これを行うには、visible 属性を使用します。
構文
new Fabric.Rect( {visible: Boolean }: Object) パラメータ< / h2>オプション (オプション) - このパラメータは オブジェクト です 追加のカスタマイズを提供します私たちの長方形に。このパラメータを使用すると、色、カーソル、ストローク幅、およびプロパティが visible であるオブジェクトに関連するその他のプロパティを変更できます。
オプション キー
表示 - このプロパティは、キャンバス上にオブジェクトをレンダリングできるようにする ブール値 を受け入れます。デフォルト値は true です。
例 1
オプション (オプション) - このパラメータは オブジェクト です 追加のカスタマイズを提供します私たちの長方形に。このパラメータを使用すると、色、カーソル、ストローク幅、およびプロパティが visible であるオブジェクトに関連するその他のプロパティを変更できます。
表示 - このプロパティは、キャンバス上にオブジェクトをレンダリングできるようにする ブール値 を受け入れます。デフォルト値は true です。
可視プロパティを渡す「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」値を使用して、表示されているプロパティをキーとして渡す
<!DOCTYPE html>
<html>
<!-- Fabric JS ライブラリを追加します-->
<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 サイトの他の関連記事を参照してください。