In diesem Tutorial legen wir die Farbe der Rechtecksteuerecken mithilfe von FabricJS fest. Mit der Eigenschaft „cornerColor“ können wir die Farbe der Kontrollecken manipulieren, während das Objekt aktiv ist. Syntax
new fabric.Rect({ cornerColor: String }: Object)– Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften im Zusammenhang mit dem Objekt mit „cornerColor“ als Attribut ändern.
– Diese Eigenschaft akzeptiert einen String, der es uns ermöglicht, die Zuweisung von Farben zu den Ecken von Objekten zu steuern, wenn diese aktiv ausgewählt werden. Der Standardwert ist rgb(178.204.255).
cornerColor als Schlüssel mit Farbe als Wert Sehen wir uns ein Codebeispiel zum Ändern der Farbe mithilfe der Eigenschaft „cornerColor“ an. existieren In diesem Fall weisen wir der Taste den Wert „grün“ zu Die Kontrollecken erscheinen grün.
<!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>Select the rectangle to see the colour of its controlling corners</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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "green",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Beispiel 2
Zuweisen eines RGBA-Werts zum AttributcornerColor Anstatt einen einfachen Farbnamen als String
-Wert an den Schlüssel zu übergeben, können wir auch einen RGBA-Wert zuweisen. RGBA steht für Rot, Grün, Blau und Alpha, wobei Alpha für die Deckkraft steht. Schauen wir uns ein Codebeispiel an, um zu veranschaulichen, wie das geht:<!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>Select the rectangle to see the colour of its controlling corners</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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "rgba(34,139,34,0.9)",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS die Farbe der Kontrollecken eines Rechtecks ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
