当前位置: 代码迷 >> Web前端 >> mxgraph之封存图片
  详细解决方案

mxgraph之封存图片

热度:399   发布时间:2012-09-01 09:33:03.0
mxgraph之保存图片
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,心是透明的,因为雨慢慢的停了……
  相关解决方案