在 Mxgraph 自定义图标中，如何为自定义图标添加标题？答案

【问题标题】：In Mxgrapg custom icon how can I add title for custom Icons?在 Mxgraph 自定义图标中，如何为自定义图标添加标题？
【发布时间】：2018-03-19 04:59:04
【问题描述】：

使用 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");

帮我解决这个问题

【问题讨论】：

标签： javascript html mxgraph

【解决方案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);

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

【讨论】：

不确定我是否理解您的解决方案。var img 中的图像来自哪里。 image 也是图像的字符串路径吗？
如何在工具栏图标下添加文字？