在本文中,我們將使用 FabricJS 建立具有背景圖像的畫布。 FabricJS 中有兩種方法可以改變畫布的背景影像。
第一種方法是使用 Canvas 類別本身並傳遞 backgroundImage。
第二種方法是使用setBackgroundColor方法。讓我們透過一個範例來了解它們。
在第一種方法中,我們將使用Canvas類別本身,方法是在類別的第二個參數中傳遞backgroundImage。
new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)
# - 此參數是
選項(可選) - 此參數是一個對象,它提供對畫布進行額外的自訂,backgroundImage 就是其中之一,它將幫助我們自訂背景圖像。 backgroundImage將fabric.Image作為指定畫布背景圖像的值。
檢查下列範例示範如何使用 FabricJS 建立具有背景影像的 Canvas。由於 FabricJS 在 Canvas API 之上運作,我們將使用 我們也可以在建立畫布後使用 Canvas 類別中提供的 setBackgroundImage 方法。讓我們仔細看看如何實現這一目標。 #image - 此參數接受fabric.Image或引用的字串我們想要設定背景的圖像的URL。 callback - 此參數採用回呼函數當圖片載入並設定為背景時呼叫。 選項(可選): - 此參數是我們可以在其中指定背景圖像選項的物件。我們可以更改不透明度、放大或縮小圖像等。 首先,我們將圖像 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>
<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>
方法 2:使用 setBackgroundImage 方法
語法
canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)
參數
範例 2
<!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>
以上是如何使用 FabricJS 創建帶有背景圖像的畫布?的詳細內容。更多資訊請關注PHP中文網其他相關文章!