通过 JSON 在 Draw2D.js 中保存和恢复图表

Question

如何创建带有添加到这些节点的标签的节点，以便我可以通过 JSON 保存和恢复它们？ 我尝试以这种方式使用 JSON 写入器/读取器

$(window).load(function () {

    var canvas = new draw2d.Canvas("gfx_holder");


    // unmarshal the JSON document into the canvas
    // (load)
    var reader = new draw2d.io.json.Reader();
    reader.unmarshal(canvas, jsonDocument);

    // display the JSON document in the preview DIV
    //
    displayJSON(canvas);


    // add an event listener to the Canvas for change notifications.
    // We just dump the current canvas document into the DIV
    //
    canvas.getCommandStack().addEventListener(function(e){
        if(e.isPostChangeEvent()){
            displayJSON(canvas);
        }
    });

});

function displayJSON(canvas){
    var writer = new draw2d.io.json.Writer();
    writer.marshal(canvas,function(json){
        $("#json").text(JSON.stringify(json, null, 2));
    });
}

它直接写入我添加到画布的所有节点，但不写入子节点，因此如果我向起始节点添加标签，例如，它将写入和绘制起始节点但其中没有标签 我该如何解决？

Answer 1

我找到了一个解决方案，可以使编写器能够在 JSON 中的节点内写入标签 您必须创建一个自定义节点并使其继承您要创建它的形状，而不是创建原始节点的实例，使其从自定义节点创建
这是您必须创建的节点

var CustomNode = {};

/**
 * @class example.connection_locator.LabelConnection
 * 
 * A simple Connection with a label wehich sticks in the middle of the connection..
 *
 * @author Andreas Herz
 * @extend draw2d.Connection
 */
CustomNode.Start = draw2d.shape.node.Start.extend({

    NAME: "CustomNode.Start",

    init: function (attr) {
        this._super(attr);
        if (attr == undefined) {
            this.setResizeable(false);
        }
        // labels are added via JSON document.
    },

    /**
     * @method 
     * Return an objects with all important attributes for XML or JSON serialization
     * 
     * @returns {Object}
     */
    getPersistentAttributes: function () {
        var memento = this._super();

        // add all decorations to the memento 
        //
        memento.labels = [];
        this.children.each(function (i, e) {
            var labelJSON = e.figure.getPersistentAttributes();
            labelJSON.locator = e.locator.NAME;
            memento.labels.push(labelJSON);
        });

        return memento;
    },

    /**
     * @method 
     * Read all attributes from the serialized properties and transfer them into the shape.
     * 
     * @param {Object} memento
     * @returns 
     */
    setPersistentAttributes: function (memento) {
        this._super(memento);

        // remove all decorations created in the constructor of this element
        //
        this.resetChildren();

        // and add all children of the JSON document.
        //
        $.each(memento.labels, $.proxy(function (i, json) {
            // create the figure stored in the JSON
            var figure = eval("new " + json.type + "()");

            // apply all attributes
            figure.attr(json)

            // instantiate the locator
            var locator = eval("new " + json.locator + "()");

            // add the new figure as child to this figure
            this.add(figure, locator);
        }, this));
    }
}); 

现在这两种方法将使写入器在 obj 的末尾包含 JSON 中的子标签，像这样

"labels": [
      {
        "type": "draw2d.shape.basic.Label",
        "id": "4676f2fe-ab4d-9944-563a-db52aa3ebd44",
        "x": 7.5,
        "y": 13.5,
        "width": 29.6875,
        "height": 21,
        "alpha": 1,
        "selectable": false,
        "draggable": false,
        "angle": 0,
        "userData": {},
        "cssClass": "draw2d_shape_basic_Label",
        "ports": [],
        "bgColor": "rgba(0,0,0,0)",
        "color": "rgba(27,27,27,1)",
        "stroke": 1,
        "radius": 0,
        "dasharray": null,
        "text": "start",
        "outlineStroke": 0,
        "outlineColor": "rgba(0,0,0,0)",
        "fontSize": 12,
        "fontColor": "rgba(8,8,8,1)",
        "fontFamily": null,
        "locator": "draw2d.layout.locator.CenterLocator"
      }
    ]