Comment définir la valeur d'échelle minimale autorisée pour un cercle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir la valeur d'échelle minimale autorisée pour un cercle à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-05 15:25:09

avant

949 Les gens l'ont consulté

Comment définir la valeur déchelle minimale autorisée pour un cercle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir le ratio minimum autorisé 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 personnaliser l'objet circulaire 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.Circle({ minScaleLimit : Number }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui offre une personnalisation supplémentaire pour nos cercles. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés liées à l'objet dont minScaleLimit est la propriété.

Option Key

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

Exemple 1

À quoi ressemble l'objet cercle par défaut

Jetons un coup d'œil au code pour voir à quoi ressemble un objet cercle lorsque la propriété minScaleLimit n'est pas utilisée. 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>Setting the minimum allowed scale value of circle using FabricJS</h2>
      <p>Select the object and scale it down by dragging one of its controlling corners. Here you can scale down the object freely since there is no minimum limit set.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493"
         });

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

Copier après la connexion

Exemple 2

Passing minScaleLimitproperty comme clé avec une valeur personnalisée

Dans cet exemple, nous verrons comment l'attribution d'une valeur à minScaleLimitproperty modifie le minimum autorisé pour les objets circulaires dans la valeur proportionnelle du canevas. Ici, nous utilisons 0,8 comme valeur, ce qui signifie que nous ne pourrons pas réduire l'objet à un rayon inférieur à 64 pixels, qui est calculé par le rayon * limite (0,8 * 80 = 64 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>Setting the minimum allowed scale value of circle using FabricJS</h2>
      <p>Select the object and try to scale it down by dragging one of its controlling corners. You cannot scale down the object freely, as we have set <b>minScaleLimit</b> at 0.8. So, the minimum scale of the circle must be at least 80% of the original radius, beyond which you cannot scale it down any further. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 80,
            fill: "#ff1493",
            minScaleLimit: 0.8
         });

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

Copier après la connexion

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!