Heim >Web-Frontend >js-Tutorial >Wie stelle ich die Hintergrundfarbe einer elliptischen Auswahl mit FabricJS ein?
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.
new fabric.Ellipse({ selectionBackgroundColor : String }: Object)
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.
selectionBackgroundColor – Diese Eigenschaft akzeptiert eine Zeichenfolge em>, die die Hintergrundfarbe der Auswahl bestimmt.
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>
Ü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!