如何以正确的方式创建具有 4 个端口(每侧)的矩形,以便我可以通过 JSON 保存和恢复它们?

我试过这个,但只保存了矩形。连接和标签丢失了。

JSFiddle: http://jsfiddle.net/xfvf4/36/

  • 创建两个元素(添加) - 移动它们并连接它们
  • 写入:这将内容作为 JSON 数组
  • 读取:应该从 JSON 数组中生成图形

  • 最后一点不起作用。

    JS:
    var LabelRectangle = draw2d.shape.basic.Rectangle.extend({
    
        NAME: "draw2d.shape.basic.Rectangle",
    
        init: function (attr) {
            this._super(attr);
            this.label = new draw2d.shape.basic.Label({
                text: "Text",
                fontColor: "#0d0d0d",
                stroke: 0
            });
            this.add(this.label, new draw2d.layout.locator.CenterLocator(this));
            this.label.installEditor(new draw2d.ui.LabelInplaceEditor());
            this.createPort("hybrid", new draw2d.layout.locator.BottomLocator(this));
        },
        getPersistentAttributes: function () {
            var memento = this._super();
    
            memento.labels = [];
    
            var ports = [];
            ports = this.getPorts();
    
            memento.ports = [];
    
            console.log(ports);
            this.children.each(function (i, e) {
              console.log(e);
                memento.labels.push({
                    id: e.figure.getId(),
                    label: e.figure.getText(),
                    locator: e.locator.NAME
                });
                ports.each(function (i, e) {
                  memento.ports.push({
                      //id: e.id,
                      name: e.name,
                      locator: e.locator.NAME
                  });
                });
    
            });
    
            return memento;
        },
        setPersistentAttributes: function (memento) {
            this._super(memento);
    
            this.resetChildren();
    
            $.each(memento.labels, $.proxy(function (i, e) {
                var label = new draw2d.shape.basic.Label(e.label);
                var locator = eval("new " + e.locator + "()");
                locator.setParent(this);
                this.add(label, locator);
            }, this));
        }
    });
    
    
    $(window).load(function () {
        var canvas = new draw2d.Canvas("gfx_holder");
    
        $("#add").click(function (e) { // Add a new rectangle
            var rect = new LabelRectangle({
                width: 200,
                height: 40,
                radius: 3,
                bgColor: '#ffffff',
                stroke: 0
            });
            rect.createPort("hybrid", new draw2d.layout.locator.OutputPortLocator(rect));
            rect.createPort("hybrid", new draw2d.layout.locator.InputPortLocator(rect));
            rect.createPort("hybrid", new draw2d.layout.locator.TopLocator(rect));
            canvas.add(rect, 150, 200);
        });
    
        $("#write").click(function (e) { // Write to pre-Element (JSON)
          var writer = new draw2d.io.json.Writer();
          writer.marshal(canvas, function(json){
              $("#json").text(JSON.stringify(json,null,2));
              $('#gfx_holder').empty();
          });
    
        });
    
        $("#read").click(function (e) { // Read from pre-Element (JSON)
          var canvas = new draw2d.Canvas("gfx_holder");
          var jsonDocument = $('#json').text();
          var reader = new draw2d.io.json.Reader();
          reader.unmarshal(canvas, jsonDocument);
        });
    
    });
    

    HTML:
    <ul class="toolbar">
      <li><a href="javascript:void(0);" id="add" title="Add">Add</a></li>
      <li><a href="javascript:void(0);" id="write" title="Write">Write</a></li>
      <li><a href="javascript:void(0);" id="read" title="Read">Read</a></li>
    
    </ul>
    
    <div id="container" class="boxed">
      <div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="width:100%; height:100%; ">
      </div>
    
      <pre id="json" style="overflow:auto;position:absolute; top:10px; right:10px; width:350; height:500;background:white;border:1px solid gray">
      </pre>
    
    </div>
    

    最佳答案

    只需使用 Draw2D.js 5.0.4 的“json”文件夹中的 write.js 和 Reader.js 以及以下代码:

    $(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));
        });
    }
    

    关于draw2d-js - 通过 JSON 在 Draw2D.js touch 中保存和恢复带有连接的矩形,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24710507/

    10-12 07:37
    查看更多