Heim > Artikel > Web-Frontend > Wie stelle ich die Farbe einer Kreiskontrollecke mit FabricJS ein?
Wie stelle ich die Farbe einer Kreiskontrollecke mit FabricJS ein?
- WBOYnach vorne
- 2023-08-23 10:13:14957Durchsuche
In diesem Tutorial verwenden wir FabricJS, um die Farbe der Kontrollecke eines Kreises festzulegen. Mit der Eigenschaft „cornerColor“ können wir die Farbe der Kontrollecken manipulieren, wenn das Objekt aktiv ist. Syntax
new fabric.Circle({ cornerColor: String }: Object)Parameter
Optionen (optional) – Dieser Parameter ist ein Objekt, das Optionen für zusätzliche Anpassungen des Kreises bereitstellt. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften des Objekts ändern, die mit der Eigenschaft cornerColor zusammenhängen.
Wahltaste
cornerColor – Diese Eigenschaft akzeptiert einen string, der es uns ermöglicht, den Kontrollecken des ausgewählten Objekts eine Farbe zuzuweisen.
Beispiel 1
Lassen Sie uns ein Beispiel für die Farbänderung mithilfe des Attributs
cornerColor erhalten. In diesem Fall weisen wir der Taste den Wert „schwarz“ zu, wodurch die Bedienecke schwarz erscheint. <!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>Setting the colour of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </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: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "black"
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Beispiel 2
Wir können dem
stringWert des Schlüssels einen RGBA-Wert zuweisen, anstatt nur einen einfachen Farbnamen zu übergeben. RGBA steht für Rot, Grün, Blau und Transparenz (Alpha). Schauen wir uns ein Beispiel an, wie man dies erreichen kann – <!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>Setting the colour of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </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: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "rgb(255,20,147)"
});
// 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 stelle ich die Farbe einer Kreiskontrollecke mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!