Question

在mxGraph-js中，我使用以下代码将叠加层添加到顶点。

graph.addCellOverlay(cell, overlay);

使用

将图形编码为xml

var graph = new mxGraph(container);
var xml = encoder.encode(graph.getModel());

然后使用以下方法对其进行解码。

var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());

我的问题是当解码编码图形时，它会绘制图形而不覆盖。编码叠加层似乎没有编码到xml中如何使用叠加层对图形进行编码，然后将其正确解码？。

Answer 1

我遇到了同样的问题。没有挖掘mxGraph js代码，我怀疑它是一个缺失的功能或可能破坏的功能。

我看到以下几种可能的选择。

将图像嵌入到单元格样式中。 请参阅源示例fixedicon.html。

<mxGraphModel>
    <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="2" value="Fixed icon" style="shape=label;image=images/plus.png;imageWidth=16;imageHeight=16;spacingBottom=10;fillColor=#adc5ff;gradientColor=#7d85df;glass=1;rounded=1;shadow=1;" vertex="1" parent="1">
            <mxGeometry x="20" y="20" width="80" height="50" as="geometry"/>
        </mxCell>
    </root>
</mxGraphModel>

通过父属性与主单元格相关的端口类型单元格（在样式中定义）。 请参阅源示例ports.html。

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="<h1 style="margin:0px;">Website</h1><br><img src="images/icons48/earth.png" width="48" height="48"><br>
        <a href="http://www.jgraph.com" target="_blank">Browse</a>" vertex="1" connectable="0" parent="1">
      <mxGeometry x="280" y="200" width="120" height="120" as="geometry">
        <mxRectangle width="120" height="40" as="alternateBounds"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="3" value="Trigger" style="port;image=editors/images/overlays/flash.png;align=right;imageAlign=right;spacingRight=18" vertex="1" parent="2">
      <mxGeometry y="0.25" width="16" height="16" relative="1" as="geometry">
        <mxPoint x="-6" y="-8" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="4" value="Input" style="port;image=editors/images/overlays/check.png;align=right;imageAlign=right;spacingRight=18" vertex="1" parent="2">
      <mxGeometry y="0.75" width="16" height="16" relative="1" as="geometry">
        <mxPoint x="-6" y="-4" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="5" value="Error" style="port;image=editors/images/overlays/error.png;spacingLeft=18" vertex="1" parent="2">
      <mxGeometry x="1" y="0.25" width="16" height="16" relative="1" as="geometry">
        <mxPoint x="-8" y="-8" as="offset"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="6" value="Result" style="port;image=editors/images/overlays/information.png;spacingLeft=18" vertex="1" parent="2">
      <mxGeometry x="1" y="0.75" width="16" height="16" relative="1" as="geometry">
        <mxPoint x="-8" y="-4" as="offset"/>
      </mxGeometry>
    </mxCell>
  </root>
</mxGraphModel>

将单元格和图像单元格组合在一起。

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="6" value="" style="group" parent="1" vertex="1" connectable="0">
      <mxGeometry x="70" y="70" width="120" height="85" as="geometry"/>
    </mxCell>
    <mxCell id="4" value="" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;image=images/close.png;" parent="6" vertex="1">
      <mxGeometry x="5" y="76" width="9" height="9" as="geometry"/>
    </mxCell>
    <UserObject label="shape" id="3">
      <mxCell style="whiteSpace=wrap;html=1;" parent="6" vertex="1">
        <mxGeometry width="120" height="60" as="geometry"/>
      </mxCell>
    </UserObject>
  </root>
</mxGraphModel>

Answer 2

正在探索在初始答案中添加子单元格，如选项＃2，但没有找到添加单击事件处理程序的方法。结束挖掘源代码，发现在mxCellCodec类中它实例化了一个mxObjectCodec，它有一个包含叠加层的默认排除列表。

var codec = new mxObjectCodec(new mxCell(),
['children', 'edges', 'overlays', 'mxTransient'],
['parent', 'source', 'target']);

解决方案是删除＆＃34;覆盖＆＃34;来自编解码器排除列表。我还必须将allowEval属性设置为true，以允许事件侦听器函数也被编码和放大。解码。

// remove overlays from exclude list for mxCellCodec so that overlays are encoded into XML
var cellCodec = mxCodecRegistry.getCodec(mxCell);
var excludes = cellCodec.exclude;
excludes.splice(excludes.indexOf('overlays'), 1);

// set flag to allow expressions (function) to be encoded
cellCodec.allowEval = true;

// set flag to allow expressions (function) to be decoded
mxObjectCodec.allowEval = true;

mxGraph js不用顶点

2 个答案: