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

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

PHPz

Libérer： 2023-09-02 16:49:13

avant

1262 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment définir le remplissage d'un rectangle à 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.

Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille de l'objet rectangulaire dans le canevas, nous pouvons également définir le remplissage de l'objet rectangulaire. Cela peut être fait en utilisant l'attribut padding.

Syntaxe

new fabric.Rect({ padding : Number }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet dont padding est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

Option Key

Padding - Cette propriété accepte une valeur numérique. La valeur spécifiée détermine la distance entre l'objet rectangulaire et son cadre de délimitation de contrôle.

Exemple 1

Apparence par défaut Sans remplissage

Regardons un exemple de code qui montre à quoi ressemble un objet rectangulaire lorsque l'attribut padding n'est pas utilisé. Comme nous pouvons le constater, il n’y a aucun espace entre l’objet et ses limites de contrôle environnantes. Cela signifie qu'il n'y a aucun remplissage entre le rectangle et son cadre de délimitation de contrôle.

<!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 appearance when padding is not used</h2>
   <p>You can select the rectangle to see there is no space between the object and its controlling borders.</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
      });

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

Copier après la connexion

Exemple

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

Dans cet exemple, nous transmettons la propriété padding en tant que clé avec la valeur 7. ce Indique que la distance entre l'objet rectangulaire et tous ses objets est de 7px Contrôler les limites.

<!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 padding property as key</h2>
   <p>You can select the rectangle to see the padding between the object and its controlling borders.</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
         padding: 7,
      });

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