ホームページ >ウェブフロントエンド >jsチュートリアル >FabricJSを使用して円を非表示にする方法は?
FabricJSを使用して円を非表示にする方法は?
- WBOY転載
- 2023-08-26 22:49:11739ブラウズ
このチュートリアルでは、FabricJS を使用して円を非表示にする方法を学びます。 Circle は、FabricJS が提供するさまざまな形状の 1 つです。円を作成するには、fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。円オブジェクトは、サイズの変更、背景色の追加、表示または非表示など、さまざまな方法でカスタマイズできます。これは、visible 属性を使用することで実現できます。
構文
new fabric.Circle( { visible: Boolean }: Object)パラメータ
オプション (オプション) - このパラメータは Object は、サークルをさらにカスタマイズするためのオプションを提供します。このパラメータを使用すると、色、カーソル、ストローク幅、その他多くのプロパティなど、このオブジェクトに関連するプロパティを変更できます。visible はプロパティです。
オプション キー
visible - このプロパティは boolean 値を受け入れ、次のことを可能にします。オブジェクトはキャンバス上にレンダリングされます。デフォルト値は True です。
例 1
可視属性をキーとして渡し、それに「true」値を与える
1 つのコードを見てみましょう。 visible プロパティに True 値を渡すと何が起こるかを理解してください。値を「true」に指定すると、円オブジェクトがキャンバスにレンダリングされます。これは FabricJS のデフォルトの動作でもあります。
<!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>Making a circle invisible using FabricJS</h2>
<p>Here, the circle is visible because we have set <b>visible</b> to True. This is the default behavior. So, even if we don't apply the <b>visible</b> property, it will be set to True, by defalt. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "#adff2f",
radius: 50,
stroke: "#228b22",
visible: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
表示属性をキーとして渡し、「false」値に設定します。
この例では、表示属性を渡します。をキーとして使用し、False 値に設定します。これを false 値に設定すると、円オブジェクトがキャンバスにレンダリングされなくなります。オブジェクトを「非表示」にするだけではなく、完全に削除します。これを使用すると、コードを削除せずにキャンバスからオブジェクトを削除できます。
えええええ以上がFabricJSを使用して円を非表示にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。