FabricJS - Comment mettre à l'échelle un objet image à une hauteur donnée ?-js tutoriel-php.cn

FabricJS - Comment mettre à l'échelle un objet image à une hauteur donnée ?

WBOY

Libérer： 2023-09-10 19:13:02

avant

1356 Les gens l'ont consulté

FabricJS – 如何将图像对象缩放到给定高度？

Dans ce tutoriel, nous apprendrons comment mettre à l'échelle un objet Image à une hauteur donnée à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour redimensionner un objet Image à une hauteur donnée, nous utilisons la méthode scaleToHeight.

Grammaire

scaleToHeight(value: Number, absolute: Boolean): fabric.Object

Copier après la connexion

Paramètres

value - Ce paramètre accepte un Number qui détermine la nouvelle valeur de hauteur de l'objet Image.
< /里>
absolute - Ce paramètre accepte une valeur boolean qui détermine si la fenêtre d'affichage est ignorée.

Apparence par défaut de l'objet Image

Exemple

Regardons un exemple de code pour voir à quoi ressemble un objet image sans utiliser la méthode scaleToHeight. Dans ce cas, notre objet image ne sera pas mis à l'échelle horizontalement ou verticalement.

<!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 Image object</h2>
   <p>
      You can see that the object has not been scaled in horizontal or vertical direction
   </p> 
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copier après la connexion

Passez une valeur personnalisée en utilisant la méthode scaleToHeight

Exemple

Dans cet exemple, nous verrons comment redimensionner un objet image à une hauteur donnée en attribuant une valeur à la méthode scaleToHeight. Puisque nous avons passé la valeur à 100, ce sera la nouvelle hauteur de l'objet image.

<!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 scaleToHeight method with a custom value</h2>
   <p>You can see that the new height of our image object is 100</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Using scaleToHeight method
      image.scaleToHeight(100, false);
      
      // Add it to the canvas
      canvas.add(image);
   </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!