如何向 mxgraph 添加自定义形状

Question

如何添加 mxgraph 自定义形状？

形状如图

bpm shapes

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

//整理形状

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);

如何向 mxgraph 添加自定义形状

how can I add custom shapes to mxgraph

javascript

mxgraph