Maison >interface Web >js tutoriel >Comment définir la valeur de proportion minimale autorisée d'une ellipse à l'aide de FabricJS ?

Comment définir la valeur de proportion minimale autorisée d'une ellipse à l'aide de FabricJS ?

PHPzavant: 2023-09-08 16:25:02575parcourir

如何使用 FabricJS 设置椭圆的最小允许比例值？

Dans ce tutoriel, nous apprendrons comment définir la proportion minimale autorisée d'une ellipse à l'aide de FabricJS. L'ovale est l'une des différentes formes fournies par FabricJS. Pour créer une ellipse, nous allons créer une instance de la classe Fabric.Ellipse et l'ajouter au canevas. Nous pouvons personnaliser l'objet ellipse en ajoutant une couleur de remplissage, en supprimant ses bordures et même en modifiant ses dimensions. De même, nous pouvons également utiliser la propriété minScaleLimit pour définir son échelle minimale autorisée.

Syntaxe

new fabric.Ellipse({ minScaleLimit : Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet offrant une personnalisation supplémentaire à notre ellipse. Utilisez ce paramètre pour modifier la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés associées à l'objet dont minScaleLimit est une propriété.

Option Key

minScaleLimit - Cette propriété accepte un number strong> comme valeur qui nous permet de contrôler l'échelle minimale autorisée pour l'ellipse.

Exemple 1

À quoi ressemble l'objet ellipse par défaut

Prenons un exemple pour voir à quoi ressemble l'objet ellipse sans utiliser l'attribut minScaleLimit. Dans ce cas, nous pourrons redimensionner l'objet librement puisqu'aucune limite minimale n'est définie.

<!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 set the minimum allowed scale value of Ellipse using FabricJS?</h2>
      <p>Here you can select the object and scale it up freely to any extent, as we have not used the <b>minScaleLimit</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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Passer la propriété minScaleLimit en tant que clé avec une valeur personnalisée

Dans cet exemple, nous verrons comment l'attribution d'une valeur à la propriété minScaleLimit modifie la valeur d'échelle minimale autorisée d'un objet ellipse dans la toile. Ici, nous utilisons 0,8 comme valeur, ce qui signifie que nous ne pourrons pas réduire l'objet à un rayon inférieur au rayon horizontal de 64 pixels et au rayon vertical de 40 pixels, calculés comme rayon*limite (0,8 * 80 = 64 pixels , 0,8 * 50 = 40 pixels ).

<!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 set the minimum allowed scale value of Ellipse using FabricJS?</h2>
      <p>Select the object and try to scale it down. Here we have set the <b>minScaleLimit</b> to 0.8 beyond which the ellipse cannot be reduced further in size. </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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            minScaleLimit: 0.8,
         });

         // 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!

对象 fabric

Déclaration：

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

Article précédent：Quel navigateur Android offre la meilleure prise en charge de JavaScript ?Article suivant：Quel navigateur Android offre la meilleure prise en charge de JavaScript ?

Articles Liés

Voir plus