Maison > Article > interface Web > Comment conserver la largeur de trait d'un rectangle lors de la mise à l'échelle à l'aide de FabricJS ?

Comment conserver la largeur de trait d'un rectangle lors de la mise à l'échelle à l'aide de FabricJS ?

WBOYavant: 2023-08-23 08:57:291081parcourir

Comment conserver la largeur de trait dun rectangle lors de la mise à léchelle à laide de FabricJS ?

Dans ce didacticiel, nous apprendrons comment conserver la largeur de trait d'un rectangle lors de la mise à l'échelle à l'aide de FabricJS. Par défaut, la largeur du trait augmente ou diminue en fonction de la valeur d'échelle de l'objet. Cependant, nous pouvons désactiver ce comportement en utilisant la propriété StrokeUniform

Syntaxe

new fabric.Rect({ StrokeUniform: Boolean }: Object)

Paramètres< ;/ h2>
Options (facultatif)− Ce paramètre est un objet qui fournit des personnalisations supplémentaires pour la définition du rectangle. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à la propriété StrokeUniform

Touche d'option

strokeUniform− Cette propriété accepte une valeur booléenne , nous permettant de spécifier si la largeur du trait s'adapte à l'objet. Sa valeur par défaut est false.

Exemple 1

Apparence par défaut de la largeur du trait lors de la mise à l'échelle d'objetsRegardons un exemple de code qui décrit l'apparence par défaut de la largeur de trait d'un objet rectangulaire mis à l'échelle. Puisque nous n'utilisons pas la propriété StrokeUniform, la largeur du trait sera également affectée par la mise à l'échelle de l'objet.

<!DOCTYPE html>
La traduction chinoise de <html>
<tête>
<!-- Ajouter la bibliothèque Fabric JS --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
La traduction chinoise de </head>
La traduction chinoise de <body>
<h2>Apparence par défaut de la largeur du trait lors de la mise à l'échelle des objets</h2>
<p>Essayez de mettre l'objet à l'échelle pour voir le comportement par défaut</p>
<id de toile="canvas"></canvas>
La traduction chinoise de <script>
// Initialise une instance de canevas
var toile = nouveau tissu.Canvas("toile");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

// Initialise un objet rectangulaire
var rect = nouveau tissu.Rect({
gauche : 55,
haut : 90,
largeur : 170,
hauteur : 70,
La traduction chinoise de fill : "#ccccff", est : fill: "#ccccff",
rembourrage : 9,
Course : "#483d8b",
largeur de trait : 5,
});

//Ajoutez-le au canevas
Canvas.add(rect);
</script>
La traduction chinoise de </body>
</html>

Exemple

Passer la propriété StrokeUniform en tant que clé

Dans cet exemple , nous passons la propriété StrokeUniform comme clé et true comme valeur Par conséquent, les traits de l'objet n'augmenteront ou ne diminueront plus La mise à l'échelle de l'objet garantira que le trait correspond toujours exactement à la taille des pixels. Le contenu d'entrée est : saisi pour la largeur du trait.

<!DOCTYPE html>
La traduction chinoise de <html>
<tête>
<!-- Ajouter la bibliothèque Fabric JS --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
La traduction chinoise de </head>
La traduction chinoise de <body>
<h2>Passer la propriété StrokeUniform en tant que clé</h2>
<p>Essayez de redimensionner l'objet pour vous assurer que le trait conserve une largeur uniforme</p>
<id de toile="canvas"></canvas>
La traduction chinoise de <script>
// Initialise une instance de canevas
var toile = nouveau tissu.Canvas("toile");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

// Initialise un objet rectangulaire
var rect = nouveau tissu.Rect({
gauche : 55,
haut : 90,
largeur : 170,
hauteur : 70,
La traduction chinoise de fill : "#ccccff", est : fill: "#ccccff",
rembourrage : 9,
Course : "#483d8b",
largeur de trait : 5,
StrokeUniform : vrai,
});

//Ajoutez-le au canevas
Canvas.add(rect);
</script>
La traduction chinoise de </body>
La traduction de </html>

est :

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 obtenir la chaîne entre accolades à l'aide de l'expression régulière de JavaScript ?Article suivant：Comment obtenir la chaîne entre accolades à l'aide de l'expression régulière de JavaScript ?

Articles Liés

Voir plus