Maison > Article > interface Web > 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:041060parcourir

如何使用 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

🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜 🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 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!

html 回调函数字符串对象 canvas fabric

Déclaration：

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

Article précédent：Fabric.js – Comment dessiner une grille hexagonale (nid d'abeille) à l'aide de la classe PolygonArticle suivant：Fabric.js – Comment dessiner une grille hexagonale (nid d'abeille) à l'aide de la classe Polygon

Articles Liés

Voir plus