DrawIo mxGraph：使用XmlToSvg丢失形状信息

Question

我想使用Java将XML转换为SVG，但它看起来像形状信息在进程中正在迷失。

给出一个简单的draw.io图：

运行XmlToSvg.java后我得到：

我救它作为一个未压缩的XML。我正在使用mxGraph Repo的

您是否知道是否有隐藏的设置可以保留形状和颜色？

Answer 1

短版

看起来尽管GitHub的页面上的要求，除了JavaScript的一个没有实现确实是功能齐全的生产做好准备。特别是Java实现（以及.Net和PHP服务器端）不支持“立方体”形状。

更多细节

颜色

您没有提供您的示例XML，但是当我产生类似的图我得到类似

<?xml version="1.0" encoding="UTF-8"?> 
<mxGraphModel dx="1426" dy="816" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" 
       pageHeight="1100" background="#ffffff" math="0" shadow="0"> 
    <root> 
     <mxCell id="0"/> 
     <mxCell id="1" parent="0"/> 
     <mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1"> 
      <mxGeometry x="445" y="60" width="230" height="150" as="geometry"/> 
     </mxCell> 
     <mxCell id="3" value="" style="ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1"> 
      <mxGeometry x="500" y="320" width="120" height="120" as="geometry"/> 
     </mxCell> 
     <mxCell id="4" value="" style="endArrow=classic;html=1;" parent="1" source="3" target="2" edge="1"> 
      <mxGeometry width="50" height="50" relative="1" as="geometry"> 
       <mxPoint x="430" y="510" as="sourcePoint"/> 
       <mxPoint x="480" y="460" as="targetPoint"/> 
      </mxGeometry> 
     </mxCell> 
     <mxCell id="5" value="" style="shape=cube;whiteSpace=wrap;html=1;" parent="1" vertex="1"> 
      <mxGeometry x="80" y="320" width="170" height="110" as="geometry"/> 
     </mxCell> 
    </root> 
</mxGraphModel> 

这里重要的一点是该XML不包含有关颜色的任何信息。因此关于“保存颜色”的整个想法是错误的。在Java实现中，您可以使用mxStylesheet类的实例配置“默认颜色”，并使用它来初始化mxGraph对象。例如改变颜色为黑色和白色，你可以做这样的事情：

mxStylesheet stylesheet = new mxStylesheet(); 
// configure "figures" aka "vertex" 
{ 
    Map<String, Object> style = stylesheet.getDefaultVertexStyle(); 
    style.put(mxConstants.STYLE_FILLCOLOR, "#FFFFFF"); 
    style.put(mxConstants.STYLE_STROKECOLOR, "#000000"); 
    style.put(mxConstants.STYLE_FONTCOLOR, "#000000"); 
} 
// configure "lines" aka "edges" 
{ 
    Map<String, Object> style = stylesheet.getDefaultEdgeStyle(); 
    style.put(mxConstants.STYLE_STROKECOLOR, "#000000"); 
    style.put(mxConstants.STYLE_FONTCOLOR, "#000000"); 
} 

mxGraph graph = new mxGraph(stylesheet); 

你可以看看mxStylesheet.createDefaultVertexStyle和mxStylesheet.createDefaultEdgeStyle的一些细节。

形状

的“椭圆”形状并不正确地处理，因为没有代码来解析"ellipse;whiteSpace=wrap;html=1;"和理解的是，形状应该是“椭圆形”（comapre此“双椭圆“样式"ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;aspect=fixed;"，其包含明确的shape值）。在JS实现中，样式的第一部分似乎选择了一个处理函数来处理字符串的其余部分并进行实际工作。在Java implmenetation中似乎没有这样的特性。您可以通过使用“命名样式”功能工作时，此身定义默认形状在同一mxStylesheet对象这样相应的“处理程序”：

// I just copied the whole list of mxConstants.SHAPE_ here 
// you probably should filter it by removing non-primitive shapes 
// such as mxConstants.SHAPE_DOUBLE_ELLIPSE 
String[] shapes = new String[] { 
     mxConstants.SHAPE_RECTANGLE, 
     mxConstants.SHAPE_ELLIPSE, 
     mxConstants.SHAPE_DOUBLE_RECTANGLE, 
     mxConstants.SHAPE_DOUBLE_ELLIPSE, 
     mxConstants.SHAPE_RHOMBUS, 
     mxConstants.SHAPE_LINE, 
     mxConstants.SHAPE_IMAGE, 
     mxConstants.SHAPE_ARROW, 
     mxConstants.SHAPE_CURVE, 
     mxConstants.SHAPE_LABEL, 
     mxConstants.SHAPE_CYLINDER, 
     mxConstants.SHAPE_SWIMLANE, 
     mxConstants.SHAPE_CONNECTOR, 
     mxConstants.SHAPE_ACTOR, 
     mxConstants.SHAPE_CLOUD, 
     mxConstants.SHAPE_TRIANGLE, 
     mxConstants.SHAPE_HEXAGON, 
}; 
Map<String, Map<String, Object>> styles = stylesheet.getStyles(); 
for (String sh : shapes) 
{ 
    Map<String, Object> style = new HashMap<>(); 
    style.put(mxConstants.STYLE_SHAPE, sh); 
    styles.put(sh, style); 
} 

不过您可能会注意到mxConstants.SHAPE_的列表中不包含“立方体”。在JS实现中，“cube”是由examples/grapheditor/www/js/Shape.js中的专门处理程序处理的复合形状，它不是核心库的一部分！这意味着如果你想在你的Java代码中支持这些高级形状，你必须推出代码来处理它。

P.S.所有这些变化（黑客）我开始使用Java代码从第一个片段的XML形象是：