Maison >interface Web >js tutoriel >Comment définir le facteur d'échelle (bordure) d'un cercle à l'aide de 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.
new fabric.Circle({ borderScaleFactor: Number }: Object)
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é.
borderScaleFactor− Cette propriété accepte un number qui spécifie l'épaisseur de la bordure. La valeur par défaut est 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>Exemple 2
Passer borderScaleFactor comme clé
Regardons le code qui augmente l'épaisseur de la bordure d'un objet circulaire lorsque sa bordure est activement sélectionnée. Dans cet exemple, nous avons attribué une valeur de 5 auborderScaleFactor, 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!