FabricJS - Comment redimensionner une image uniformément horizontalement et verticalement ?-js tutoriel-php.cn

FabricJS - Comment redimensionner une image uniformément horizontalement et verticalement ?

WBOY

Libérer： 2023-09-06 21:29:07

avant

979 Les gens l'ont consulté

FabricJS – 如何在水平和垂直方向上均匀缩放图像？

Dans ce tutoriel, nous apprendrons comment redimensionner une image de manière uniforme, horizontalement et verticalement, à 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 l'image uniformément dans les directions horizontale et verticale, nous utilisons la méthode scale.

Grammaire

scale(value: Number): fabric.Object

Copier après la connexion

Paramètres

scale - Ce paramètre accepte un Number, qui est utilisé pour définir le facteur d'échelle de l'objet image.

Apparence par défaut de l'objet Image

Exemple

Regardons un exemple de code pour voir à quoi ressemble notre objet image sans utiliser la méthode scale. Dans ce cas, notre objet image ne sera pas mis à l'échelle horizontalement et 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 scale

Exemple

Dans cet exemple, nous allons maintenant voir qu'une valeur est attribuée à la méthode d'échelle, qui met à l'échelle notre objet image de manière égale horizontalement et verticalement. Puisque nous avons transmis la valeur à 2, c'est le facteur d'échelle à considérer maintenant.

<!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 scale method with a custom value</h2>
   <p>
      You can see that the object has been scaled in horizontal and 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,
      });
      
      // Using the scale method
      image.scale(2);
      
      // 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!