javascript - JSPlumb 图到 JSON

Question

我一直在开发图表工具，我使用的是 JSPlumb。

我使用 CSS 制作形状，并通过 JSplumb 制作连接。

我需要将图表保存为 json 或 xml 格式。但是我很难过。

比如这是保存图表的函数

$(function save() {
        //$("#editor").resizable("destroy");
        Objs = [];
        $('#editor').each(function(){
            Objs.push({id:$(this).attr('id'), html:$(this).html(), left:$(this).css('left'), top:$(this).css('top'), width:$(this).css('width'), height:$(this).css('height')});
        });
        console.log(Objs);

    });

此外，我一直在尝试使用 stringify 来获取数据并进行解析以进行加载，但我仍然无法弄清楚。

有没有办法可以将 jsplumb 保存为 json 或 xml？

Answer 1

每当建立连接时，都会触发“connection”事件。您需要将连接端点详细信息存储在该触发函数中，以便稍后检索它们。

首先确保您已为端点设置正确的 ID。您可以在创建端点时手动设置为:

var e0 = jsPlumb.addEndpoint("div1",{uuid:"div1_ep1"}),  // You can also set uuid based on element it is placed on
 e1 = jsPlumb.addEndpoint("div2",{uuid:"div2_ep1"});

现在绑定(bind) connection 事件，您将在其中存储已建立的连接信息:

var uuid, index=0; // Array to store the endpoint sets.
jsPlumb.bind("connection", function(ci) {
    var eps = ci.connection.endpoints;
    console.log(eps[0].getUuid() +"->"+ eps[1].getUuid()); // store this information in 2d-Array or any other format you wish
    uuid[index][0]=eps[0].getUuid(); // source endpoint id
    uuid[index++][1]=eps[1].getUuid(); // target endpoint id
    }
});

您可以将数组信息转换成JSON格式存储。恢复时，根据 uuid 连接端点。代码:

jsPlumb.connect({ uuids:["div1_ep1","div2_ep1"] });

这是 jsFiddle用于基于端点建立连接。

注意:以上代码仅用于在恢复 div 的 css 后恢复连接和端点信息。您可以使用您在问题中编写的相同方法来存储所有 div 的 css 属性。