1、写在前端:任何情况下,保存图片不可能只通过前台代码就能实现,因此,要保存前台绘制的graph图,我们需要用到mxgraph中的java包啦~
2、参考实例:
mxgraph\java\test\com\mxgraph\test\mxImageExportTest.java
这个例子就是将xml文档生成图片的。
3、改良的例子:
/** * 导出图片文件 * @param w 图片宽 * @param h 图片高 * @param imageXML graph对应的xml代码 */ public void exportImage(int w, int h,String imageXML) { String path = "."; String processName="graphImage" File png = new File(path + processName + ".png"); File dir = new File(path); if (!dir.exists()) {//若路径不存在则创建此路径 dir.mkdir(); } BufferedImage image = mxUtils.createBufferedImage(w, h, Color.WHITE); Graphics2D g2 = image.createGraphics(); mxUtils.setAntiAlias(g2, true, true); mxGraphicsCanvas2D gc2 = new mxGraphicsCanvas2D(g2); gc2.setAutoAntiAlias(true); try { parseXmlSax(imageXML, gc2); ImageIO.write(image, "png", png); } catch (Exception e) { e.printStackTrace(); } } /** * 创建并返回请求的图片 * * @param request * @return * @throws SAXException * @throws ParserConfigurationException * @throws IOException */ protected void parseXmlSax(String xml, mxICanvas2D canvas) { // Creates SAX handler for drawing to graphics handle mxSaxOutputHandler handler = new mxSaxOutputHandler(canvas); // Creates SAX parser for handler XMLReader reader; try { reader = SAXParserFactory.newInstance().newSAXParser() .getXMLReader(); reader.setContentHandler(handler); // Renders XML data into image reader.parse(new InputSource(new StringReader(xml))); } catch (Exception e) { e.printStackTrace(); } }
4.前台得到xml代码
注:这里的xml代码可不是mxgraph生成的那种可以直接读的代码呦!
var graph = designer.graph;//这里是你的js中所对应的graph var xmlDoc = mxUtils.createXmlDocument(); var root = xmlDoc.createElement('output'); xmlDoc.appendChild(root); var xmlCanvas = new mxXmlCanvas2D(root); var imgExport = new mxImageExport(); imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas); var bounds = graph.getGraphBounds(); var w = Math.round(bounds.x + bounds.width + 4); var h = Math.round(bounds.y + bounds.height + 4); var xml = mxUtils.getXml(root); xml = encodeURIComponent(xml);//这就是要提交到后台的xml代码
5.这样可以说就大功告成了,但是所导出的图片有两个bug:中文乱码和图片节点无法被绘制。解决大法:用附件中被我改良了的mxgraph包代替所有mxgraph的jar包即可。
6.要想知道我源码中都改了些什么,且听下回歪歪。
***********************格叽格叽***************************************
lysh,心是透明的,因为雨慢慢的停了……