Comment définir la largeur du trait d'un cercle de toile à l'aide de Fabric.js ?-js tutoriel-php.cn

Comment définir la largeur du trait d'un cercle de toile à l'aide de Fabric.js ?

WBOY

Libérer： 2023-08-28 13:53:05

avant

685 Les gens l'ont consulté

如何使用 Fabric.js 设置画布圆的描边宽度？

Les propriétés de trait et de largeur de trait sont utilisées pour définir la couleur et la largeur du trait du cercle de toile. La classe Circle contient différentes propriétés, mais pour définir la couleur et la largeur du trait, nous utilisons les propriétés Stroke et Stroke-Width. La propriété StrokeWidth est utilisée pour spécifier la largeur du cercle du canevas.

La classe Fabric.js Circle est utilisée pour fournir des formes circulaires via des objets Fabric.Circle. L'objet cercle est utilisé pour fournir une forme circulaire et le cercle est mobile et peut être étiré selon les besoins. Le trait, la couleur, la largeur, la hauteur et la couleur de remplissage du cercle sont tous personnalisables. Par rapport à la classe canvas, la classe Circle offre des fonctions riches.

Grammaire

Voici la syntaxe des objets texte -

fabric.Circle({
   radius: number,
   stroke: string,
   strokeWidth: number
});

Copier après la connexion

Paramètres

radius - utilisé pour spécifier le rayon d'un cercle

Stroke - Spécifiez la couleur du trait.

Largeur du trait - Utilisé pour spécifier la largeur du trait

Étapes

Suivez les étapes ci-dessous pour définir l'inclinaison horizontale du cercle de toile à l'aide de Fabric.js -

Étape 1 - Inclure la bibliothèque Fabric.js dans le fichier HTML

Étape 2 - Créez un nouvel élément de canevas dans le fichier HTML

Étape 3 - Initialiser l'élément canevas dans le code JavaScript

Étape 4 - Créez un nouvel objet de classe Fabric.js Circle et définissez la propriété skewX sur la valeur de cercle souhaitée

Étape 5 - Ajouter un objet cercle à la toile

Exemple

Voyons comment définir la couleur et la largeur du trait d'un cercle de toile à l'aide de Fabric.js -

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: green, stoke width: 20</p>
      <canvas id="strokecanvas"></canvas>
      <script>
         // Initiating a canvas instance
         var canvas = new fabric.Canvas('strokecanvas'); 
       
         // Create a instance of fabric.Circle Class
         var circle6 = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 70,
            stroke: "green",
            strokeWidth: 20
         }); 
         
         // Adding the Canvas
         canvas.add(circle6);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(350);
      </script> 
   </body> 
</html>

Copier après la connexion

Ce code créera un nouvel élément de cercle de canevas avec l'ID spécifié, créera un nouvel objet de classe Fabric.js Circle et définira la couleur et la largeur du trait du cercle à l'aide des propriétés de trait et de largeur de trait, et un objet circulaire est ajouté à la toile. Le cercle apparaîtra incliné horizontalement sur la toile.

Exemple

Voyons un autre exemple, nous pouvons définir la couleur et la largeur du trait du cercle de toile en utilisant les méthodes et propriétés de trait et de largeur de trait telles que gauche, haut, remplissage, rayon, etc.

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: blue, stoke width: 20</p>
      <canvas id="canvasstroke"></canvas>

      <script>
         var canvas = new fabric.Canvas('canvasstroke'); 
         var circle5 = new fabric.Circle({
            top: 60,
            left: 60,
            fill: "violet",
            radius: 70,
            stroke: "blue",
            strokeWidth: 20
         }); 
         
         canvas.add(circle5);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(500);
      </script> 
   </body> 
</html>

Copier après la connexion

Ce code créera un nouvel élément de cercle de canevas avec l'ID et la taille spécifiés, créera un nouvel objet de classe Fabric.js Circle et utilisera la propriété StrokeWidth pour définir le cercle de canevas sur la couleur et la largeur du trait, et définira l'objet de classe. à ajouter à la toile. Le cercle apparaîtra sur le canevas avec les dimensions que nous avons définies dans l'exemple.

Conclusion

Dans cet article, nous montrons à travers des exemples comment définir la largeur et la couleur du trait d'un cercle de toile. Nous voyons ici deux exemples différents dans lesquels nous utilisons les propriétés Stroke et StrokeWidth pour définir la largeur du trait et la couleur d'un canevas circulaire. Dans le premier exemple, nous utilisons les propriétés Stroke et StrokeWidth pour définir la couleur et la largeur du cercle du canevas. Pour le deuxième exemple, nous avons utilisé les méthodes de propriété Stroke et StrokeWidth avec différents paramètres de taille (tels que Left, Top, Fill, etc.) pour définir la largeur et la couleur du trait du canevas circulaire.

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!