Wie mache ich mit FabricJS einen Kreis unsichtbar?-js-Tutorial-php.cn

Inhaltsverzeichnis

Syntax

Parameter

Optionstaste

Making a circle invisible using FabricJS

Heim

Web-Frontend

js-Tutorial

Wie mache ich mit FabricJS einen Kreis unsichtbar?

Aug 26, 2023 pm 10:49 PM

Wie mache ich mit FabricJS einen Kreis unsichtbar?

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)

Nach dem Login kopieren

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 id="Making-a-circle-invisible-using-FabricJS">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>

Nach dem Login kopieren

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 id="Making-a-circle-invisible-using-FabricJS">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>

Nach dem Login kopieren

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn