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,心是透明的,因为雨慢慢的停了……
分享到:
相关推荐
前段实现mxgraph插件绘制流程图,后台实现保存的xml导出成图片格式,遇到图标没有引用,文字label位置不正确,label换行不识别 标签,linux服务器部署中文字体等问题
MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..
最新mxgraph版本 mxgraph js API和demo
mxgraph开发包
mxgraph.js中文文档是一个官方的api,翻译来源于sunflower(github: https://github.com/SunInfoFE),提供给更多的开发者参考和共享源码资源!
mxgraph 右键 toolbar工具条
这是mxGraphModel的逻辑图。mxGraph中的一种存储图的模型,或者数据结构。
资源:mxGraph;包含ie,Firefox两个版本;版本号都是1.4.0.0;只带了一个Hello World的示例,其他的例子请自己去官网找吧
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javescript写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。以下...
mxgraph 3.1.2.1 eval
mxgraph的学习笔记,基于开源技术,非常不错哦
mxGraph开发入门指南
本资源是由本人结合mxgraph Demo开发的中文菜单简易版Demo,适合想了解或学习mxgraph的小伙伴。为初学者打开第一扇门。(附件为java项目直接导入即可使用)
经典的mxGraph 1.4.0.0版,破解版本
mxGraph压缩包,包含mxGraph2.4和mxGraph1.10的文档。虽然文档是1.10的,但是对mxGraph2.4依旧可用。
mxGraph个人技术实现介绍、源码及其效果图
mxgraph10+教程
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javascript写的前端程序,也包括多个和后端程序(java/C#等)集成的例子。以下是...
正在做项目,其中就需要用mxGraph,整理了一些资料