Maison > Article > interface Web > Comment ajouter un trait pointillé à un rectangle à l'aide de FabricJS ?

Comment ajouter un trait pointillé à un rectangle à l'aide de FabricJS ?

WBOYavant: 2023-08-25 12:29:09927parcourir

如何使用 FabricJS 向矩形添加虚线描边？

Dans ce tutoriel, nous apprendrons comment ajouter un trait pointillé à 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. La propriété StrokeDashArray nous permet de spécifier un motif de tirets pour les traits de l'objet.

Syntaxe

new fabric.Rect( { strokeDashArray: Array }: Object)

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 la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet qui est une propriété de StrokeDashArray.

Options Keys

StrokeDashArray - Cette propriété nous permet de spécifier un motif de tiret pour le trait de l'objet. Nous pouvons le faire en lui passant un array. Par exemple, si nous transmettons un tableau avec les valeurs [2,3], il représente un motif de tirets de 2 pixels et d'espaces de 3 pixels, et ce motif se répète à l'infini.

Exemple 1

Apparence par défaut des traits d'objet

Regardons un exemple de code qui décrit l'apparence par défaut d'un trait d'objet rectangulaire. Puisque nous n'utilisons pas l'attribut StrokeDashArray, le motif de tiret n'est pas affiché.

<!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 of an object&rsquo;s stroke</h2>
   <p>You can see that there is no dashed stroke on the rectangle</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: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#2a52be",
         strokeWidth: 7,
      });

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

Exemple 2

Passage de la propriété StrokeDashArray comme clé

Dans cet exemple, nous transmettons une valeur de [9,2] à la propriété StrokeDashArray. Cela signifie qu'un motif en pointillés sera créé avec une ligne de 9 pixels de long suivie d'un espace de 2 pixels de long, puis à nouveau une ligne de 9 pixels de long sera tracée, et ainsi de suite.

<!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 strokeDashArray property as key</h2>
   <p>You can see now a dashed stroke has been added around the rectangle</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: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#2a52be",
         strokeWidth: 7,
         strokeDashArray: [9, 2],
      });

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

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!

对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir le facteur d'échelle vertical d'un rectangle à l'aide de FabricJS ?Article suivant：Comment définir le facteur d'échelle vertical d'un rectangle à l'aide de FabricJS ?

Articles Liés

Voir plus