如何使用 FabricJS 创建带有背景图像的画布?
在本文中，我们将使用 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>
