資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 建立帶有背景影像的畫布？
在本文中，我們將使用 FabricJS 建立一個帶有背景影像的畫布。FabricJS 中有兩種方法可以更改畫布的背景影像。
第一種方法是使用 Canvas 類本身，並在類的第二個引數中傳遞 **backgroundImage**。
第二種方法是使用 **setBackgroundColor** 方法。讓我們透過示例來了解每種方法。
方法 1：使用 Canvas 類
在第一種方法中，我們將使用 Canvas 類本身，並在類的第二個引數中傳遞 backgroundImage。
語法
new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)引數
element − 此引數是 <canvas> 元素本身，可以使用 document.getElementById() 或 <canvas> 元素的 id 獲取。FabricJS 畫布將在此元素上初始化。
options (可選) − 此引數是一個物件，它為我們的畫布提供額外的自定義選項，backgroundImage 就是其中之一，它將幫助我們自定義背景影像。backgroundImage 接受 fabric.Image 作為值，該值指定畫布的背景影像。
示例 1
檢視以下示例，該示例演示瞭如何使用 FabricJS 建立帶有背景影像的畫布。由於 FabricJS 構建在 Canvas API 之上，因此我們將使用 <canvas> 標籤建立一個 HTML 元素併為其指定一個 id。接下來，我們將該 id 傳遞給 FabricJS API，以便它可以在 <canvas> 標籤上初始化 FabricJS Canvas 例項，並在第二個引數中傳遞一個物件，該物件包含一個鍵 backgroundImage 和一個值，該值是影像的 URL。
<!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://tutorialspoint.tw/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 − 此引數接受一個回撥函式，該函式在影像載入並設定為背景時呼叫。
options (可選): − 此引數是一個物件，我們可以在其中指定背景影像的選項。我們可以更改不透明度、放大或縮小影像等。
示例 2
首先，我們將影像 URL 分配給一個變數，並將其用作第一個引數。在第二個引數中，我們將使用 renderAll() 方法在設定背景影像後繫結畫布，如下面的程式碼所示 -
<!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://tutorialspoint.tw/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>
5K+ 瀏覽量
