Maison > Article > interface Web > Comment créer un triangle avec une couleur de bordure en utilisant FabricJS ?

Comment créer un triangle avec une couleur de bordure en utilisant FabricJS ?

WBOYavant: 2023-09-12 12:29:021398parcourir

如何使用 FabricJS 创建带有边框颜色的三角形？

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

Comme FabricJS est si flexible, nous pouvons personnaliser nos objets triangulaires comme bon nous semble. L'une des propriétés fournies par FabricJS est borderColor, qui nous permet de manipuler la couleur de la bordure lorsque l'objet est actif.

Syntaxe

new fabric.Triangle({ borderColor: String }: 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 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 dont borderColor est la propriété.

Option key

borderColor - Cette propriété accepte une string qui spécifie la couleur de la bordure lorsqu'un objet triangle est sélectionné. Sa valeur par défaut est RVB (178,204,255).

Exemple 1

Passer la clé borderColour à l'aide de la valeur String

Regardons un exemple de code pour comprendre comment attribuer une valeur à la propriété borderColor. Nous avons attribué la valeur "blue" à la touche borderColor, qui permet de créer une bordure bleue lorsqu'un objet triangle est sélectionné.

<!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 borderColour key with a String value</h2>
   <p>Select the triangle to see the border colour</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: "blue",
      });

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

Exemple 2

Passer une valeur RGBA à la clé borderColor

Au lieu de passer un simple nom de couleur sous forme de chaîne, nous pouvons également utiliser une valeur RGBA avec des composants spécifiant le rouge, le vert, le bleu et la quantité d'Alpha, où alpha représente l'opacité. Dans cet exemple, nous avons utilisé rgb(128,0,128) qui est la valeur RVB du violet.

<!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 an RGBA value to the borderColor key</h2>
   <p>Select the triangle to see the border colour</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: "rgb(128,0,128)",
      });

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

String 字符串值传递对象 ul fabric

Déclaration：

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

Article précédent：Comment aligner une image sur une carte avec un titre dynamique en Javascript ?Article suivant：Comment aligner une image sur une carte avec un titre dynamique en Javascript ?

Articles Liés

Voir plus