как я могу добавить пользовательские фигуры в mxgraph

Question

Как добавить пользовательские фигуры mxgraph?

Фигуры в виде изображения

bpm

Answer 1

Вы можете добавить новые фигуры, создав новую палитру боковой панели или добавив пользовательские фигуры к существующей

Вот пример:

Допустим, вы хотите добавить новые фигуры в палитру Basic , перейдите в Sidebar.js и найдите функцию Sidebar.prototype.addBasicPalette, здесь вы можете добавить любую фигуру, какую хотите :

/**
 * Adds the general palette to the sidebar.
 */
Sidebar.prototype.addBasicPalette = function(dir)
{
    this.addStencilPalette('basic', mxResources.get('basic'), dir + '/basic.xml',
        ';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2',
        null, null, null, null, [
            this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;top=0;bottom=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
            this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;right=0;top=0;bottom=0;fillColor=none;routingCenterX=-0.5;', 120, 60, '', 'Partial Rectangle'),
            this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;bottom=0;right=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
            this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;top=0;left=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
            this.createEdgeTemplateEntry('html=1;verticalAlign=bottom;endArrow=block;', 80, 0, 'is_a', 'Is_A', null, 'uml sequence message call invoke dispatch'),
           // on the line above i created a new arrow with 'is_a' on the top

    ]);
};

Answer 2

// CollateShape

function CollateShape()
{
    mxEllipse.call(this);
};
mxUtils.extend(CollateShape, mxEllipse);
CollateShape.prototype.paintVertexShape = function(c, x, y, w, h)
{
    c.begin();
    c.moveTo(x, y);
    c.lineTo(x + w, y);
    c.lineTo(x + w / 2, y + h / 2);
    c.close();
    c.fillAndStroke();

    c.begin();
    c.moveTo(x, y + h);
    c.lineTo(x + w, y + h);
    c.lineTo(x + w / 2, y + h / 2);
    c.close();
    c.fillAndStroke();
};

mxCellRenderer.registerShape('collate', CollateShape);