FabricJS 如何从JSON中反序列化一个多段线对象

多段线对象的特点是由一组连接的直线段组成。由于它是FabricJS的基本元素之一，我们也可以通过应用角度、不透明度等属性来轻松定制它。

序列化是指将画布转换为可保存的数据，以后可将其转换回画布中。这种数据可以是一个对象或JSON，这样它就可以存储在服务器上。

去序列化是将JSON或对象转换回画布的过程。我们将使用 loadfromJSON() 方法将画布与JSON中的Polyline对象进行去序列化。

语法

loadfromJSON(JSON: String|Object, callback: function, reviver: function): fabric.Canvas

参数

JSON – 这个参数接受一个 字符串或对象 ，包含Canvas数据的序列化形式。
callback – 该参数接受一个函数，当JSON被解析和相应的对象被初始化时被调用。
reviver – 该参数接受一个用于进一步解析JSON元素的函数，在每个织物对象被创建后调用。

示例1：创建Canvas的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转变成Canvas

让我们看一个代码例子，看看我们如何将Canvas转换为JSON，并进一步使用 loadfromJSON ()将其读回。我们将使用 toJSON() 方法来将Canvas转换为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>