Question

我正在尝试将mxGraph导出到PNG图像。图形顶点标签文本包含html格式。在导出的图像中，仅显示html标签，而不显示格式化文本。

这是将javascript作为客户端，将C＃作为后端

// Setting HTML Label to true

mxGraph.prototype.isHtmlLabel = function(cell)
{
    return true;
}

graph.convertValueToString = function(cell)
{
    if (mxUtils.isNode(cell.value))
    {
        var labelVal = cell.getAttribute('label', '');

        if (labelVal != null)
        {
            return labelVal;
        }

        return '';
    }

    return '';
};

var tmpElem = doc.createElement("testnode");
// Setting label text as HTML formatted content
tmpElem.setAttribute('label', '<div class="roottitle">Label Text</div>');
graphItm = graph.insertVertex(parent, null, tmpElem, 0, 0, 100, 30);

var ExportGraphToImage = function()
{
    exportFile("png");
}

function exportFile(format) {
    var bg = '#ffffff';
    var scale = 1;
    var b = 1;
    var imgExport = new mxImageExport();
    var bounds = graph.getGraphBounds();
    var vs = graph.view.scale;
    // New image export
    var xmlDoc = mxUtils.createXmlDocument();
    var root = xmlDoc.createElement('output');
    xmlDoc.appendChild(root);
    // Renders graph. Offset will be multiplied with state's scale when painting state.
    var xmlCanvas = new mxXmlCanvas2D(root);
    xmlCanvas.translate(Math.floor((b / scale - bounds.x) / vs), Math.floor((b / scale - bounds.y) / vs));
    xmlCanvas.scale(scale / vs);
    imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);
    // Puts request data together
    var w = Math.ceil(bounds.width * scale / vs + 2 * b);
    var h = Math.ceil(bounds.height * scale / vs + 2 * b);
    var xml = mxUtils.getXml(root);
    if (bg != null) {
        bg = '&bg=' + bg;
    }
    new mxXmlRequest('../mxGraph/Export.ashx', 'filename=export.' + format + '&format=' + format +
        bg + '&w=' + w + '&h=' + h + '&xml=' + encodeURIComponent(xml)).
        simulate(document, '_blank');
}

导出的图像中应使用格式化的顶点标签。而是显示具有实际HTML内容的标签

从mxGraph导出为PNG图像

0 个答案: