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

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

WBOY

Libérer： 2023-09-07 14:41:08

avant

810 Les gens l'ont consulté

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

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)

Copier après la connexion

Parameters

Element - Ce paramètre est l'élément lui-même et peut être dérivé de l'identifiant de l'élément lui-même en utilisant document.getElementById() ou < toile>. 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>

Copier après la connexion

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>

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!