suchen

Heim >Web-Frontend >js-Tutorial >Wie mache ich mit FabricJS ein Rechteck unsichtbar?

Wie mache ich mit FabricJS ein Rechteck unsichtbar?

PHPz
PHPznach vorne
2023-09-22 13:01:07894Durchsuche

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Rechteck unsichtbar machen. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Klasse fabric.Rect erstellen und zur Leinwand hinzufügen.

Es gibt verschiedene Möglichkeiten, z. B. die Größe zu ändern, eine Hintergrundfarbe hinzuzufügen oder es sichtbar oder unsichtbar zu machen. Wir können dies tun, indem wir das Attribut visible verwenden.

Syntax

new Fabric.Rect( {visible: Boolean }: Object)
Parameter< h2>

  • Optionen (optional) – Dieser Parameter ist ein Objekt zu unserem Rechteck. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften des Objekts ändern, dessen Eigenschaft visible ist.

Optionstasten

  • visible – Diese Eigenschaft akzeptiert einen Booleschen Wert , der es uns ermöglicht, das Objekt auf der Leinwand darzustellen. Der Standardwert ist true.

Beispiel 1

Pass-visible-Eigenschaft als Schlüssel mit dem Wert „true“

Sehen wir uns ein Codebeispiel an, um zu verstehen, was passiert, wenn wir „visible“ übergeben Der wahre Wert einer Immobilie. Indem wir den Wert als „True“ angeben, stellen wir sicher, dass unser Ein rechteckiges Objekt wird auf die Leinwand gerendert. Dies ist auch das Standardverhalten FabricJS.

<!DOCTYPE html>
<html>
<Kopf>
<!--Fabric JS-Bibliothek hinzufügen-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<Körper>
<h2>Sichtbare Eigenschaften als Schlüssel mit dem Wert „True“ übergeben</h2>
<p>Sie können sehen, dass das rechteckige Objekt auf der Leinwand gerendert wurde. </p>
<canvas id="canvas"></canvas>
<script>
//Starten Sie die Canvas-Instanz
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//Initialisiere ein Rechteckobjekt
var rechteck = neues Tuch.
Links: 55,
Oben: 60,
Breite: 170,
Höhe: 70,
Ausfüllen: „#f4f0ec“,
Strich: „#2a52be“,
Strichbreite: 5,
Sichtbar: echt,
});

//Füge es der Leinwand hinzu
canvas.add(Rechteck);
</script>
</body>
</html>

Beispiel

Übergabe sichtbarer Eigenschaften als Schlüssel mit einem „False“-Wert

< ;p> ;In diesem Beispiel übergeben wir das Attribut visible als Schlüssel mit dem Wert false. Durch die Angabe eines falschen Werts wird sichergestellt, dass unser Rechteckobjekt nicht auf der Leinwand gerendert wird. Es macht das Objekt einfach nicht „unsichtbar“, sondern entfernt es vollständig. Es kann verwendet werden, um ein Objekt von der Leinwand zu entfernen, ohne seinen Code zu löschen. 

<!DOCTYPE html>
<html>
<Kopf>
<!--Fabric JS-Bibliothek hinzufügen-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<Körper>
<h2>Sichtbare Eigenschaften als Schlüssel mit dem Wert „False“ übergeben</h2>
<p>Sie können sehen, dass das rechteckige Objekt nicht auf der Leinwand gerendert wurde. </p>
<canvas id="canvas"></canvas>
<script>
//Starten Sie die Canvas-Instanz
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//Initialisiere ein Rechteckobjekt
var rechteck = neues Tuch.
Links: 55,
Oben: 60,
Breite: 170,
Höhe: 70,
Ausfüllen: „#f4f0ec“,
Strich: „#2a52be“,
Strichbreite: 5,
Sichtbar: falsch,
});

//Füge es der Leinwand hinzu
canvas.add(Rechteck);
</script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie mache ich mit FabricJS ein Rechteck unsichtbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript ajax html Boolean Object class var JS 对象 canvas ul li https fabric
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wofür wird Sessionstorage verwendet?Nächster Artikel：Wofür wird Sessionstorage verwendet?

In Verbindung stehende Artikel

Mehr sehen