Maison >interface Web >js tutoriel >Comment définir la couleur d'une zone de sélection sur le canevas à l'aide de FabricJS ?

Comment définir la couleur d'une zone de sélection sur le canevas à l'aide de FabricJS ?

王林avant: 2023-09-10 21:53:091414parcourir

如何使用 FabricJS 设置画布上选择区域的颜色？

Dans cet article, nous apprendrons comment définir la couleur d'une zone de sélection sur le canevas à l'aide de FabricJS. Nous pouvons ajuster la couleur à l’aide de la propriété selectionColor.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionColor: String }: Object)

Parameters

Element - Ce paramètre est l'élément
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. En utilisant ce paramètre, il est possible de 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, où selectionColor est la propriété grâce à laquelle nous pouvons indiquer la couleur de la sélection. La valeur par défaut de SelectionColor est rgba(100,100,255,0.3).

Exemple 1

Passez la clé selectionColor à la classe

La propriété selectionColor accepte une chaîne qui détermine la couleur de la sélection. Nous pouvons utiliser les valeurs RGBA, qui signifient : rouge, bleu, vert et alpha. Le paramètre alpha spécifie l'opacité de la couleur. Regardons un exemple de code pour voir comment définir la couleur d'une 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 color of a selection area using FabricJs</h2>
   <p>Select an area around the object to see the color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionColor: "rgba(0,0,0,0.4)",
      });
      // 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 noms de couleurs au lieu de valeurs RGBA

Nous pouvons également utiliser des couleurs spécifiques au lieu de valeurs RGBA. Dans cet exemple, la propriété selectionColor a été définie sur la couleur « rouge ».

<!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 color of a selection area using FabricJs</h2>
   <p>Select an area around the object to see the color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionColor: "red",
      });
      // 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!

字符串对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment renvoyer du HTML ou créer du HTML en utilisant JavaScript ?Article suivant：Comment renvoyer du HTML ou créer du HTML en utilisant JavaScript ?

Articles Liés

Voir plus