Skip to content

1. 保存

js
// 保存
let jsonStr = layer.toFileJson();    

// 可以附带参数, 参数都是可选
let jsonStr = layer.toFileJson({
    // 自定义信息
   info: {author:"张三", date:"2024-02", "desc":"XXX车间装配图", "画面尺寸":"1366x768", ....},
    // 脚本代码
   script: `function(stage, layer, jtopo){....}`,
   //是否将图片以base64的形式内联到json
   imageToBase64: true 
});

2. 加载

js
let json = ...//从后台加载;

// 读取保存时附带的info信息
console.log(json.info); // -> {author:"张三", date:"2024-02", ....}, 

// 打开画面
layer.openJson(json).then((jsonObj)=>{
    console.log('加载完毕');
});

3. 序列化/反序列化指定对象

js
// 将对象转成 ’组件‘ (json格式)
let componentJson = stage.serializerSystem.objectsToComponent([link, toNode]);

// 从json格式的’组件‘生成对象(Node或Link)
let objectArr = stage.serializerSystem.componentToObjects(componentJson);
objectArr.forEach(obj => {
    obj.text += '_组件实例';
    obj.y += 60;
});
layer.addChilds(objectArr);

4. 序列化/反序列化一个Layer画面

js
const stage = new Stage('divId');
const layer = new Layer();
stage.addChild(layer);

// 创建节点连线
let fromNode = new Node('From', 200, 200, 48, 48);
fromNode.setName('jack');
fromNode.setImage('./assets/img/node1.png');

let toNode = new Node('To');
toNode.setXY(400, 200);
toNode.resizeTo(48, 48);
toNode.setImage('./assets/img/node2.png');

let link = new Link('Link',fromNode,toNode);
layer.addChild(fromNode);
layer.addChild(toNode);
layer.addChild(link);


// 保存
let jsonStr = layer.toFileJson();

// 加载
layer.openJson(jsonStr).then((jsonObj)=>{

    // 一些引用已经没有了,需要通过find获取json序列化后的内容
    let afterFromNode = layer.querySelector('[name="jack"]');
    console.log(afterFromNode.text);

    stage.show();
});

参考:保存加载演示