mxGraph 拓扑图插件

最新推荐文章于 2020-11-25 08:46:00 发布

wolfies

最新推荐文章于 2020-11-25 08:46:00 发布

阅读量4.7k

点赞数

分类专栏：前端框架文章标签： javascript mxgraph

本文链接：https://blog.youkuaiyun.com/wolfies/article/details/78773148

版权

前端框架专栏收录该内容

2 篇文章

订阅专栏

mxGraph是一款用于JavaScript的开源绘图库，特别适合创建流程图。虽然中文教程稀缺，但通过官方文档、示例和API可以学习使用。它支持节点和连接的编辑、移动以及缩放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js绘图主键，画流程图的，以前应该是收费的，现在开源了。

断断续续接触了两个月，难在中文教程比较少，很多问题搜不到，大多都是翻官方例子找相关代码。

官方文档官方提供用例 API 组件常量

官方提供Hello World

<html>
    <head>
        <title>Hello, World! example for mxGraph</title>
        <script type="text/javascript">
            mxBasePath = '../src'; // 引入组件之前需要指定src位置
        </script>

        <script type="text/javascript" src="../src/js/mxClient.js"></script>

        <script type="text/javascript">
            // @param : container(容器对象)
            function main(container) {
                // 查看浏览器是否支持
                if(!mxClient.isBrowserSupported()) {
                    // 组件自己的提示框(组件提供很多弹窗，比较老)
                    mxUtils.error('Browser is not supported!', 200, false);
                } else {
                    // Disables the built-in context menu
                    mxEvent.disableContextMenu(container); // 具体干什么的不清楚，一直没用到，英文注释留着了

                    // 通过container容器，创建一个空的graph图模型
                    var graph = new mxGraph(container);

                    // Enables rubberband selection
                    new mxRubberband(graph); // 不清楚，没用到

                    // 默认父节点
                    var parent = graph.getDefaultParent();

                    // 开始添加
                    graph.getModel().beginUpdate(); // graph.getModel()表示模型
                    try {
                        // 添加节点方法
                        // @param (parent, id, value, x, y, width, height,style,relative)
                        var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                        var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                        // 添加连线方法
                        // @param (parent, id, value, source, target, style)
                        var e1 = graph.insertEdge(parent, null, '', v1, v2);
                    } finally {
                        // 结束添加
                        graph.getModel().endUpdate();
                    }
                }
            };
        </script>
    </head>

    <body onload="main(document.getElementById('graphContainer'))">
        <div id="graphContainer" style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
        </div>
    </body>

</html>

这个例子应该没什么东西，就是初始化一些设置然后画节点画连线。

个人习惯把 graph.getModel().beginUpdate() 上面的代码，也就是初始化的一些方法放在一个方法了。
剩下的代码，也就是真正画图的代码放在另一个方法里。

样式

// 节点样式
var style = new Object();
        style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
        style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
        style[mxConstants.STYLE_IMAGE] = imgPath + '/02.png'; // 图片
        style[mxConstants.STYLE_IMAGE_WIDTH] = '50';
        style[mxConstants.STYLE_IMAGE_HEIGHT] = '50';
        style[mxConstants.STYLE_FONTCOLOR] = '#000000';
        style[mxConstants.STYLE_FONTSIZE] = '15';// 字号
        style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; // 跟下一行配合，可以使文字在图表下方
        style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_BOTTOM;
        graph.getStylesheet().putCellStyle('styleName', style); // styleName就是样式的名字，在画节点或者连线的时候填进去

可编辑

// 移动 节点、连线 改变元素坐标

graph.setEnabled(true); // true/false

移动

// 整体移动，不改变节点连线的坐标，类似于改变观看位置。

// 鼠标拖拉，手机浏览器拖拉
graph.setPanning(true);

// 可能不支持部分包含web页面的控件

// 如果不支持添加下面这个
graph.panningHandler.useLeftButtonForPanning = false;
mxPanningHandler.prototype.isPanningTrigger = function(me) {
    var evt = me.getEvent();
    return true;
};

放大/缩小

graph.zoomIn();
graph.zoomOut();

事件

// 事件(单机、双击)可以去组件常量找，或者idea自动提示出来
graph.addListener(mxEvent.CLICK,function(sender, evt){

    // 获取当前点击的东西
    var cell = evt.getProperty('cell');

    // 当前元素id。在 insertVertex insertEdge 方法参数里面就提供了一个id
    var cellId = cell.id;

    // 注意: id不能重复，如果重复了组件会自动提供一个数字，这个数字可能导致跟下面的节点再次重复，一定要提供的id不重复。

    if(graph.getModel().isVertex(cell)){
        // 如果点击的是节点

    if(graph.getModel().isEdge(cell)){
        // 连线
    }
});