javascript - mxGraph js 不编码顶点叠加

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 代码，我怀疑它缺少功能或可能损坏的功能。

以下是我看到的一些可能的选项。

1. 将图像嵌入到单元格样式中。 请参阅源示例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>
   

2. 通过父属性与主单元相关的端口类型单元(在样式中定义)。 请参阅源示例 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>
   

3. 形状单元和图像单元组合在一起。

   <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>