将自定义形状添加到 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');

addVertex 方法：

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

参考

Answer 2

这是在自定义形状上设计的一个示例...

我在这里设计的自定义形状是STAR SHAPE。 --->下面的链接是形状的蓝图

---> 下面是代码

 mxUtils.extend(starShape, mxCylinder);
  function starShape() {
    mxShape.call(this);
    }
  starShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) {
    // scale holds the shape what we design through out graph
  const dy = this.scale ;
  const dx =  this.scale;
  path.moveTo(w / 2 , 0 );
  path.lineTo(w , h / 1.3); // lower triangle
  path.lineTo( 0 , h / 1.3);
  path.moveTo( w / 2 , h);
  path.lineTo( 0 , dy / 3 + h / 4.2 );  // upper triangle
  path.lineTo( w , dy / 3 + h / 4.2 );
    };
  mxCellRenderer.registerShape('starShape', starShape);

--->下面是添加颜色后我希望这些信息有帮助