Heim >Web-Frontend >js-Tutorial >Wie mache ich mit FabricJS einen Kreis unsichtbar?

Wie mache ich mit FabricJS einen Kreis unsichtbar?

WBOYnach vorne: 2023-08-26 22:49:11760Durchsuche

In diesem Tutorial lernen wir, wie man mit FabricJS einen Kreis unsichtbar macht. Kreis ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Klasse fabric.Circle erstellen und sie der Leinwand hinzufügen. Unser Kreisobjekt kann auf viele Arten angepasst werden, z. B. indem es seine Größe ändert, eine Hintergrundfarbe hinzufügt oder es sichtbar oder unsichtbar macht. Dies können wir erreichen, indem wir das Attribut visible verwenden.

Syntax

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

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das Optionen für zusätzliche Anpassungen unseres Kreises bietet. Mit diesem Parameter können Sie die Eigenschaften dieses Objekts ändern, z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften, von denen visible eine Eigenschaft ist.

Optionstaste

visible – Diese Eigenschaft akzeptiert einen booleschen-Wert, der es uns ermöglicht, das Objekt auf der Leinwand darzustellen. Der Standardwert ist True.
? Indem wir den Wert als „true“ angeben, stellen wir sicher, dass unser Kreisobjekt auf der Leinwand gerendert wird. Dies ist auch das Standardverhalten von 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&#39;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>

Beispiel 2

Die sichtbare Eigenschaft als Schlüssel übergeben und auf den Wert „falsch“ setzen

In diesem Beispiel übergeben wir die sichtbare Eigenschaft als Schlüssel und setzen sie auf den Wert „Falsch“. Wenn Sie diesen Wert auf „falsch“ setzen, wird sichergestellt, dass unser Kreisobjekt nicht auf der Leinwand gerendert wird. Dadurch wird das Objekt nicht nur „unsichtbar“, sondern vollständig entfernt. Es kann verwendet werden, um ein Objekt von der Leinwand zu entfernen, ohne seinen Code zu löschen.

<!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>Notice that the circle is invisible here, as we have set <b>visible</b> to False. </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: false
         });
   
         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonWie mache ich mit FabricJS einen Kreis 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：Finden Sie die verstrichene Zeit in JavaScriptNächster Artikel：Finden Sie die verstrichene Zeit in JavaScript

In Verbindung stehende Artikel

Mehr sehen