Как легко добавить сложную форму в MxGraph?

Я знаю, что могу добавлять фигуры в 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
person Dinal24    schedule 17.01.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Конвертер есть, но он довольно ограниченный и нет документации/поддержки:

https://github.com/jgraph/svg2xml

Все три вышеперечисленных трафарета созданы на JS. Некоторые наиболее наглядные части были переписаны на JS, а ссылки были в SVG. И нет, инструмента SVG 2 JS не существует.

person Mate E.    schedule 18.01.2018

arrow_upward
0
arrow_downward

Самый простой способ добиться использования SVG в качестве источника формы — преобразовать SVG в трафареты mxGraph или код Javascript. Это хорошо интегрируется с mxGraph, но поскольку есть шаг преобразования, есть недостатки: вам нужно повторно преобразовать SVG, когда он изменяется, чтобы отразить изменения в рисовании mxGraph.

Существуют альтернативы, как описано в ответе svg-shapes-instead-of-stencils, но вам придется написать собственный код.

Инструмент для преобразования вы можете посмотреть на странице mxgraph-svg2shape, которая предоставляет инструмент для напрямую конвертировать SVG в код JS. Он основан на инструменте svg2xml, упомянутом в других ответах.

Он генерирует код, который можно напрямую вставить в пользовательскую фигуру. 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();
person redfish4ktc    schedule 18.09.2020