In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Farbe einer Linienkontrollecke festlegen. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von fabric.Line erstellen, die X- und Y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Mit der Eigenschaft „cornerColor“ können wir die Farbe der Kontrollecken manipulieren, während das Objekt aktiv ist. Grammatik
new fabric.Line( points: Array, { cornerColor: String }: Object)
Punkte – Dieser Parameter akzeptiert ein Array von Punkten, das die Werte (x1, y1) und (x2, y2) bestimmt, bei denen es sich um die x-Achsen- und y-Achsen-Koordinaten von Anfang und Ende handelt Punkte der Linie bzw.
Optionen (optional) – Dieser Parameter ist ein Objekt , das für unsere Zwecke nützlich ist. 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 Eigenschaft cornerColor ist.
cornerColor – Diese Eigenschaft akzeptiert einen String, der es uns ermöglicht, der Ecke eine Farbe zuzuweisen, um den Eckpunkt zu steuern, wenn das Objekt aktiv ausgewählt wird. Der Standardwert ist rgb(178.204.255).
verwendet, um die Farbe zu ändern. In diesem Beispiel haben wir der Taste den Wert „Orange“ zugewiesen, wodurch die Ecken der Steuerelemente orange angezeigt werden.
<!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>Passing cornerColor as key with a color name as value</h2>
<p>
You can select the line object to see that the corner colour is orange
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
cornerColor: "orange"
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
<!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>Assigning an RGBA value to the cornerColor property</h2>
<p>
You can select the line object to see the corner colour
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
cornerColor: "rgba(255,69,0, 0.8)",
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonFabricJS - Wie stelle ich die Farbe der Ecken der Liniensteuerung ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
