Heim > Artikel > Web-Frontend > Wie stelle ich die Hintergrundfarbe einer elliptischen Auswahl mit FabricJS ein?

Wie stelle ich die Hintergrundfarbe einer elliptischen Auswahl mit FabricJS ein?

PHPznach vorne: 2023-09-10 13:13:021428Durchsuche

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Hintergrundfarbe einer elliptischen Auswahl festlegen. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, müssen wir eine Instanz der Fabric.Ellipse-Klasse erstellen und sie der Leinwand hinzufügen. Wenn ein Objekt aktiv ausgewählt wird, können wir die Abmessungen des Objekts ändern, es drehen oder manipulieren. Wir können die Hintergrundfarbe der elliptischen Auswahl mithilfe der Eigenschaft selectionBackgroundColor ändern.

Syntax

new fabric.Ellipse({ selectionBackgroundColor : String }: 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 ändern, die sich auf das Objekt beziehen, dessen selectionBackgroundColor eine Eigenschaft ist.

Optionstaste

selectionBackgroundColor – Diese Eigenschaft akzeptiert eine Zeichenfolge em>, die die Hintergrundfarbe der Auswahl bestimmt.

Beispiel 1

selectionBackgroundColor-Attribut nicht verwendet

Nehmen wir ein Beispiel, um zu verstehen, wie die Auswahl angezeigt wird, wenn das selectionBackgroundColor-Attribut nicht verwendet wird. Anhand dieses Beispiels können wir erkennen, dass der Auswahlbereich bzw. der Bereich hinter dem Objekt keine Farbe hat.

<!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 set the background color of selection of Ellipse using FabricJS?</h2>
      <p>Select the object and you will observe that the selection background has no color. Here we have not applied the <b>selectionBackgroundColor</b> property. </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: 80,
            ry: 50,
            fill: "#ff1493",
         });

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

Beispiel 2

Übergabe der Eigenschaft selectionBackgroundColor als Schlüssel

In diesem Beispiel weisen wir der Eigenschaft selectionBackgroundColor einen Wert zu. In diesem Fall übergeben wir ihm die Farbe „darkBlue“, sodass der Auswahlbereich dunkelblau aussieht.

<!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 set the background color of selection of Ellipse using FabricJS?</h2>
      <p>Select the object and you will observe that the background of the selection appears dark blue. This is because we have set the <b>selectionBackgroundColor</b> as dark blue. </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: 80,
            ry: 50,
            fill: "#ff1493",
            selectionBackgroundColor: "darkBlue",
         });

         // 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 stelle ich die Hintergrundfarbe einer elliptischen Auswahl mit FabricJS ein?. 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：Was ist der Unterschied zwischen den Methoden forEach() und map() in JavaScript?Nächster Artikel：Was ist der Unterschied zwischen den Methoden forEach() und map() in JavaScript?

In Verbindung stehende Artikel

Mehr sehen