Comment définir la couleur d'arrière-plan d'une sélection de rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir la couleur d'arrière-plan d'une sélection de rectangle à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-27 14:49:15

avant

1306 Les gens l'ont consulté

Comment définir la couleur darrière-plan dune sélection de rectangle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir la couleur d'arrière-plan d'une sélection rectangulaire à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. Afin de créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter au canevas.

Nous pouvons modifier la taille de l'objet, le faire pivoter ou opérer dessus lorsqu'il est activement sélectionné. Nous pouvons utiliser la propriété selectionBackgroundColor pour changer la couleur d'arrière-plan de la sélection rectangulaire.

Syntaxe

new fabric.Rect({ selectionBackgroundColor : String }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à l'objet pour lequel la couleur d'arrière-plan est sélectionnée comme attribut.

OptionKey

selectionBackgroundColor - Cette propriété accepte une valeur String. La valeur attribuée détermine la couleur d'arrière-plan de la sélection.

Exemple 1

Couleur par défaut lorsque la propriété SelectionBackgroundColor n'est pas utilisée< /strong>

Regardons un exemple de code pour voir comment la sélection est affichée lorsque la propriété selectionBackgroundColor n'est pas utilisée. À partir de cet exemple, nous pouvons voir que la zone de sélection ou la zone derrière l'objet n'a pas de couleur.

<!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>Default colour when selectionBackgroundColor property is not used</h2>
   <p>You can click on the rectangle to see that the selection area has no colour</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: 155,
         top: 70,
         width: 170,
         height: 70,
         fill: "#00b7eb",
         stroke: "#ffa089",
         strokeWidth: 5,
         padding: 50,
      });
     
      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Passer la propriété SelectionBackgroundColor en tant que clé

Dans cet exemple, nous attribuons une propriété de valeur à selectionBackgroundColor. Dans ce cas, nous lui avons transmis la valeur hexadécimale "#e0ffff", qui est cyan clair, donc la zone de sélection a cette couleur.

<!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 selectionBackgroundColor property as key</h2>
   <p>You can click on the rectangle to see that the selection area now has a light cyan colour</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: 155,
         top: 70,
         width: 170,
         height: 70,
         fill: "#00b7eb",
         stroke: "#ffa089",
         strokeWidth: 5,
         padding: 50,
         selectionBackgroundColor: "#e0ffff",
      });
     
      // Add it to the canvas
      canvas.add(rect);
   </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!