1、写在前端:任何情况下,保存图片不可能只通过前台代码就能实现,因此,要保存前台绘制的graph图,我们需要用到mxgraph中的java包啦~
2、参考实例:
mxgraph\java\test\com\mxgraph\test\mxImageExportTest.java
这个例子就是将xml文档生成图片的。
3、改良的例子:
4.前台得到xml代码
注:这里的xml代码可不是mxgraph生成的那种可以直接读的代码呦!
5.这样可以说就大功告成了,但是所导出的图片有两个bug:中文乱码和图片节点无法被绘制。解决大法:用附件中被我改良了的mxgraph包代替所有mxgraph的jar包即可。
6.要想知道我源码中都改了些什么,且听下回歪歪。
***********************格叽格叽***************************************
lysh,心是透明的,因为雨慢慢的停了……
[list]
[*][url=http://dl.iteye.com/topics/download/dc70d8db-cb74-30ae-82a7-85b1e3c6a07d]mxgraph-core2.jar[/url] (847.2 KB)
[*]下载次数: 7
[/list]
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,心是透明的,因为雨慢慢的停了……
[list]
[*][url=http://dl.iteye.com/topics/download/dc70d8db-cb74-30ae-82a7-85b1e3c6a07d]mxgraph-core2.jar[/url] (847.2 KB)
[*]下载次数: 7
[/list]