在本教程中，我們將學習如何建立圖像的物件表示
使用 FabricJS 的物件。我們可以透過建立一個實例來建立一個 Image 對象
織物.圖片。由於它是FabricJS的基本元素之一，我們也可以輕鬆地
透過應用角度、不透明度等屬性來自訂它。為了創建一個對象
Image 物件的表示，我們使用 toObject 方法。
文法
toObject(propertiesToInclude: Array): Object
登入後複製
參數
使用toObject方法
範例
讓我們來看一個程式碼範例，看看使用 toObject 方法時記錄的輸出。
在這種情況下，將傳回 Image 實例的物件表示形式。
<!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>Using the toObject method</h2>
<p>
You can open console from dev tools and see that the logged output contains the Object representation of the image instance
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using the toObject method
console.log(
"Object representation of the Image instance is: ",
image.toObject()
);
</script>
</body>
</html>
登入後複製
使用toObject方法新增附加屬性
範例
讓我們來看一個程式碼範例，看看如何使用
toObject 方法。在本例中，我們新增了一個名為的自訂屬性
“屬性名稱”。我們可以將特定屬性傳遞給 fabric.Image 實例，如下所示
選項物件中的第二個參數並將相同的鍵傳遞給 toObject 方法。
<!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>Using toObject method to add additional properties</h2>
<p>
You can open console from dev tools and see that the logged output contains added property called PropertyName
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object with PropertyName key
// passed in options object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
PropertyName: "property",
});
// Add it to the canvas
canvas.add(image);
// Using the toObject method
console.log(
"Object representation of the Image instance is: ",
image.toObject(["PropertyName"])
);
</script>
</body>
</html>
登入後複製
結論
在本教程中，我們使用兩個範例來示範如何建立對象
使用 FabricJS 表示影像。
以上是如何使用 FabricJS 建立影像物件的物件表示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
