Maison > Article > interface Web > FabricJS - Comment redimensionner un objet image à une largeur donnée ?

FabricJS - Comment redimensionner un objet image à une largeur donnée ?

WBOYavant: 2023-09-15 21:13:061024parcourir

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

Dans ce tutoriel, nous apprendrons comment redimensionner un objet Image à une largeur 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 largeur donnée, nous utilisons la méthode scaleToWidth.

Grammaire

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

Paramètres

value - Ce paramètre accepte un Number qui détermine la nouvelle valeur de largeur 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 scaleToWidth. 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>

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

Exemple

Dans cet exemple, nous verrons comment redimensionner un objet image à une largeur donnée en attribuant une valeur à la méthode scaleToWidth. Puisque nous avons passé la valeur à 200, ce sera la nouvelle largeur 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 scaleToWidth method with a custom value</h2>
   <p>You can see that the new width of our image object is 200</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 scaleToWidth method
      image.scaleToWidth(200, false);
      
      // Add it to the canvas
      canvas.add(image);
   </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!

值传递 number 对象 fabric

Déclaration：

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

Article précédent：Programme JavaScript pour calculer le nombre de rotations nécessaires pour trier un tableau donné dans un ordre non croissantArticle suivant：Programme JavaScript pour calculer le nombre de rotations nécessaires pour trier un tableau donné dans un ordre non croissant

Articles Liés

Voir plus