数据结构
网络
关系数据库管理系统(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 次浏览
广告