Heim > Artikel > Web-Frontend > Wie stelle ich die Füllfarbe einer Ellipse mit FabricJS ein?
Wie stelle ich die Füllfarbe einer Ellipse mit FabricJS ein?
- PHPznach vorne
- 2023-08-24 14:37:141311Durchsuche
In diesem Tutorial lernen wir, wie man das Aussehen eines Ellipse-Objekts ändert, indem man seine Füllfarbe mit FabricJS ändert. 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. Wir können die Füllfarbe mithilfe der Eigenschaft fill ändern, mit der wir die Füllfarbe eines Objekts festlegen können.
Syntax
new fabric.Ellipse({ fill: String }: Object)Parameter
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen Füllung die Eigenschaft ist.
Option Key
Padding – Diese Eigenschaft akzeptiert einen String Strong>-Wert, der es uns ermöglicht, die PaddingFarbe des Objekts zu ändern. Der Standardwert ist rgb(0,0,0), also Schwarz.
Beispiel 1
Standard PaddingFarbe des Ellipsenobjekts
Sehen wir uns einen Code an, der die Standardfüllfarbe des Ellipsenobjekts FabricJS zeigt. Wenn wir beim Erstellen des Ellipsenobjekts die Eigenschaft fill komplett überspringen, wird es schwarz gerendert. <!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 fill color of Ellipse using FabricJS?</h2>
<p>Observe the ellipse is rendered black as we have not applied the <b>fill</b> property. This is the default fill color. </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: 215,
top: 100,
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Beispiel 2
Wir können dem
fill-Attribut auch einen beliebigen Farbnamen oder RGBA-Wert zuweisen. In diesem Beispiel haben wir ihm den Wert „skyBlue“ zugewiesen und die Füllfarbe entsprechend geändert. <!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 fill color of Ellipse using FabricJS?</h2>
<p>Here we have used the <b>fill</b> property and used skyBlue color.</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: 215,
top: 100,
fill: "skyBlue",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
});
// 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 Füllfarbe einer Ellipse mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!