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

fabricjsjavascripthtml5 canvas更新于 2025/1/26 19:24:17

在本文中，我们将使用 FabricJS 创建带有背景图像的画布。FabricJS 中有两种方法可以更改画布的背景图像。

第一种方法是使用 Canvas 类本身并在该类的第二个参数中传递 backgroundImage。
第二种方法是使用 setBackgroundColor 方法。让我们通过一个例子来了解它们中的每一个。

方法 1:使用 Canvas 类

在第一种方法中，我们将通过在类的第二个参数中传递 backgroundImage 来使用 Canvas 类本身。

语法

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

参数

element − 此参数是 <canvas> 元素本身，可以使用 document.getElementById() 或 <canvas> 元素本身的 id 派生。 FabricJS 画布将在此元素上初始化。
选项(可选) − 此参数是一个对象，它为我们的画布提供额外的自定义，backgroundImage 就是其中之一，它将帮助我们自定义背景图像。backgroundImage 将 fabric.Image 作为指定画布背景图像的值。

示例 1

查看以下示例，该示例演示了如何使用 FabricJS 创建带有背景图像的画布。由于 FabricJS 在 Canvas API 之上工作，我们将使用 <canvas> 标记创建一个 HTML 元素并为其指定一个 id。此外，我们将该 id 传递给 FabricJS API，以便它可以在 <canvas> 上初始化 FabricJS Canvas 实例标签，在第二个参数中，我们将传递一个对象，其键为 backgroundImage，值是图像的 URL。

<!DOCTYPE html>
<html>
<head>
   <!-- 添加 Fabric JS 库-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2> 在 Fabric.js 中创建带有背景图像的画布 </h2>
   <canvas id="canvas"> </canvas>
   <script>
      //初始化一个画布实例
      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>

方法 2:使用 setBackgroundImage 方法

创建画布后，我们还可以使用 Canvas 类中提供的 setBackgroundImage 方法。让我们仔细看看如何实现这一点。

语法

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

参数

image − 此参数接受 fabric.Image 或字符串，该字符串引用我们要设置背景的图像的 url。
callback −此参数采用回调函数，该函数在加载图像并将其设置为背景时调用。
选项(可选): − 此参数是一个对象，我们可以在其中指定背景图像的选项。我们可以更改不透明度，放大或缩小图像等。

示例 2

首先，我们将图像 URL 分配给一个变量，并将其用作第一个参数。在第二个参数中，我们将使用 renderAll() 方法在设置背景图像后绑定画布，如以下代码所示 −

<!DOCTYPE html>
<html>
<head>
   <!-- 添加 Fabric JS 库-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2> 在 Fabric.js 中创建带有背景图像的画布 </h2>
   <p> 这里我们使用了 setBackgroundImage 方法。</p>
   <canvas id="canvas"> </canvas>
   <script>
      // 启动一个canvas实例    var canvas = new Fabric.Canvas("canvas");
      // 图片网址
      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>