Comment définir la couleur d'une zone de sélection sur le canevas à l'aide de FabricJS ?-js tutoriel-php.cn

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

王林

Libérer： 2023-09-10 21:53:09

avant

1419 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!