Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine Leinwand mit einem Hintergrundbild?

Wie erstelle ich mit FabricJS eine Leinwand mit einem Hintergrundbild?

王林nach vorne: 2023-09-23 11:29:041087Durchsuche

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

In diesem Artikel erstellen wir mit FabricJS eine Leinwand mit einem Hintergrundbild. In FabricJS gibt es zwei Methoden, um das Hintergrundbild der Leinwand zu ändern.

Die erste Möglichkeit besteht darin, die Canvas-Klasse selbst zu verwenden und das backgroundImage zu übergeben.
Die zweite Methode ist die Verwendung der Methode setBackgroundColor. Lassen Sie uns sie anhand eines Beispiels verstehen.

Methode 1: Verwendung der Canvas-Klasse

In der ersten Methode verwenden wir die Canvas-Klasse selbst, indem wir backgroundImage im zweiten Parameter der Klasse übergeben. Zur Grammatik

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

Parameter

Element - Dieser Parameter ist Element selbst, Sie können

🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 des 🎜🎜🎜 Elements selbst ist abgeleitet . Der FabricJS-Canvas wird auf diesem Element initialisiert. 🎜🎜🎜🎜🎜🎜Optionen (optional) 🎜🎜 – Dieser Parameter ist ein Objekt, das der Leinwand zusätzliche Anpassungen ermöglicht. 🎜backgroundImage🎜 ist eines davon und hilft uns, das Hintergrundbild anzupassen. 🎜backgroundImage🎜 Verwenden Sie fabric.Image als Wert des angegebenen Canvas-Hintergrundbilds. 🎜🎜🎜🎜Beispiel 1🎜🎜 Schauen Sie sich das folgende Beispiel an, das zeigt, wie Sie mit FabricJS eine Leinwand mit einem Hintergrundbild erstellen. Da FabricJS auf der Canvas-API basiert, erstellen wir ein HTML-Element mit dem 🎜-Tag und geben ihm eine ID. Darüber hinaus übergeben wir diese ID an die FabricJS-API, damit diese die FabricJS-Canvas-Instanz auf dem 🎜-Tag initialisieren kann, und im zweiten Parameter übergeben wir ein Objekt mit dem Schlüssel „backgroundImage“ und seinem Wert als URL des Bildes. 🎜

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

🎜Methode 2: Verwenden Sie die setBackgroundImage-Methode 🎜🎜Wir können nach dem Erstellen der Leinwand auch die in der Canvas-Klasse bereitgestellte 🎜setBackgroundImage🎜-Methode verwenden. Schauen wir uns genauer an, wie wir das erreichen können. 🎜🎜Syntax🎜

canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)

🎜Parameter🎜🎜🎜🎜🎜🎜image🎜🎜 – Dieser Parameter akzeptiert ein fabric.Image oder eine in Anführungszeichen gesetzte Zeichenfolgen-URL des Bildes, auf das wir den Hintergrund festlegen möchten. 🎜🎜🎜🎜🎜🎜callback🎜🎜 – Dieser Parameter übernimmt eine Callback-Funktion, die aufgerufen wird, wenn das Bild geladen und als Hintergrund festgelegt wird. 🎜🎜🎜🎜🎜🎜Optionen (optional): 🎜🎜 – Dieser Parameter ist das Objekt, in dem wir die Hintergrundbildoptionen angeben können. Wir können die Deckkraft ändern, das Bild vergrößern oder verkleinern usw. 🎜🎜🎜🎜Beispiel 2🎜🎜Zuerst weisen wir die Bild-URL einer Variablen zu und verwenden sie als ersten Parameter. Im zweiten Parameter binden wir die Leinwand mit der Methode renderAll(), nachdem wir das Hintergrundbild wie im Code unten gezeigt eingestellt haben -🎜

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

🎜

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine Leinwand mit einem Hintergrundbild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Fabric.js – So zeichnen Sie ein sechseckiges Gitter (Wabe) mit der Polygon-KlasseNächster Artikel：Fabric.js – So zeichnen Sie ein sechseckiges Gitter (Wabe) mit der Polygon-Klasse

In Verbindung stehende Artikel

Mehr sehen