概述

mxGraph是一個(gè)JS繪圖組件適用于需要在網(wǎng)頁(yè)中設(shè)計(jì)/編輯Workflow/BPM流程圖、圖表、網(wǎng)絡(luò)圖和普通圖形的Web應(yīng)用程序。mxgraph下載包中包括用javascript寫的前端程序旗芬。

學(xué)習(xí)路徑

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

引入

首先要聲名一個(gè)全局變量 mxBasePath 指向一個(gè)路徑，然后引入 mxGraph捆蜀。mxBasePath 指向的路徑作為 mxGraph 的靜態(tài)資源路徑疮丛。

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

在使用的組件頁(yè)面引入mxgraph

import mxgraph from '@/util/mxgraph'

使用解構(gòu)的方式按照需求引入需要的模塊

const { mxGraph, mxUtils, mxEvent } = mxgraph

檢查瀏覽器

代碼的第一部分是檢查瀏覽器是否支持mxgraph，如果瀏覽器不支持就能在此顯示錯(cuò)誤信息辆它。
對(duì)于主函數(shù)function main（）{}沒有什么特殊的規(guī)定誊薄。function引用頭部加載的文件，并且可以有任何名稱包含任何參數(shù)娩井。在這個(gè)例子中參數(shù)是body中的dom節(jié)點(diǎn)

<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.
//如果瀏覽器不支持暇屋，則顯示錯(cuò)誤信息
    mxUtils.error('Browser is not supported!', 200, false);
  }

Container 容器

頁(yè)面用一個(gè)dom節(jié)點(diǎn)將graph與javascript結(jié)合。它可以使用document.getElementById在body中取得或者直接動(dòng)態(tài)創(chuàng)建（如createElement）洞辣。如果你想讓容器中有滾動(dòng)條咐刨，那么將容器樣式的屬性 overflow 設(shè)為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 圖

代碼創(chuàng)建了一個(gè)空的graph圖模型并通過容器和空的模型來(lái)構(gòu)建具體的圖

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

如果你希望graph圖只讀，可用 graph.setEnabed(false)
常用屬性：

graph.setCellsEditable(true);//單元格是否可編輯
graph.setCellsResizable(false);//是否可調(diào)整大小
graph.setConnectable(false);//是否可以連接
graph.setCellsMovable(true);//是否可以移動(dòng)
graph.setAutoSizeCells(true);//是否可以自動(dòng)調(diào)節(jié)大小
graph.setPanning(true);//移動(dòng)鏡頭  
graph.connectionHandler.setCreateTarget(true);//是否創(chuàng)建目標(biāo)
graph.setAllowLoops(true);// 允許連線的目標(biāo)和源是同一元素
graph.setVertexLabelsMovable(true);// 允許移動(dòng) Vertex 的 Label
mxGraphHandler.prototype.guidesEnabled = true;//顯示細(xì)胞位置標(biāo)尺  
/*禁用節(jié)點(diǎn)雙擊定鸟，防止改變數(shù)據(jù) */  
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 （節(jié)點(diǎn)）and Edges（連線)

程序需要在beginUpdate和endUpdate中來(lái)插入節(jié)點(diǎn)和連線（更新圖形）而涉。endUpdate應(yīng)放在finally-block中以確保endUpdate一直執(zhí)行。但beginUpdate不能在try-block中联予，這樣如果beginUpdate失敗那么endupdate永遠(yuǎn)不會(huì)執(zhí)行啼县。 塊內(nèi)的部分為圖形創(chuàng)建節(jié)點(diǎn)和連線。默認(rèn)的父節(jié)點(diǎn)是在用graph時(shí)無(wú)需參數(shù)自動(dòng)創(chuàng)建在圖中根節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)

//為插入節(jié)點(diǎn)獲得默認(rèn)的父節(jié)點(diǎn)沸久。
 //這通常是根節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
//在單獨(dú)的一步中添加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的實(shí)例）來(lái)決定季眷。樣式表規(guī)定了樣式名稱到樣式之間的映射關(guān)系。一個(gè)樣式是一個(gè)鍵的數(shù)組卷胯。那些鍵對(duì)應(yīng)所用cell的值子刮。值在mxConstants中定義，可以是字符串和數(shù)字窑睁、javascript對(duì)象挺峡、函數(shù)等 。 修改節(jié)點(diǎn)和連線的默認(rèn)樣式

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狀態(tài)的一部分橱赠，它可以通mxGraphModel.setStyle來(lái)改變。style是form[stylename;|key=value;]中的一段字符串箫津。默認(rèn)樣式可覆蓋此cell的制定鍵值狭姨。例如：你用 rounded 樣式，它可以覆蓋 stroke和fillColor

單個(gè)樣式

1.字體相關(guān)

fontColor # 顏色
fontSize # 字體大小
fontFamily # 字體庫(kù)
fontStyle # 字體樣式
textDirection # 文本書寫方向
align # 水平對(duì)齊
verticalAlign # 垂直對(duì)齊

2.標(biāo)簽相關(guān)

labelWidth # 寬
labelPosition # 水平位置
verticalLabelPosition # 垂直位置
noLabel # 不顯示標(biāo)簽
labelBackgroundColor # 背景顏色
labelBorderColor # 邊框顏色
labelPadding # 標(biāo)簽文字和邊框之間的距離
spacing # 標(biāo)簽與頂點(diǎn)的間距
spacingLet # 標(biāo)簽與頂點(diǎn)的左間距
spacingBottom # 標(biāo)簽與頂點(diǎn)的下間距
spacingRight # 標(biāo)簽與頂點(diǎn)的右間距
spacingTop # 標(biāo)簽與頂點(diǎn)的上間距

3.頂點(diǎn)相關(guān)

fillColor # 填充顏色
strokeColor # 描邊顏色
strokeWidth # 描邊線寬
dashed # 虛線邊
dashPattern # 虛線點(diǎn)大小和間距
rounded # 圓角
arcSize # 圓角大小
glass # 玻璃按鈕

4.邊相關(guān)

perimeterSpacing # 周邊間距的關(guān)鍵點(diǎn)
sourcePerimeterSpacing # 邊與源關(guān)鍵點(diǎn)周邊間距
targetPerimeterSpacing # 邊與目標(biāo)關(guān)鍵點(diǎn)周邊間距

例:

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

全局設(shè)置

1.設(shè)置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.設(shè)置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.設(shè)置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);

屬性選項(xiàng)值

• 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 方向?qū)傩?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

• 文本對(duì)齊

涉及 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'

• 周長(zhǎng)相關(guān)

涉及 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;
    }