Maison >interface Web >js tutoriel >Comment conserver la largeur de trait d'une ellipse lors de la mise à l'échelle à l'aide de FabricJS ?

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

王林avant: 2023-08-30 19:25:111194parcourir

如何在使用 FabricJS 缩放时保持椭圆的笔划宽度？

Dans ce tutoriel, nous apprendrons comment conserver la largeur de trait d'une ellipse 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 l'attribut StrokeUniform.

Syntaxe

new fabric.Ellipse({ strokeUniform: Boolean }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre ellipse. Grâce à ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées à l'objet dont styleUniform est une propriété.

Clés d'options

Stroke Uniform - Cette propriété accepte une valeur booléenne qui nous permet de spécifier si la largeur du trait sera mise à l'échelle avec l'objet. Sa valeur par défaut est False.

Exemple 1

L'apparence par défaut de la largeur du trait lors de la mise à l'échelle d'un objet

L'exemple suivant décrit l'apparence par défaut de la largeur du trait d'un objet ellipse en cours de mise à l'échelle. Puisque nous n'utilisons pas l'attribut tripUniform, la largeur du trait sera également affectée par la mise à l'échelle de l'objet.

<!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>How to maintain stroke width of Ellipse while scaling using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
         });
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Passage de l'attribut StrokeUniform comme clé

Dans cet exemple, nous passons l'attribut StrokeUniform comme clé. Par conséquent, les traits de l’objet n’augmenteront ou ne diminueront plus à mesure que l’objet évolue. Dans cet exemple, l'attribut StrokeUniform s'est vu attribuer la valeur "true", ce qui garantira que le trait correspond toujours à la taille exacte en pixels saisie pour la largeur du trait.

<!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>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
      <p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
            strokeUniform: true,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment utiliser SolverJS ?Article suivant：Comment utiliser SolverJS ?

Articles Liés

Voir plus