Maison > Article > interface Web > Comment créer une représentation objet d'un objet image à l'aide de FabricJS ?

Comment créer une représentation objet d'un objet image à l'aide de FabricJS ?

王林avant: 2023-08-23 20:53:021357parcourir

如何使用 FabricJS 创建图像对象的对象表示？

Dans ce tutoriel, nous apprendrons comment créer une représentation objet d'une image Objets utilisant FabricJS. Nous pouvons créer un objet Image en créant une instance Tissu.Image. Puisqu’il s’agit d’un des éléments de base de FabricJS, on peut aussi facilement Personnalisez-le en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour créer un objet Pour représenter un objet Image, nous utilisons la méthode toObject.

Grammaire

toObject(propertiesToInclude: Array): Object

Paramètres

propertiesToInclude - Ce paramètre accepte un Array contenant n'importe quel Attributs supplémentaires que nous souhaiterons peut-être inclure dans la sortie. Ce paramètre est Facultatif.

Utilisez la méthode toObject

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toObject. Dans ce cas, une représentation objet de l’instance Image est renvoyée.

<!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>Using the toObject method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the Object representation of the image instance
   </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);
      
      // Using the toObject method
      console.log(
         "Object representation of the Image instance is: ",
         image.toObject()
      );
   </script>
</body>
</html>

Ajoutez des propriétés supplémentaires à l'aide de la méthode toObject

Exemple

Regardons un exemple de code pour voir comment utiliser Méthode toObject. Dans cet exemple, nous avons ajouté une propriété personnalisée appelée "nom de propriété". Nous pouvons transmettre des propriétés spécifiques à l'instance fabric.Image comme indiqué ci-dessous deuxième paramètre dans l'objet options et transmettez la même clé à la méthode toObject.

<!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>Using toObject method to add additional properties</h2>
   <p>
      You can open console from dev tools and see that the logged output contains added property called PropertyName
   </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 with PropertyName key
      // passed in options object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         PropertyName: "property",
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the toObject method
      console.log(
         "Object representation of the Image instance is: ",
         image.toObject(["PropertyName"])
      );
   </script>
</body>
</html>

Conclusion

Dans ce tutoriel, nous utilisons deux exemples pour montrer comment créer des objets Utilisez FabricJS pour représenter les images.

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!

Array 对象 fabric

Déclaration：

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

Article précédent：Comment trouver le facteur d'échelle d'objet d'une image à l'aide de FabricJS ?Article suivant：Comment trouver le facteur d'échelle d'objet d'une image à l'aide de FabricJS ?

Articles Liés

Voir plus