Maison >interface Web >js tutoriel >Comment créer un canevas avec une image de fond en utilisant FabricJS ?

Comment créer un canevas avec une image de fond en utilisant FabricJS ?

王林
王林avant
2023-09-23 11:29:041095parcourir

如何使用 FabricJS 创建带有背景图像的画布?

Dans cet article, nous allons créer un canevas avec une image d'arrière-plan à l'aide de FabricJS. Il existe deux méthodes dans FabricJS pour modifier l'image d'arrière-plan du canevas.

  • La première façon consiste à utiliser la classe Canvas elle-même et à transmettre la backgroundImage.

  • La deuxième méthode consiste à utiliser la méthode setBackgroundColor. Comprenons-les à travers un exemple.

Méthode 1 : Utiliser la classe Canvas

Dans la première méthode, nous utiliserons la classe Canvas elle-même en passant backgroundImage dans le deuxième paramètre de la classe. Re grammaire

new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)

Paramètre

  • Élément -Ce paramètre est Élément lui-même, vous pouvez utiliser Document.GetelementByid () em> ou

🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜 🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 de l'élément 🎜🎜🎜 lui-même est dérivé . Le canevas FabricJS sera initialisé sur cet élément. 🎜🎜🎜🎜🎜🎜Options (facultatif) 🎜🎜 - Ce paramètre est un objet qui fournit une personnalisation supplémentaire au canevas, 🎜backgroundImage🎜 en fait partie, il nous aidera à personnaliser l'image d'arrière-plan. 🎜backgroundImage🎜 Utilisez fabric.Image comme valeur de l'image d'arrière-plan du canevas spécifiée. 🎜🎜🎜🎜Exemple 1🎜🎜 Consultez l'exemple suivant qui montre comment créer un canevas avec une image d'arrière-plan à l'aide de FabricJS. Puisque FabricJS fonctionne au-dessus de l'API Canvas, nous allons créer un élément HTML à l'aide de la balise 🎜 et lui donner un identifiant. De plus, nous transmettrons cet identifiant à l'API FabricJS afin qu'elle puisse initialiser l'instance FabricJS Canvas sur la balise 🎜, et dans le deuxième paramètre, nous transmettrons un objet avec la clé backgroundImage et sa valeur comme URL de l'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> Creating a Canvas with a Background Image in Fabric.js </h2>
   <canvas id="canvas"> </canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         backgroundImage: "https://www.tutorialspoint.com/tools/images/logo.png",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>
🎜Méthode 2 : Utilisez la méthode setBackgroundImage 🎜🎜Nous pouvons également utiliser la méthode 🎜setBackgroundImage🎜 fournie dans la classe Canvas après avoir créé le canevas. Examinons de plus près comment y parvenir. 🎜🎜Syntaxe🎜
canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)
🎜Parameters🎜🎜🎜🎜🎜🎜image🎜🎜 - Ce paramètre accepte un fabric.Image ou une URL de chaîne entre guillemets de l'image sur laquelle nous voulons définir l'arrière-plan. 🎜🎜🎜🎜🎜🎜callback🎜🎜 - Ce paramètre prend une fonction de rappel qui est appelée lorsque l'image est chargée et définie comme arrière-plan. 🎜🎜🎜🎜🎜🎜Options (facultatif) : 🎜🎜 - Ce paramètre est l'objet dans lequel nous pouvons spécifier les options de l'image d'arrière-plan. On peut changer l'opacité, agrandir ou réduire l'image, etc. 🎜🎜🎜🎜Exemple 2🎜🎜Tout d'abord, nous attribuons l'URL de l'image à une variable et l'utilisons comme premier paramètre. Dans le deuxième paramètre, nous lierons le canevas à l'aide de la méthode renderAll() après avoir défini l'image d'arrière-plan comme indiqué dans le code ci-dessous -🎜
<!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> Creating a Canvas with a Background Image in Fabric.js </h2>
   <p> Here we have used the setBackgroundImage method. </p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // Image URL
      var imageURL = "https://www.tutorialspoint.com/tools/images/logo.png";
      canvas.setBackgroundImage(imageURL, canvas.renderAll.bind(canvas), {
         backgroundImageOpacity: 1,
         originX: "left",
         originY: "top",
         top: 90,
         left: 70,
         scaleX: 1.1,
         scaleY: 1.1,
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </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!

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