Maison > Article > interface Web > Comment ajouter un trait à un cercle en utilisant FabricJS ?

Comment ajouter un trait à un cercle en utilisant FabricJS ?

PHPzavant: 2023-08-24 17:57:131117parcourir

如何使用 FabricJS 向圆添加描边？

Dans ce tutoriel, nous apprendrons comment ajouter un trait à un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Pour créer un cercle, nous allons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Notre objet cercle peut être personnalisé de plusieurs manières, comme en changeant ses dimensions, en ajoutant une couleur d'arrière-plan ou en changeant la couleur des lignes tracées autour de l'objet. Nous pouvons le faire en utilisant la propriété Stroke.

Syntaxe

new fabric.Circle({ stroke : String }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui offre une personnalisation supplémentaire pour nos cercles. 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 pour lequel Stroke est un attribut.

Option Key

Stroke - Cette propriété accepte une String et détermine la couleur de la bordure de cet objet.

Exemple 1

Passer Stroke comme clé avec une valeur hexadécimale

Regardons un exemple pour comprendre comment un objet circulaire s'affiche lors de l'utilisation de l'attribut lines. Les codes de couleur hexadécimaux commencent par « # » suivi d'un nombre à six chiffres représentant la couleur. Dans cet exemple, nous avons utilisé "#ff4500" qui est orange-rouge.

<!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>Adding stroke to a circle using FabricJS</h2>
      <p>Notice the orange-red outline around the circle. It appears as we have applied the    <b>stroke</b> property and assigned it a hexadecimal color code. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#4169e1",
            stroke: "#ff4500",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Passer la valeur 'rgba' à l'attribut lines

Dans cet exemple, nous verrons comment attribuer une valeur rgba à l'attribut Stroke. Au lieu de codes de couleur hexadécimaux, nous pouvons utiliser les valeurs RGBA qui signifient : rouge, bleu, vert et alpha. Le paramètre alpha spécifie l'opacité de la couleur. Dans cet exemple, nous avons utilisé la valeur rgba (255,69,0,0.5), qui est une couleur rouge orangé avec une opacité de 0,5.

<!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>Adding stroke to a circle using FabricJS</h2>
      <p>Notice the outline around the circle. Here we have applied the <b>stroke</b> property and assigned it an &#39;rgba&#39; value. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#4169e1",
            stroke: "rgba(255,69,0,0.5)",
            strokeWidth: 5
         });
         canvas.add(circle);
         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!

字符串值传递对象 fabric

Déclaration：

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

Article précédent：Pourquoi Postman n'obtient-il pas l'erreur "L'en-tête 'Access-ControlAllow-Origin' n'existe pas sur la ressource demandée" en JavaScriptArticle suivant：Pourquoi Postman n'obtient-il pas l'erreur "L'en-tête 'Access-ControlAllow-Origin' n'existe pas sur la ressource demandée" en JavaScript

Articles Liés

Voir plus