interface Web
js tutoriel
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 ?
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< strong>− 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
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
strokeUniform< strong>− 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.
Apparence par défaut de la largeur du trait lors de la mise à l'échelle d'objets<
Regardons 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 id="Apparence-par-défaut-de-la-largeur-du-trait-lors-de-la-mise-à-l-échelle-des-objets">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 id="Passer-la-propriété-StrokeUniform-en-tant-que-clé">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>