在Mxgrapg自定义图标中，如何为自定义图标添加标题？

Question

使用Mxgraph，我正在创建一个仅具有“自定义”图标的工具。

我需要在工具箱中的自定义图标下添加名称，并且在图标拖放时名称也应位于容器中图标的下方。
这是您可以参考的以下代码

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        mxBasePath = 'src';
    </script>
    <script type="text/javascript" src="src/js/mxClient.js"></script>

    <script type="text/javascript">
    function main()
        {

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

                container = document.getElementById('container');

                if (mxClient.IS_QUIRKS)
                {
                    document.body.style.overflow = 'hidden';
                    new mxDivResizer(tbContainer);
                    new mxDivResizer(container);
                }
                var model = new mxGraphModel();
                var graph = new mxGraph(container, model);
                graph.dropEnabled = true;

                var parent = graph.getDefaultParent();
            var style = new Object();
            style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
            style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
            style[mxConstants.STYLE_IMAGE] = 'images/svg/start.svg';
            style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';
            graph.getStylesheet().putCellStyle('imagestart', style);

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

                    if (!graph.isValidDropTarget(cell))
                    {
                        cell = null;
                    }                       
                    return cell;
                };
                graph.setConnectable(true);
                graph.setMultigraph(false);

                var keyHandler = new mxKeyHandler(graph);
                var rubberband = new mxRubberband(graph);

                var addVertex = function(icon, w, h, style)
                {
                    var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
                    vertex.setVertex(true);
                    //vertex.setText("Icon name");
                    addToolbarItem(graph, toolbar, vertex, icon);
                };
                toolbar.addLine();
                addVertex('images/rectangle.gif', 100, 40, '');             
                addVertex('images/sample.png', 50, 50, 'imagestart');               
                toolbar.addLine();
        }

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

        }
    </script>
</head>
<body onload="main()">
 <div id="container" style="position:absolute;overflow:hidden;left:0px;top:26px;right:150px;bottom:0px;background:url('src/images/grid.gif');"></div>
<div id="tbContainer" style="position:absolute; overflow:hidden;padding:2px; left:1400px;top:26px; width:24px; bottom:0px;">
</div>
</body>
</html>

在这里，我添加了红色标记的图像。 我需要在该位置添加文本。

vertex.setText("Icon name");

帮我弄清楚这个问题

Answer 1

我找到了解决方案。 这对其他一些人可能很有用。

非常简单。

在addToolbarItem时，我们只需要指定工具图标的名称即可

var img = toolbar.addMode("Start", image, funct);

在拖放时，我们需要像下面那样传递文本

var vertex = new mxCell("start", new mxGeometry(0, 0, w, h), style);

为了给文本提供样式，您可以添加如下样式

style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = 'top';
                     style[mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';
                     style[mxConstants.STYLE_FONTSIZE] = '18';
                     //style[mxConstants.STYLE_FONTSTYLE] = 1;
                     style[mxConstants.STYLE_FONTCOLOR] = '#333';
                     style[mxConstants.STYLE_FONTFAMILY] = 'Lato-Regular';
                     style['fontWeight'] = 'regular';
            graph.getStylesheet().putCellStyle('imagestart', style);

花了几个小时，我得到了这个解决方案。 如果我做错了，请纠正我

在Mxgrapg自定义图标中，如何为自定义图标添加标题？

问题描述

1 个解决方案

解决方案1
0 2018-03-26 04:56:14

在Mxgrapg自定义图标中，如何为自定义图标添加标题？

问题描述

1 个解决方案

解决方案1 0 2018-03-26 04:56:14

解决方案1
0 2018-03-26 04:56:14