Maison > Article > interface Web > Comment définir la largeur du trait d'un cercle de toile à l'aide de Fabric.js ?
Comment définir la largeur du trait d'un cercle de toile à l'aide de Fabric.js ?
- WBOYavant
- 2023-08-28 13:53:05664parcourir
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
});
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>
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>
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!