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

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

王林

Libérer： 2023-08-27 12:21:03

avant

1030 Les gens l'ont consulté

Comment définir la valeur déchelle minimale autorisée dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir les proportions minimales autorisées d'un rectangle Utilisez FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. pour Pour créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter à la toile.

Nous pouvons personnaliser l'objet rectangulaire 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.Rect({ minScaleLimit : Number }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés associées à l'objet pour lequel minScaleLimit est un attribut.

Option Key

minScaleLimit - Cette propriété nous permet de contrôler la valeur d'échelle minimale autorisée du rectangle. Il accepte un numéro comme valeur.

Exemple 1

Apparence par défaut d'un objet rectangulaire

Regardons un exemple de code pour voir à quoi ressemble un objet rectangulaire sans utiliser la propriété 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>Default appearance of the rectangle object</h2>
   <p>You can try scaling the rectangle to see that there is no minimum allowed scale value.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 155,
         top: 90,
         width: 170,
         height: 70,
         fill: "#6f2da8",
         padding: 9,
         stroke: "#b666d2",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copier après la connexion

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 rectangulaire dans la toile. Ici, nous utilisons 0,8 comme valeur, ce qui signifie que nous ne pourrons pas réduire l'objet à moins de 136 pixels de largeur et 56 pixels de hauteur, ce qui est calculé par rayon* limite (0,8 * 170 = 136 pixels), 0,8 * 70 = 56 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>Passing the minScaleLimit property as key with a custom value</h2>
   <p>You can try scaling the rectangle and observer that it isn&#39;t possible to scale down the rectangle lesser than a width of 136px and height of 56px.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 155,
         top: 90,
         width: 170,
         height: 70,
         fill: "#6f2da8",
         padding: 9,
         stroke: "#b666d2",
         strokeWidth: 5,
         minScaleLimit: 0.8,
      });

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