Maison > Article > interface Web > Comment créer un rectangle avec une couleur de bordure à l'aide de FabricJS ?

Comment créer un rectangle avec une couleur de bordure à l'aide de FabricJS ?

PHPzavant: 2023-09-09 20:53:081259parcourir

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

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

Comme FabricJS est si flexible, nous pouvons personnaliser notre objet rectangle 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.Rect({ borderColor: String }: 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 des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet dont borderColor est un attribut.

Touche d'option

borderColor - Cette propriété accepte une chaîne spécifiant la couleur de la bordure lors de la sélection d'un objet rectangulaire. Sa valeur par défaut est RVB (178 204 255).

Exemple 1

Passer la clé borderColour à l'aide d'une valeur de chaîne

Regardons un exemple de code pour comprendre comment attribuer une valeur à la propriété borderColor. Nous avons attribué la valeur « bleu » à la touche borderColor, qui permet de créer une bordure bleue lors de la sélection d'un objet rectangulaire.

<!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 rectangle 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "blue",
         padding: 9,
      });

      // Add it to the canvas
      canvas.add(rect);
   </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 dont les composants spécifient le rouge, le vert, le bleu et la quantité Alpha. de , 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 rectangle 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "rgb(128,0,128)",
         padding: 9,
      });

      // 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 retourner un rectangle verticalement en utilisant FabricJS ?Article suivant：Comment retourner un rectangle verticalement en utilisant FabricJS ?

Articles Liés

Voir plus