Comment définir la couleur de remplissage d'un rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir la couleur de remplissage d'un rectangle à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-21 08:13:24

avant

1324 Les gens l'ont consulté

如何使用 FabricJS 设置矩形的填充颜色？

Dans ce tutoriel, nous apprendrons comment changer l'apparence d'un rectangle Modifiez la couleur de remplissage d'un objet à l'aide de FabricJS. Un rectangle est une forme parmi de nombreuses formes Propulsé par FabricJS. Afin de créer un rectangle, nous devons créer une instance Fabric.Rect et ajoutez-la au canevas.

Nous pouvons changer la couleur de remplissage en utilisant l'attribut fill qui nous permet de préciser La couleur du remplissage de l'objet.

Syntaxe

new fabric.Rect({ fill: 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 rempli en tant que propriété.

Option Key

fill - Cette propriété accepte une String qui nous permet de changer la couleur de remplissage de l'objet. Sa valeur par défaut est rgb(0,0,0), qui est noire.

Exemple 1

Couleur de remplissage par défaut pour un objet rectangulaire

Regardons un exemple de code qui nous montre la couleur de remplissage par défaut pour un objet rectangulaire TissuJS. Si nous ignorons complètement la propriété fill lors de la création de l'objet rectangle, cela Lors du rendu, la couleur de remplissage est le noir.

<!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 fill colour of a rectangle object</h2>
   <p>You can click on the rectangle and interact with it</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: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Passage de l'attribut fill comme clé

Nous pouvons également attribuer n'importe quel nom de couleur ou valeur RGBA à l'attribut de remplissage. Dans cet exemple, Nous lui avons attribué une valeur "gris", en modifiant la couleur de remplissage en conséquence.

<!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 the fill property as key</h2>
   <p>You can see the new fill colour of rectangle object</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: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
         fill: "grey",
      });

      // 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!