1

我是 Draw2D.js 的新手，我创建了带有三个子标签的“Horizo​​ntalLayout”。并尝试使用三个子标签获取“Horizo​​ntalLayout”的 JSON。

我的代码如下：

HTML：

<div id="gfx_holder" style="width: 3000px; height: 3000px; cursor: default"></div>

<pre id="json"
     style="overflow:auto; position:absolute; top:10px; right:10px; width:350; height:500; background:white; border:1px solid gray">
</pre>

JS：

var canvas = new draw2d.Canvas("gfx_holder");
var label1 = new draw2d.shape.basic.Label({text: "TEST123"});
var label2 = new draw2d.shape.basic.Label({text: "Label 2"});
var label3 = new draw2d.shape.basic.Label({text: "Label 3"});

var container1 = new draw2d.shape.layout.HorizontalLayout();
container1.add(label1);
container1.add(label2);
container1.add(label3);
container1.setGap(10);
container1.setStroke(2);

canvas.add(container1, 50, 10);

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

上面的代码生成以下输出：

在此处输入图像描述

我通过调用displayJSON(canvas)方法获取 JSON。但我只是得到父（HorizontalLayout）形状没有得到子标签。

我通过调用displayJSON(canvas)方法得到以下 JSON：

[
  {
    "type": "draw2d.shape.layout.HorizontalLayout",
    "id": "9c009d71-a2af-6c86-51c4-e9011c9a446d",
    "x": 198,
    "y": 122,
    "width": 184.390625,
    "height": 28,
    "alpha": 1,
    "angle": 0,
    "userData": {},
    "cssClass": "draw2d_shape_layout_HorizontalLayout",
    "ports": [],
    "bgColor": "none",
    "color": "#1B1B1B",
    "stroke": 2,
    "radius": 0,
    "dasharray": null,
    "gap": 10
  }
]

我想获得JSON带有HorizontalLayout子标签的整个数字。那么，我怎样才能得到它？之后如何显示 Draw2d 图形JSON？

4

0 回答 0