Question

我正在尝试将自定义形状添加到MXGraph中的工具栏，就像工具栏的示例中所示。对于exapmle：这样的事情：

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

现在我自己的形状（在本例中为displayLabel）应该在网格中，如果你将它拖放到工具栏之外。但它始终只是＆＃34;默认＆＃34;形状可见。

我已经在形状示例中显示了我的Shape：mxCellRenderer.prototype.defaultShapes['displayLabel'] = mxDisplayLabel;

我也尝试了不同的方法在addVertex方法中调用它的样式但它不起作用。即使我尝试在＆＃34; Shape＆＃34;中显示的Boxshape。来自mxgraph的示例我只看到默认形状...

编辑：这是我现在尝试的：

    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：现在我能够注册我的自定义形状，但进一步我有一个问题，说：＆＃34; shape.initStyles（）＆＃34;如果我在网格中放置一个顶点，则不是函数。有谁知道，这是从哪里来的？

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

Reference

Answer 2

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

我在这里设计的自定义形状是STAR SHAPE。 ---> Below link is the blueprint of 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);

---> below is after adding color 希望这些信息对您有帮助

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

2 个答案: