画图组件jgraphx项目导出实践（二）

Java画流程图

---

前面一文整体上对流程图组件jgraphx的简单介绍和自带示例的展示，实际上仔细点的话里面的东西还是比较多的，但是需要深入的去挖掘它，所以站在我的水平面高度上我将会对我认为有用的一些示例进行研究。

由于项目自身的示例都是基于Swing展示的，而Swing类的CS程序几乎不会被使用的，所以在实践之前，我们必须要让程序有对应的输出转换，或者说我们要以不用的形式来得到示例输出的结果，如果不能，则示例的实际意义则不大，所以我挑了两种常见的格式进行输出转换，分别时xml和png，尽管它可以输出的格式有许多种类。

1.xml

（1）官方的格式约定转换中并不叫xml，而是叫mxe，但实际它还是叫xml的内容存储，我的示例输出参考如下：

public class HelloWorld2Xml {

    public static void main(String[] args) throws IOException {
        mxGraph graph = new mxGraph();
        Object parent = graph.getDefaultParent();
        graph.getModel().beginUpdate();
        try {
            Object v1 = graph.insertVertex(parent, null, "节点1", 60, 20, 80, 30);
            Object v2 = graph.insertVertex(parent, null, "节点2", 200, 150, 160, 30);
            graph.insertEdge(parent, null, "边", v1, v2);
        } finally {
            graph.getModel().endUpdate();
        }
        //打印输出xml
        HelloWorld2Xml.printXml(graph);
    }

    public static void printXml(mxGraph graph) {
        mxCodec codec = new mxCodec();
        String xml;
        try {
            xml = URLEncoder.encode(mxXmlUtils.getXml(codec.encode(graph.getModel())), "UTF-8");
            System.out.println("编码：" + xml);
            System.out.println("解码：" + URLDecoder.decode(xml , "UTF-8"));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

（2）示例输出xml结果，格式化后的参考如下：

<mxGraphModel>
	<root>
		<mxCell id="0"/>
		<mxCell id="1" parent="0"/>
		<mxCell id="2" parent="1" value="节点1" vertex="1">
			<mxGeometry as="geometry" height="30.0" width="80.0" x="60.0" y="20.0"/>
		</mxCell>
		<mxCell id="3" parent="1" value="节点2" vertex="1">
			<mxGeometry as="geometry" height="30.0" width="160.0" x="200.0" y="150.0"/>
		</mxCell>
		<mxCell edge="1" id="4" parent="1" source="2" target="3" value="边">
			<mxGeometry as="geometry" relative="1"/>
		</mxCell>
	</root>
</mxGraphModel>

（3）示例本身不输出图形，将上述xml保存为mxe后，使用自带的GraphEditor示例程序打开后，可以得到以下结果：

2.png

（1）官方的格式约定另存的类型包含：.png、.mxe、.txt、.svg、.html、.jpg、.bmp、.gif、.wbmp、.jpeg 等多种格式，本次以另存为png为例，我的示例参考如下：

public class HelloWorld2Image {

    public static void main(String[] args) throws IOException {
        mxGraph graph = new mxGraph();
        Object parent = graph.getDefaultParent();
        graph.getModel().beginUpdate();
        try {
            Object v1 = graph.insertVertex(parent, null, "节点1", 260, 20, 100, 30);
            Object v2 = graph.insertVertex(parent, null, "节点2", 200, 150, 80, 30);
            graph.insertEdge(parent, null, "边", v1, v2);
        } finally {
            graph.getModel().endUpdate();
        }

        graph.getModel().beginUpdate();
        try {
            mxCell v1 = (mxCell) graph.insertVertex(parent, null, "菱形", 20, 20, 120, 80);
            v1.setVertex(true);
            v1.setStyle(mxConstants.STYLE_SHAPE + "=" + mxConstants.SHAPE_RHOMBUS);
        } finally {
            graph.getModel().endUpdate();
        }

        //保存图片
        BufferedImage image = mxCellRenderer.createBufferedImage(graph, null, 2, Color.WHITE, true, null);
        File file = new File("graph.png");
        ImageIO.write(image, "PNG", file);
    }

}

（2）打开示例输出的graph.png后得到的以下图片：

 点赞

---

 发表评论

---

 评论列表

---