Maison > Article > interface Web > Comment définir le facteur d'échelle (bordure) d'un cercle à l'aide de FabricJS ?

Comment définir le facteur d'échelle (bordure) d'un cercle à l'aide de FabricJS ?

王林avant: 2023-08-24 15:45:18677parcourir

如何使用 FabricJS 设置圆的比例因子（边框）？

Dans ce tutoriel, nous définirons le facteur d'échelle (bordure) d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Nous pouvons utiliser la propriété borderScaleFactor pour spécifier le facteur d'échelle de l'objet qui contrôle la bordure.

Syntaxe

new fabric.Circle({ borderScaleFactor: Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui offre une personnalisation supplémentaire à 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 bien d'autres propriétés liées à l'objet dont borderScaleFactor est une propriété.

Touche d'option

borderScaleFactor− Cette propriété accepte un number qui spécifie l'épaisseur de la bordure. La valeur par défaut est 1.

Exemple 1

comportement par défaut de la propriété borderScaleFactorRegardons un exemple décrivant le comportement par défaut de la propriété borderScaleFactor. Bien que nous l'ayons spécifié dans cet exemple, par défaut borderScaleFactor utilisera 1 même s'il n'est pas spécifié.

<!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>Setting the scale factor (border) of circle using FabricJS</h2>
      <p>Select the object and notice its border. Here we have set <b>borderScaleFactor</b> at 1, which is the default value. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
            borderScaleFactor: 1
         });

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

Passer borderScaleFactor comme clé

borderScaleFactor, qui spécifie l'épaisseur de la bordure.

<!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>Setting the scale factor (border) of a circle using FabricJS</h2>
      <p>Select the object and notice the thickness of its border. Here we have set the <b>borderScaleFactor</b> at 5. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
            borderScaleFactor: 5
         });

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

Déclaration：

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

Article précédent：Comment désactiver un point de contrôle spécifique d'un objet Image à l'aide de FabricJS ?Article suivant：Comment désactiver un point de contrôle spécifique d'un objet Image à l'aide de FabricJS ?

Articles Liés

Voir plus