Heim > Artikel > Web-Frontend > Wie mache ich eine Ellipse mit FabricJS unsichtbar?

Wie mache ich eine Ellipse mit FabricJS unsichtbar?

王林nach vorne: 2023-09-01 23:53:02758Durchsuche

如何使用 FabricJS 使椭圆不可见？

In diesem Tutorial lernen wir, wie man mit FabricJS eine Ellipse unsichtbar macht. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, erstellen wir eine Instanz der Fabric.Ellipse-Klasse und fügen sie der Leinwand hinzu. Unser Ellipsenobjekt kann auf viele Arten angepasst werden, z. B. indem es seine Abmessungen ändert, eine Hintergrundfarbe hinzufügt oder es sichtbar oder unsichtbar macht. Wir können dies tun, indem wir das Attribut visible verwenden.

Syntax

new fabric.Ellipse( { visible: Boolean }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften des Objekts im Zusammenhang mit dem Attribut sichtbar ändern.

Optionsschlüssel

Visible – Diese Eigenschaft akzeptiert einen Booleschen 强>-Wert, der es uns ermöglicht, das Objekt auf der Leinwand darzustellen. Der Standardwert ist True.

Beispiel 1

Übergabe des Attributs visible als Schlüssel mit dem Wert „true“

Nehmen wir ein Beispiel, um zu verstehen, was passiert, wenn wir den Wert „true“ an das Attribut visible übergeben. Durch die Angabe des Werts „true“ stellen wir sicher, dass das Ellipse-Objekt auf der Leinwand gerendert wird. Dies ist auch das Standardverhalten in 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>How to make an Ellipse invisible using FabricJS?</h2>
      <p>The object is visible on the canvas because we have set the <b>visible</b> property to True. This is the default behavior. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 100,
            ry: 70,
            fill: "red",
            visible: true,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Beispiel 2

Übergabe des Attributs visible als Schlüssel mit dem Wert „false“

In diesem Beispiel übergeben wir das Attribut visible als Schlüssel mit dem Wert „false“. Durch die Zuweisung eines falschen Werts wird sichergestellt, dass unser Ellipsenobjekt 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 entfernen.

<!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>How to make an Ellipse invisible using FabricJS?</h2>
      <p>Here the ellipse object is invisible because we have set the <b>visible</b> property to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 100,
            ry: 70,
            fill: "red",
            visible: false,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Webassembly mit JavaScript (Wasm)Nächster Artikel：Webassembly mit JavaScript (Wasm)

In Verbindung stehende Artikel

Mehr sehen