Maison > Article > interface Web > Comment définir la couleur de la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS ?
Comment définir la couleur de la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS ?
- WBOYavant
- 2023-09-07 14:41:08737parcourir
Dans cet article, nous apprendrons comment définir la couleur de la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS. Une sélection indiquant si la sélection de groupe doit être activée. FabricJS nous permet d'ajuster la couleur de la bordure en conséquence à l'aide de la propriété SelectionBorderColor.
Syntaxe
new fabric.Canvas(element: HTMLElement|String, { selectionBorderColor: String }: Object)Parameters
Element - Ce paramètre est l'élément 5ba626b379994d53f7acf72a64f9b697 lui-même et peut être dérivé de l'identifiant de l'élément lui-même en utilisant document.getElementById() ou 7f4ff914e48ddbb8e6a45303b4ae4db0. Le canevas FabricJS sera initialisé sur cet élément.
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. En utilisant ce paramètre, vous pouvez modifier les propriétés liées au canevas telles que la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés, parmi lesquelles selectionBorderColor est la propriété que nous pouvons utiliser pour indiquer la couleur de la bordure de sélection. La valeur par défaut de la propriété SelectionBorderColor est rgba(255,255,255,0.3).
Exemple 1
Utilisez le nom de la couleur pour définir la couleur de la zone de sélection
La propriété selectionBorderColor accepte une chaîne qui détermine la couleur de la bordure de sélection. La couleur est généralement plus foncée que la sélection elle-même. Examinons un exemple de code pour voir comment définir la couleur de la bordure d'une zone de sélection dans un canevas à l'aide de FabricJS.
<!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 border color of a selection area on a canvas</h2>
<p>Select an area around the object. You will notice that the border color of the selection would be red in color. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionBorderColor: "green",
});
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#006400",
angle: 90,
});
// Adding it to the canvas
canvas.add(rect);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Exemple 2
Utilisation de la valeur rgba comme couleur de la zone de sélection
Nous pouvons également utiliser la valeur "rgba" où "a" signifie "alpha" qui signifie opacité. Dans cet exemple, nous avons utilisé du marron avec une valeur « rgba » de (112,0,0) et 0,9 pour l'opacité.
<!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 border colour of selection area using FabricJs</h2>
<p>Select an area around the object to see the border color of the selection area. Here we have used "rgba" value to set the border color of the selection area.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionBorderColor: "rgba(112,0,0,0.9)",
});
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#006400",
angle: 90,
});
// Adding it to the canvas
canvas.add(rect);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!