資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在FabricJS中從JSON反序列化Polyline物件？
Polyline物件可以用一組連線的直線段來表示。由於它是FabricJS的基本元素之一，我們也可以透過應用角度、不透明度等屬性輕鬆自定義它。
序列化是指將畫布轉換為可儲存的資料，這些資料稍後可以轉換回畫布。此資料可以是物件或JSON，以便可以將其儲存在伺服器上。
反序列化是將JSON或物件轉換回畫布的過程。我們將使用loadfromJSON()方法從JSON反序列化包含Polyline物件的畫布。
語法
loadfromJSON(JSON: String|Object, callback: function, reviver: function): fabric.Canvas
引數
JSON − 此引數接受包含畫布資料序列化形式的字串或物件。
callback − 此引數接受一個函式，該函式在解析JSON並初始化相應物件後被呼叫。
reviver − 此引數接受一個函式，用於進一步解析JSON元素，在建立每個fabric物件後呼叫。
示例1：建立畫布的JSON序列化形式
讓我們看一個程式碼示例，看看使用toJSON方法時記錄的輸出。在這種情況下，將返回Polyline例項的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>Creating the JSON serialized form of a Canvas</h2>
<p> You can open console from dev tools and see that the logged output contains the JSON representation of the Polyline instance </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Polyline instance
var polyLine = new fabric.Polyline([
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 100 },
{ x: 350, y: 60 },
], {
stroke: "skyblue",
fill: "white",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(polyLine);
// Using the toJSON method
console.log("JSON representation of the Polyline instance is: ", polyLine.toJSON());
</script>
</body>
</html>
示例2：使用loadfromJSON()方法將JSON轉換回畫布
讓我們看一個程式碼示例，看看如何將畫布轉換為JSON，並使用loadfromJSON()進一步讀取它。我們將使用toJSON()方法將畫布轉換為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>Using loadfromJSON() method to convert JSON back to Canvas</h2>
<p> You can see the currently rendered canvas with Polyline object is coming from a JSON </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas();
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Polyline object with name key
// passed in options object
var polyLine = new fabric.Polyline([
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 100 },
{ x: 350, y: 60 },
], {
stroke: "skyblue",
fill: "white",
strokeWidth: 5,
});
// Add it to the canvas instance
canvas.add(polyLine);
// Using the toJSON method to convert canvas to json
var jsonForm = canvas.toJSON();
// Create a new canvas instance
var newCanvas = new fabric.Canvas("canvas");
newCanvas.setWidth(document.body.scrollWidth);
newCanvas.setHeight(250);
// load the JSON as a Canvas using loadFromJSON()
newCanvas.loadFromJSON(jsonForm);
</script>
</body>
</html>
更新於：2023年2月16日
504 次瀏覽
廣告