Comment créer un triangle avec une bordure en pointillés à l'aide de FabricJS ?-js tutoriel-php.cn

Comment créer un triangle avec une bordure en pointillés à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-23 18:37:02

avant

1035 Les gens l'ont consulté

如何使用 FabricJS 创建带有虚线图案边框的三角形？

Dans ce tutoriel, nous allons créer un triangle avec une bordure en pointillés à 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.

Nous pouvons modifier l'apparence du tiret de bordure en utilisant la propriété borderDashArray. Cependant, notre objet triangle doit avoir une bordure pour que cette propriété fonctionne. Cette propriété n'aura aucun effet si une valeur incorrecte est spécifiée pour la propriété hasBorders.

Syntaxe

new fabric.Triangle({ borderDashArray: Array }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> 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 borderDashArray est une propriété, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés

Clés d'options

borderDashArray - Cette propriété accepte un tiret spécifié ArrayDéclarez le modèle d'intervalles via un tableau.

Exemple 1

Passer borderDashArray comme clé avec une valeur personnalisée

Regardons un exemple de code qui crée une bordure en pointillés à l'aide de la propriété borderDashArray dans FabricJS. Dans cet exemple, nous utilisons un tableau [7,10], qui nous indique que le motif sera créé en traçant une longue ligne de 7 pixels, suivie d'un espace de 10 pixels, et en répétant ce même motif encore et encore.

<!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 borderDashArray as key with a custom value</h2>
   <p>Select the triangle to see the dash pattern</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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "red",
         borderDashArray: [7, 10],
      });

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

Copier après la connexion

Exemple 2

Passage de la clé hasBorders avec la valeur "false"

Comme nous pouvons le voir dans cet exemple, même si nous avons attribué aux propriétés borderColor et borderDashArray les valeurs correctes, elles ne fonctionnent pas fonctionne car la propriété hasBorders a été définie sur false. Lorsque la valeur est False, le cadre de sélection de l'objet n'est pas rendu.

<!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 hasBorders key with the value "false"</h2>
   <p>Select the triangle and observe that its borders have not been rendered.</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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "red",
         borderDashArray: [7, 10],
         hasBorders: false,
      });

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