Maison >interface Web >js tutoriel >Comment créer une ellipse avec une couleur de bordure en utilisant FabricJS ?

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

王林avant: 2023-09-02 16:53:021228parcourir

如何使用 FabricJS 创建带有边框颜色的椭圆？

Dans ce tutoriel, nous allons créer une ellipse avec une couleur de bordure en utilisant FabricJS. L'ovale est l'une des différentes formes fournies par FabricJS. Pour créer une ellipse, nous allons créer une instance de la classe Fabric.Ellipse et l'ajouter au canevas. Puisque FabricJS est si flexible, nous pouvons personnaliser l'objet ellipse 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.Ellipse({ borderColor: String }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un Objet offrant une personnalisation supplémentaire à notre ellipse. Grâce à ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés associées à l'objet dont borderColor est une propriété.

Options Keys

borderColor - Cette propriété accepte une String qui détermine la couleur de la bordure lorsque l'objet est activement sélectionné. Sa valeur par défaut est rgb(178,204,255).

Exemple 1

Passage de la clé borderColor à l'aide d'une valeur de chaîne

Voyons un exemple de la façon d'attribuer une valeur à la propriété borderColor. Nous avons attribué la valeur "blue" à la touche borderColor, ce qui permet de créer une bordure bleue lorsque l'objet ellipse 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>How to create an Ellipse with a border color using FabricJS?</h2>
      <p>Select the object to see the "blue" border color.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "blue",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Transmettez la valeur rgba à la touche borderColor

Au lieu de transmettre un simple nom de couleur sous forme de chaîne, nous pouvons également utiliser la 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>How to create an Ellipse with a border color using FabricJS?</h2>
      <p>Select the object to see the "purple" border color.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "rgb(128,0,128)",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </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 字符串值传递对象 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 remplissage d'un rectangle à l'aide de FabricJS ?Article suivant：Comment définir le remplissage d'un rectangle à l'aide de FabricJS ?

Articles Liés

Voir plus