mxgraph使用文档

概述

mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javascript写的前端程序。

学习路径

API：http://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html
demo：http://jgraph.github.io/mxgraph/javascript/index.html

例子

liuchengtu.png

wall.png

安装

npm install mxgraph

引入

首先要声名一个全局变量 mxBasePath 指向一个路径，然后引入 mxGraph。mxBasePath 指向的路径作为 mxGraph 的静态资源路径。

import mx from 'mxgraph';
const mxgraph = mx({
    mxImageBasePath: './src/images',
    mxBasePath: './src'
});
export default mxgraph;

在使用的组件页面引入mxgraph

import mxgraph from '@/util/mxgraph'

使用解构的方式按照需求引入需要的模块

const { mxGraph, mxUtils, mxEvent } = mxgraph

检查浏览器

代码的第一部分是检查浏览器是否支持mxgraph，如果浏览器不支持就能在此显示错误信息。
对于主函数function main（）{}没有什么特殊的规定。function引用头部加载的文件，并且可以有任何名称包含任何参数。在这个例子中参数是body中的dom节点

<script type="text/javascript";>
function main(container)
{
  // Checks if the browser is supported
//检查浏览器是否支持
  if (!mxClient.isBrowserSupported())
  {
    // Displays an error message if the browser is not supported.
//如果浏览器不支持，则显示错误信息
    mxUtils.error('Browser is not supported!', 200, false);
  }

Container 容器

页面用一个dom节点将graph与javascript结合。它可以使用document.getElementById在body中取得或者直接动态创建（如createElement）。如果你想让容器中有滚动条，那么将容器样式的属性 overflow 设为auto。

let container = document.createElement("div");
      container.style.position = "absolute";
      container.style.overflow = "hidden";
      container.style.left = "0px";
      container.style.top = "0px";
      container.style.right = "0px";
      container.style.bottom = "0px";

Graph 图

代码创建了一个空的graph图模型并通过容器和空的模型来构建具体的图

var model = new mxGraphModel();
var graph = new mxGraph(container, model);

如果你希望graph图只读，可用 graph.setEnabed(false)
常用属性：

graph.setCellsEditable(true);//单元格是否可编辑
graph.setCellsResizable(false);//是否可调整大小
graph.setConnectable(false);//是否可以连接
graph.setCellsMovable(true);//是否可以移动
graph.setAutoSizeCells(true);//是否可以自动调节大小
graph.setPanning(true);//移动镜头  
graph.connectionHandler.setCreateTarget(true);//是否创建目标
graph.setAllowLoops(true);// 允许连线的目标和源是同一元素
graph.setVertexLabelsMovable(true);// 允许移动 Vertex 的 Label
mxGraphHandler.prototype.guidesEnabled = true;//显示细胞位置标尺  
/*禁用节点双击，防止改变数据 */  
graph.dblClick = function (evt, cell)
 {        
   var model = graph.getModel();   
        if (model.isVertex(cell)) 
{       
            return false;     
     }  }; 
 //重写方法不允许那条线(edge)可以编辑    
graph.isCellEditable = function(cell)  
{   
 return !this.getModel().isEdge(cell)&&!this.getModel().isVertex(cell);  
  };

Vertices （节点）and Edges（连线)

程序需要在beginUpdate和endUpdate中来插入节点和连线（更新图形）。endUpdate应放在finally-block中以确保endUpdate一直执行。但beginUpdate不能在try-block中，这样如果beginUpdate失败那么endupdate永远不会执行。块内的部分为图形创建节点和连线。默认的父节点是在用graph时无需参数自动创建在图中根节点的第一个子节点

//为插入节点获得默认的父节点。
 //这通常是根节点的第一个子节点
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
//在单独的一步中添加cell
model.beginUpdate();
try
{
  var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
  var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
  var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
  // Updates the display
//更新显示
  model.endUpdate();
}

Stylesheet 样式表

cell的样式由样式表（mxStylesheet的实例）来决定。样式表规定了样式名称到样式之间的映射关系。一个样式是一个键的数组。那些键对应所用cell的值。值在mxConstants中定义，可以是字符串和数字、javascript对象、函数等。修改节点和连线的默认样式

var vertexStyle = graph.getStylesheet().getDefaultVertexStyle();
vertexStyle[mxConstants.ROUNDED] = true;
var edgeStyle = graph.getStylesheet().getDefaultEdgeStyle();
edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;

Styles 样式

cell的样式在属性style中（cell.style）。样式是cell状态的一部分，它可以通mxGraphModel.setStyle来改变。style是form[stylename;|key=value;]中的一段字符串。默认样式可覆盖此cell的制定键值。例如：你用 rounded 样式，它可以覆盖 stroke和fillColor

单个样式

1.字体相关

fontColor # 颜色
fontSize # 字体大小
fontFamily # 字体库
fontStyle # 字体样式
textDirection # 文本书写方向
align # 水平对齐
verticalAlign # 垂直对齐

2.标签相关

labelWidth # 宽
labelPosition # 水平位置
verticalLabelPosition # 垂直位置
noLabel # 不显示标签
labelBackgroundColor # 背景颜色
labelBorderColor # 边框颜色
labelPadding # 标签文字和边框之间的距离
spacing # 标签与顶点的间距
spacingLet # 标签与顶点的左间距
spacingBottom # 标签与顶点的下间距
spacingRight # 标签与顶点的右间距
spacingTop # 标签与顶点的上间距

3.顶点相关

