資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 克隆畫布？
在本文中，我們將學習如何使用 FabricJS 克隆畫布。我們可以使用 clone() 方法克隆畫布例項。通常，當我們想將畫布例項遠端傳送到其他地方時，這很有用，通常最好以 JSON 格式傳送畫布例項克隆，而不是傳送畫布的影像。clone() 方法幫助我們建立任何畫布例項及其物件的克隆。
語法
clone( callback: Object, propertiesToInclude: Array)
引數
回撥函式 (可選) − 此引數是一個回撥函式，它使用克隆來呼叫。
要包含的屬性 (可選) − 此引數包含我們希望包含在克隆畫布例項中的任何其他屬性。這必須採用陣列的形式。
示例 1
克隆畫布並渲染它
讓我們看一個程式碼示例，瞭解如何使用回撥方法克隆例項。clone() 方法接收一個回撥函式作為第一個引數，在該函式中，我們將克隆的畫布物件轉換為 JSON。這個新的克隆畫布物件現在被覆蓋到畫布上。
<!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>Cloning a Canvas in Fabric.js</h2>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#85bb65",
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
canvas.clone(function(clonedCanvas) {
// Convert our cloned Canvas Object to JSON
let canvasJSON = clonedCanvas.toJSON();
// Load the new cloned Canvas Object to canvas
canvas.loadFromJSON(canvasJSON);
});
</script>
</body>
</html>示例 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>How to clone a canvas using Fabric.js</h2>
<p>Inspect this output canvas on the browser. You will find the additional properties have been recorded.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
"myRandomProperty": "value"
});
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
canvas.clone(function(clonedCanvas) {
// Log the cloned Canvas to check if the
// additional property is added or not
console.log(clonedCanvas);
},
["myRandomProperty"]);
</script>
</body>
</html>現在，在瀏覽器上檢查這個輸出畫布，您將看到以下值。請注意，我們提供的其他屬性“myRandomProperty”已被記錄。
更新於: 2022年5月19日
2K+ 瀏覽量
廣告