javascript - 将自定义形状添加到 MXGraph 工具栏

Question

我正在尝试将自定义形状添加到 MXGraph 中的工具栏，就像工具栏示例中所示。例如:像这样的东西:

addVertex('assets/displayResources/images/labelIcon.png', 60, 30, 'shape=displayLabel');

现在，如果您将我自己的形状(在本例中为 displayLabel)拖放到工具栏之外，它应该位于网格中。但始终只有“默认”形状可见。

我已经注册了我的形状，如形状示例所示:mxCellRenderer.prototype.defaultShapes['displayLabel'] = mxDisplayLabel;

我也尝试了不同的方法在 addVertex 方法中调用它的样式，但它不起作用。即使我尝试使用 mxgraph 的“形状”示例中显示的 Boxshape，我也只能看到默认形状...

编辑:这是我目前尝试的:

    function BoxShape()
{
    mxCylinder.call(this);
};
mxUtils.extend(BoxShape, mxCylinder);
BoxShape.prototype.extrude = 10;
BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
    var dy = this.extrude * this.scale;
    var dx = this.extrude * this.scale;
    if (isForeground)
    {
        path.moveTo(0, dy);
        path.lineTo(w - dx, dy);
        path.lineTo(w, 0);
        path.moveTo(w - dx, dy);
        path.lineTo(w - dx, h);
    }
    else
    {
        path.moveTo(0, dy);
        path.lineTo(dx, 0);
        path.lineTo(w, 0);
        path.lineTo(w, h - dy);
        path.lineTo(w - dx, h);
        path.lineTo(0, h);
        path.lineTo(0, dy);
        path.lineTo(dx, 0);
        path.close();
    }
};
mxCellRenderer.registerShape('box', BoxShape);

function creatingDisplayCreator(){
    if (!mxClient.isBrowserSupported()) {
            mxUtils.error('Browser is not supported!', 200, false);
    }else {
    var container = document.getElementById("graphContainer");

        mxEvent.disableContextMenu(container);

        var model = new mxGraphModel();
        graph = new mxGraph(container, model);

        mxGraphHandler.prototype.scrollOnMove = false;

        graph.dropEnabled = true;
        var parent = graph.getDefaultParent();

        var tbContainer = document.getElementById("tbContainer");

        var toolbar = new mxToolbar(tbContainer);
        toolbar.enabled = false;

        mxDragSource.prototype.getDropTarget = function (graph, x, y) {
            var cell = graph.getCellAt(x, y);

            if (!graph.isValidDropTarget(cell)) {
                 cell = null;
            }

            return cell;
        };
         var addVertex = function (icon, w, h, style) {
            var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
            vertex.setVertex(true);
            vertex.setConnectable(false);

            if(style=='shape=displayLabel'){
                vertex.value = 'label';
                graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'transparent', [vertex]);
                graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, 'transparent', [vertex]);
                graph.setCellStyles(mxConstants.STYLE_FONTSIZE, 15, [vertex]);
            }
};
            addToolbarItem(graph, toolbar, vertex, icon);
        };
        addVertex('a.png', 60, 30, 'shape=box');
        function addToolbarItem(graph, toolbar, prototype, image) {
        var funct = function (graph, evt, cell) {
        graph.stopEditing(false);

        var pt = graph.getPointForEvent(evt);
        var vertex = graph.getModel().cloneCell(prototype);

        vertex.geometry.x = pt.x;
        vertex.geometry.y = pt.y;

        graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
    }

    var img = toolbar.addMode(null, image, funct);
    mxUtils.makeDraggable(img, graph, funct);
};

编辑 2:现在我能够注册我的自定义形状，但我进一步遇到一个问题:如果我在网格中放置一个顶点，“shape.initStyles()”不是一个函数。谁知道，这是从哪里来的？

Answer 1

这是解决方案。

像这样定义形状

function BoxShape()
{
    mxCylinder.call(this);
};
mxUtils.extend(BoxShape, mxCylinder);
BoxShape.prototype.extrude = 10;
BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
    var dy = this.extrude * this.scale;
    var dx = this.extrude * this.scale;
    if (isForeground)
    {
        path.moveTo(0, dy);
        path.lineTo(w - dx, dy);
        path.lineTo(w, 0);
        path.moveTo(w - dx, dy);
        path.lineTo(w - dx, h);
    }
    else
    {
        path.moveTo(0, dy);
        path.lineTo(dx, 0);
        path.lineTo(w, 0);
        path.lineTo(w, h - dy);
        path.lineTo(w - dx, h);
        path.lineTo(0, h);
        path.lineTo(0, dy);
        path.lineTo(dx, 0);
        path.close();
    }
};
mxCellRenderer.registerShape('box', BoxShape);

然后像这样给工具栏添加形状

addVertex('a.png', 320, 100, 'shape=box');

添加顶点方法:

var addVertex = function(icon, w, h, style)
{
    var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
    vertex.setVertex(true);

    var funct = function(graph, evt, cell)
    {
        graph.stopEditing(false);
        var pt = graph.getPointForEvent(evt);
        var vertex = graph.getModel().cloneCell(prototype);
        vertex.geometry.x = pt.x;
        vertex.geometry.y = pt.y;       
        graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
    }

    // Creates the image which is used as the drag icon (preview)
    var img = toolbar.addMode(null, image, funct);
    mxUtils.makeDraggable(img, graph, funct);
};

Reference