FabricJS - Comment créer une instance de fabric.Image à partir de sa représentation objet ?-js tutoriel-php.cn

FabricJS - Comment créer une instance de fabric.Image à partir de sa représentation objet ?

WBOY

Libérer： 2023-08-25 21:17:14

avant

770 Les gens l'ont consulté

FabricJS – 如何从其对象表示创建fabric.Image 的实例？

Dans ce tutoriel, nous allons vous montrer comment créer une instance de Fabric.Image Obtenu à partir de sa représentation d'objet à l'aide de FabricJS. Nous pouvons créer un objet Image en Créez une instance de fabric.Image. Puisqu'il s'agit d'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 créer une instance de fabric.Image à partir de sa représentation objet, nous utilisons Méthode fromObject.

Grammaire

fromObject(object: Object, callback: function)

Copier après la connexion

Paramètres

object - Ce paramètre accepte un objet qui représente l'objet à obtenir à partir de L'image sera créée.
callback - Ce paramètre est une fonction lorsque l'image Instance créée.

Ne pas utiliser la méthode fromObject

Exemple

Regardons un exemple de code pour comprendre comment un objet Image apparaît lorsque fromObject La méthode n’est pas utilisée. Dans ce cas, il suffit de créer une instance de fabric.Image et Ajoutez ceci à notre toile.

<!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>Without using the fromObject method</h2>
   <p>You can see that the image object has been added to the canvas</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

Utilisez la méthode fromObject

Exemple

Dans cet exemple, nous avons utilisé la méthode fromObject pour démontrer que nous pouvons Les objets image peuvent être créés même si nous n'avons pas d'élément image. Dans ce cas nous Objet à partir duquel l'instance d'image doit être créée. après Appelez la fonction de rappel et ajoutez-la au canevas.

<!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 fromObject method</h2>
   <p>You can see that the image has been added</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Using fromObject method
      fabric.Image.fromObject({
            type: "image",
            version: "5.1.0",
            originX: "left",
            originY: "top",
            left: 110,
            src: "https://www.tutorialspoint.com/images/logo.png",
         },
         function(oImg) {
            oImg.set("top", 50);
            canvas.add(oImg);
         }
      );
   </script>
</body>
</html>

Copier après la connexion

Conclusion

Dans ce tutoriel, nous utilisons deux exemples pour montrer comment créer une instance Obtenez un Fabric.Image à partir de sa représentation d'objet à l'aide de FabricJS.

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!