fillColor # 填充颜色
strokeColor # 描边颜色
strokeWidth # 描边线宽
dashed # 虚线边
dashPattern # 虚线点大小和间距
rounded # 圆角
arcSize # 圆角大小
glass # 玻璃按钮

4.边相关

perimeterSpacing # 周边间距的关键点
sourcePerimeterSpacing # 边与源关键点周边间距
targetPerimeterSpacing # 边与目标关键点周边间距

例:

var v1 = graph.insertVertex(parent, null, 'Hello',  20, 20, 80, 30, 'rounded;strokeColor=red;fillColor=green');

全局设置

1.设置vertex的style

var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_OPACITY] = '80';
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_FONTSTYLE] = 0;
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
graph.getStylesheet().putDefaultVertexStyle(style);

2.设置edge的style

style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
style[mxConstants.STYLE_STROKEWIDTH] = '2';
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.SegmentConnector;

3.设置cell的 style

style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_FILLCOLOR] = '#FF9103';
style[mxConstants.STYLE_GRADIENTCOLOR] = '#F8C48B';
style[mxConstants.STYLE_STROKECOLOR] = '#E86A00';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_OPACITY] = '80';
style[mxConstants.STYLE_STARTSIZE] = '30';
style[mxConstants.STYLE_FONTSIZE] = '16';
style[mxConstants.STYLE_FONTSTYLE] = 1;
graph.getStylesheet().putCellStyle('group', style);

属性选项值

mxgraph 提供的图形

SHAPE_RECTANGLE: 'rectangle'
SHAPE_ELLIPSE: 'ellipse'
SHAPE_DOUBLE_ELLIPSE: 'doubleEllipse'
SHAPE_RHOMBUS: 'rhombus'
SHAPE_LINE: 'line'
SHAPE_IMAGE: 'image'
SHAPE_ARROW: 'arrow'
SHAPE_ARROW_CONNECTOR: 'arrowConnector'
SHAPE_LABEL: 'label'
SHAPE_CYLINDER: 'cylinder'
SHAPE_SWIMLINE: 'swimlane'
SHAPE_CONNECTOR: 'connector'
SHAPE_ACTOR: 'actor'
SHAPE_CLOUD: 'cloud'
SHAPE_TRIANGLE: 'triangle'
SHAPE_HEXAGON: 'hexagon'

image.png

线连接样式

EDGESTYLE_ELBOW: 'elbowEdgeStyle'
EDGESTYLE_ENTITY_RELATION: 'entityRelationEdgeStyle'
EDGESTYLE_LOOP: 'loopEdgeStyle'
EDGESTYLE_SIDETOSIDE: 'sideToSideEdgeStyle'
EDGESTYLE_TOPTOBOTTOM: 'topToBottomEdgeStyle'
EDGESTYLE_ORTHOGONAL: 'orthogonalEdgeStyle'
EDGESTYLE_SEGMENT: 'segmentEdgeStyle'

// elbowEdgeStyle 方向属性
STYLE_ELBOW: 'elbow'
ELBOW_VERTICAL: 'vertical'
ELBOW_HORIZONTAL: 'horizontal'

边箭头样式

ARROW_CLASSIC: 'classic'
ARROW_CLASSIC_THIN: 'classicThin'
ARROW_BLOCK: 'block'
ARROW_BLOCK_THIN: 'blockThin'
ARROW_OPEN: 'open'
ARROW_OPEN_THIN: 'openThin'
ARROW_OVAL: 'oval'
ARROW_DIMAND: 'diamond'
ARROW_DIMAND_THIN: 'diamondThin'

文字样式

涉及 STYLE_FONTSTYLE

FONT_BOLD: 1
FONT_ITALIC: 2
FONT_UNDERLINE: 4

文本对齐

涉及 STYLE_ALIGN、STYLE_VERTICAL_ALIGN、STYLE_LABEL_ALIGN、STYLE_VERTICAL_LABEL_ALIGN

ALIGN_LET: 'left'
ALITGN_CENTER: 'center'
ALIGN_RIGHT: 'right'
ALIGN_TOP: 'top'
ALIGN_MIDDLE: 'middle'
ALIGN_BOTTOM: 'bottom'

文本书写方向

涉及 STYLE_TEXT_DIRECTION

TEXT_DIRECTION_AUTO: 'auto'
TEXT_DIRECTION_LTR: 'ltr'
TEXT_DIRECTION_RTL: 'rtl'

图形的方向

涉及 STYLE_DIRECTION

DIRECTION_NORTH : 'north'
DIRECTION_SOUTH: 'south'
DIRECTION_EAST: 'east'
DIRECTION_WEST: 'west'

周长相关

涉及 STYLE_PERIMETER

PERIMETER_ELLIPSE: 'ellipsePerimeter'
PERIMETER_RECTANGLE: 'rectangelPerimeter'
PERIMETER_RHOMBUS: 'rhombusPerimeter'
PERIMETER_HEXAGON: 'hexagonPerimeter'
PERIMETER_TRIANGLE: 'trianglePerimater'

拓展

还可以自定图形，替换原有的图形或者形状

let style = this.getPrefix(type) + "labelPosition=right";
            const v = graph.insertVertex(
              parent,
              null,
              current,
              1,
              0,
              60,
              60,
              style
            );
 getPrefix(type) {
      let prefix;
      if (type === "xxx") {
        prefix = "shape=image;image=/img/icons/firewall.svg;";
      }
      return prefix;
    }

最后编辑于：2021.09.30 17:37:19

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,242评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,769评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,484评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,133评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,007评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,080评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,496评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,190评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,464评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,549评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,330评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,205评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,567评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,889评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,160评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,475评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,650评论 2赞 335