如何轻松地向MxGraph添加复杂形状？

Question

我知道我可以通过用以下模板绘制它们来为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中顶点顶部的普通图像

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

Answer 1

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

https://github.com/jgraph/svg2xml

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

Answer 2

使用SVG作为形状来源的最简单方法是将SVG转换为mxGraph模具或Javascript代码。 这与mxGraph很好地集成在一起，但是由于存在转换步骤，因此存在缺点：当SVG发生更改时，必须重新转换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();