DrawIo mxGraph:使用XmlToSvg会丢失形状信息

Question

我正在尝试使用Java将XML转换为SVG,但看起来形状信息在这个过程中会丢失.

给出一个简单的draw.io图表:

运行XmlToSvg.java后,我得到:

我将其保存为未压缩的XML.我使用的是mxgraph-all.jar从mxGraph回购

你知道是否有隐藏的设置来保存形状和颜色？

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;"的“双椭圆”样式）。在 JS 实现中，样式的第一部分似乎选择一个处理函数，该函数将处理字符串的其余部分并执行实际工作。Java实现中似乎根本没有这样的功能。您可以通过使用“命名样式”功能来解决此问题，并为同一对象中相应的“处理程序”定义默认形状，如下所示："ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;aspect=fixed;"shapemxStylesheet

// 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_不包含“ cube ”。在 JS 实现中，“立方体”是一种复合形状，由Examples/grapheditor/www/js/Shape.js中的专门处理程序处理，它不是核心库的一部分！这意味着，如果您想在 Java 代码中支持此类高级形状，则必须推出代码来自行处理。

PS 通过所有这些更改（黑客），我在第一个片段中使用 XML 中的 Java 代码得到的图像是：