如何为MxGraph自定义图标添加标题？含工具箱及拖放场景需求

我来帮你搞定这个需求——不管是工具箱里的自定义图标，还是拖到画布后的图形，都能在下方显示名称。下面分步骤给你讲具体实现方式，附完整代码示例：

一、给工具箱的自定义图标添加下方名称 #

默认的mxToolbarItem只支持显示图片，咱们可以自定义HTML元素来组合图标和文字，再把它绑定到工具栏的拖放功能上：

• 创建包含图标和文字的自定义DOM元素，用一个div包裹图片和span标签，设置样式让文字在图标下方居中
• 把这个DOM元素添加到工具栏，然后通过mxUtils.makeDraggable给它绑定拖放事件，指定拖放后要创建的图形

二、拖放后让图标下方显示名称 #

当图标拖到画布时，咱们需要创建一个组合图形（mxGroup），里面包含图标形状和文本形状，这样两者会作为一个整体移动：

• 定义拖放回调函数，在函数里创建mxImageShape（图标）和mxText（名称）
• 计算文本的位置，让它在图标正下方居中
• 把两个形状加入mxGroup，再把组添加到画布

完整代码示例 #

<!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() {
            // 检查浏览器兼容性
            if (!mxClient.isBrowserSupported()) {
                mxUtils.error('浏览器不支持', 200, false);
                return;
            }

            // 创建画布容器
            var container = document.createElement('div');
            container.style.position = 'absolute';
            container.style.overflow = 'hidden';
            container.style.width = '800px';
            container.style.height = '600px';
            container.style.left = '10px';
            container.style.top = '10px';
            container.style.border = '1px solid gray';
            document.body.appendChild(container);

            // 创建工具栏容器
            var toolbarContainer = document.createElement('div');
            toolbarContainer.style.position = 'absolute';
            toolbarContainer.style.overflow = 'hidden';
            toolbarContainer.style.width = '120px';
            toolbarContainer.style.height = '600px';
            toolbarContainer.style.left = '820px';
            toolbarContainer.style.top = '10px';
            toolbarContainer.style.border = '1px solid gray';
            toolbarContainer.style.padding = '10px';
            document.body.appendChild(toolbarContainer);

            // 初始化图形实例
            var graph = new mxGraph(container);
            graph.setConnectable(false); // 暂时关闭连线功能，按需开启
            graph.setCellsEditable(false); // 禁止直接编辑文本，按需调整

            // 初始化工具栏
            var toolbar = new mxToolbar(toolbarContainer);
            toolbar.enabled = true;

            // 自定义带名称的工具栏项
            function addToolbarItem(iconUrl, label, width, height) {
                // 创建图标+文字的容器
                var itemContainer = document.createElement('div');
                itemContainer.style.width = '80px';
                itemContainer.style.textAlign = 'center';
                itemContainer.style.marginBottom = '15px';
                itemContainer.style.cursor = 'pointer';

                // 添加图标
                var img = document.createElement('img');
                img.src = iconUrl;
                img.style.width = width + 'px';
                img.style.height = height + 'px';
                img.style.display = 'block';
                img.style.margin = '0 auto 5px';
                itemContainer.appendChild(img);

                // 添加名称
                var labelSpan = document.createElement('span');
                labelSpan.textContent = label;
                labelSpan.style.fontSize = '12px';
                itemContainer.appendChild(labelSpan);

                // 加入工具栏
                toolbar.container.appendChild(itemContainer);

                // 绑定拖放事件
                mxUtils.makeDraggable(itemContainer, graph, function(graph, evt, x, y) {
                    return createCustomShape(graph, x, y, iconUrl, label, width, height);
                });
            }

            // 创建带名称的组合图形
            function createCustomShape(graph, x, y, iconUrl, label, width, height) {
                var parent = graph.getDefaultParent();
                var model = graph.getModel();

                model.beginUpdate();
                try {
                    // 创建图标形状
                    var iconBounds = new mxRectangle(x, y, width, height);
                    var icon = new mxImageShape(iconBounds, iconUrl);
                    icon = graph.addCell(icon, parent);

                    // 创建文本形状，位置在图标正下方
                    var textBounds = new mxRectangle(x, y + height + 5, width, 20);
                    var text = new mxText(label, textBounds);
                    text.setHorizontalAlign(mxConstants.ALIGN_CENTER);
                    text.setVerticalAlign(mxConstants.ALIGN_MIDDLE);
                    text = graph.addCell(text, parent);

                    // 创建组合，让图标和文本作为整体移动
                    var group = new mxGroup([icon, text]);
                    graph.addCell(group, parent);
                } finally {
                    model.endUpdate();
                }

                return group;
            }

            // 添加自定义工具栏项（替换成你的图标路径和名称）
            addToolbarItem('icons/custom-icon1.png', '设备A', 60, 60);
            addToolbarItem('icons/custom-icon2.png', '设备B', 60, 60);
        }
    </script>
</head>
<body onload="main();">
</body>
</html>

关键细节说明 #

• 工具栏自定义项：通过手动创建HTML元素组合图标和文字，避开了默认mxToolbarItem只能显示图片的限制，样式可以根据你的需求自由调整
• 组合图形（mxGroup）：将图标和文本加入组后，拖动时两者会同步移动，保证布局一致性
• 文本位置计算：文本的Y坐标设置为图标Y坐标 + 图标高度 + 间距，确保在图标下方，同时设置水平居中让文字对齐图标
• 可扩展性：如果需要修改样式（比如字体、间距、图标大小），直接调整对应的CSS属性或参数即可

内容的提问来源于stack exchange，提问作者user1187