Comment créer un canevas avec une image de fond en utilisant FabricJS ?-js tutoriel-php.cn

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

王林

Libérer： 2023-09-23 11:29:04

avant

1255 Les gens l'ont consulté

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

Copier après la connexion

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>  <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>
Copier après la connexion
🎜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)
Copier après la connexion
🎜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>  <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>
Copier après la connexion
🎜
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!