如何轻松地将复杂形状添加到 MxGraph？答案

【问题标题】：How to add a complex shape easily to MxGraph?如何轻松地将复杂形状添加到 MxGraph？
【发布时间】：2018-01-17 15:10:05
【问题描述】：

我知道我可以通过使用以下模板绘制形状来向 MxGraph 添加形状：

<shape name="or" aspect="variable">
    <background>
        <path>
            <move x="0" y="0"/>
            <quad x1="100" y1="0" x2="100" y2="50"/>
            <quad x1="100" y1="100" x2="0" y2="100"/>
            <close/>
        </path>
    </background>
    <foreground>
        <fillstroke/>
    </foreground>
</shape>

或用 JavaScript 绘制为：

BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
    var dy = this.extrude * this.scale;
    var dx = this.extrude * this.scale;

    path.moveTo(0, dy);
    path.lineTo(w - dx, dy);
    path.lineTo(w, 0);
    path.moveTo(w - dx, dy);
    path.lineTo(w - dx, h);
};

我觉得这两个选项太原始而无法创建复杂的形状。 Draw.io 使用像下面这样的花哨的图形，我觉得用下面的代码来绘制它们会有点矫枉过正，有人可能会使用一些转换器直接从 SVG 中做到这一点。

我检查了那些是绘图（渲染为 SVG）的元素，而不是可以轻松放在 MxGraph 中的顶点顶部的普通图像

是否有任何简单的方法来创建自定义对象而无需手动编写代码，如下所示？

【问题讨论】：

标签： javascript svg mxgraph

【解决方案1】：

有一个转换器，但它相当有限，并且没有文档/支持：

https://github.com/jgraph/svg2xml

以上三个模板都是在 JS 中创建的。一些更直观的部分是用 JS 重写的，并且参考是在 SVG 中。不，没有 SVG 2 JS 工具。

【讨论】：

【解决方案2】：

使用 SVG 作为形状源的最简单方法是将 SVG 转换为 mxGraph 模板或 Javascript 代码。这与 mxGraph 集成得很好，但由于存在转换步骤，因此存在缺点：当 SVG 发生变化时，您必须重新转换它以反映对 mxGraph 绘图的更改。

如svg-shapes-instead-of-stencils answer 中所述，存在替代方案，但您必须编写自定义代码。

关于转换工具，你可以看看mxgraph-svg2shape，它提供了一个直接将SVG转换为JS代码的工具。它基于其他答案中提到的svg2xml 工具。

它生成的代码可以直接插入到 custom Shape redrawPath 、 paintForeground 或 paintBackground 函数中。

// foreground
canvas.begin();
canvas.moveTo(19.87, 0);
canvas.curveTo(11.98, 0, 5.55, 6.42, 5.55, 14.32);
canvas.lineTo(5.55, 18.4);

canvas.close();
canvas.fillAndStroke();

【讨论】：