Comment définir le facteur d'échelle (bordure) d'un cercle à l'aide de FabricJS ?-js tutoriel-php.cn

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

王林

Libérer： 2023-08-24 15:45:18

avant

759 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet < /em> 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é borderScaleFactor< /p>Regardons 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>

Copier après la connexion

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>

Copier après la connexion

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!