使用mxEditor繪制的圖形不能直接拷貝到word等格式的文檔中辩棒，我們需要把圖形導(dǎo)出為png格式等的位圖贞绳，這需要后臺的支持。具體的做法是操骡，在后臺使用.Net或者Java創(chuàng)建導(dǎo)出的服務(wù)九火，在前臺將需要導(dǎo)出的圖形轉(zhuǎn)換為xml數(shù)據(jù)，發(fā)送到后臺服務(wù)進(jìn)行轉(zhuǎn)換工作册招。mxGraph提供了.Net和Java版本的后臺代碼岔激，這里以.net為例進(jìn)行說明。

從github下載或者克隆mxGraph后是掰，可以看到在根目錄有mxgraph-dotnet.sln文件：

圖片.png

使用Visual Studio 打開這個(gè)工程虑鼎，里面包括了mxgraph-dotnet庫和示例代碼，我們在這個(gè)工程中創(chuàng)建一個(gè)控制臺程序键痛，這個(gè)程序?qū)xgraph導(dǎo)出的xml轉(zhuǎn)換為png炫彩，代碼如下：

namespace mxgraphconvert
{
    class Program
    {
        static void Main(string[] args)
        {
            var xmlfile = args[0];
            var expfile = xmlfile + ".png";
            if (args.Length > 1)
            {
                expfile = args[1];
            }
            XmlTextReader xmlReader = new XmlTextReader(new StringReader(mxUtils.ReadFile(xmlfile)));
            Image image = mxUtils.CreateImage(800, 800, Color.White);
            Graphics g = Graphics.FromImage(image);
            g.SmoothingMode = SmoothingMode.HighQuality;
            mxSaxOutputHandler handler = new mxSaxOutputHandler(new mxGdiCanvas2D(g));
            handler.Read(xmlReader);

            image.Save(expfile, System.Drawing.Imaging.ImageFormat.Png);
        }
    }
}

代碼非常簡單兼耀。這里需要注意的是体谒，輸入的xml是經(jīng)過處理的，相關(guān)的js代碼如下：

zlEditor.prototype.exportXml=function(){
    var xmlDoc = mxUtils.createXmlDocument();
    var root = xmlDoc.createElement('output');
    xmlDoc.appendChild(root);

    var xmlCanvas = new mxXmlCanvas2D(root);
    var imgExport = new mxImageExport();
    var graph=this.graph;
    imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);

    var bounds = graph.getGraphBounds();
    var w = Math.ceil(bounds.x + bounds.width);
    var h = Math.ceil(bounds.y + bounds.height);

    var xml = mxUtils.getXml(root);
    return xml;
}

需要通過使用mxImageExport將graph的模型轉(zhuǎn)換為后臺可以處理的xml數(shù)據(jù)读规。