Maison > Article > interface Web > Comment ajouter un trait pointillé à un triangle en utilisant FabricJS ?

Comment ajouter un trait pointillé à un triangle en utilisant FabricJS ?

WBOYavant: 2023-08-24 18:45:081129parcourir

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

Dans ce tutoriel, nous apprendrons comment ajouter un trait pointillé à un triangle à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe fabric.Triangle 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.Triangle( { strokeDashArray: Array }: Object)

Paramètres

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

Option Key

Stroke DashArray - Cette propriété accepte un array qui nous permet de spécifier le motif en pointillés des traits de l'objet. 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 des traits d'objet triangulaire. 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&#39;s stroke</h2>
   <p>You can see there is no dash pattern in the stroke</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 triangle object
      var triangle = new fabric.Triangle({
         left: 150,
         top: 30,
         width: 90,
         height: 80,
         fill: "#b0e0e6",
         stroke: "#5f9ea0",
         strokeWidth: 7,
      });

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

Exemple 2

Passage de la propriété StrikeDashArray 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 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 there is a dash pattern in the stroke now</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 triangle object
      var triangle = new fabric.Triangle({
         left: 150,
         top: 30,
         width: 90,
         height: 80,
         fill: "#b0e0e6",
         stroke: "#5f9ea0",
         strokeWidth: 7,
         strokeDashArray: [9, 2],
      });

      // Add it to the canvas
      canvas.add(triangle);
   </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!

Déclaration：

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

Article précédent：Accéder aux éléments dactylographiésArticle suivant：Accéder aux éléments dactylographiés

Articles Liés

Voir plus