Web前端最全mxgraph进阶(五)搭建mxGraph简单应用_mxbasepath，2024年最新2024必看-前端高级面试题总结

2401_84447112

于 2024-05-16 19:35:09 发布

阅读量413

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447112/article/details/138972869

版权

程序员专栏收录该内容

158 篇文章 2 订阅

订阅专栏

后话

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。


### 五、添加节点和连接线


程序需要在beginUpdate和endUpdate中来插入节点和连线（更新图形）。endUpdate应放在finally-block中以确保endUpdate一直执行。但beginUpdate不能在try-block中，这样如果beginUpdate失败那么endupdate永远不会执行。


beginUpdate和endUpdate方法不仅提供了显示功能，而且它能够当做undo/redo标记的边界（也就是说，beginUpdate和endUpdate之间操作会作为undo、redo的原子操作，要么同时被redo或undo， 相当于数据库中的事务）。

var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
　　//参数：节点显示的内容、X、Y、宽度、高度，X、Y是相对于DOM节点中的位置
　var v1 = graph.insertVertex(parent, null, ‘节点一’, 20, 100, 300,145, ‘rounded;strokeColor=none;fillColor=none;’);
　var v2 = graph.insertVertex(parent, null, ‘节点二’, 20, 400, 300, 145, ‘rounded;strokeColor=none;fillColor=none;’);
　　//圆形节点
　var v3 = graph.insertVertex(parent, null, ‘B’, 80, 100, 100, 100, ‘shape=ellipse;perimeter=ellipsePerimeter’);
　　//三角形节点
var v4 = graph.insertVertex(parent, null, ‘C’, 190, 30, 100, 60, ‘shape=triangle;perimeter=trianglePerimeter;direction=south’);
　　//节点是否可以折叠
　　graph.getModel().setCollapsed(v2, 1);
　　var html = ‘

html

’;
　　//更新节点显示的内容
　　graph.getModel().setValue(v1, html);
　　//连接线，连接线上显示的内容，连接的两个节点，连接线的样式
　var e1 = graph.insertEdge(parent, null, ‘我1连2’, v1, v2, “strokeWidth=3;labelBackgroundColor=white;fontStyle=1”);
　　//直角连线
　var e2 = graph.insertEdge(parent, null, ‘’, v1, v2, ‘edgeStyle=orthogonalEdgeStyle;’);
　　//曲折连线
var e2 = graph.insertEdge(parent, null, ‘’, v3, v2, ‘edgeStyle=elbowEdgeStyle;elbow=horizontal;orthogonal=0;entryPerimeter=1;’);
　　//虚线连线
　　graph.insertEdge(parent, null, null, step1, step2, ‘crossover’);
}
finally {
　　graph.getModel().endUpdate();
}


### 六、style的使用，插入背景图

var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = ‘IMGUrl’;
graph.getStylesheet().putCellStyle(‘image4gray’, style);
//插入CELL中使用image4gray;即可
cell = graph.insertVertex(parent, null, name, x, y, cellWidth, cellHeight, ‘image4gray;rounded=true;strokeColor=none;fillColor=yellow;’);


### 七、获取画布中的所有元素

var mxGraph = this.GetmxGraph();
　　var parent = mxGraph.getDefaultParent();
　　var parentChildren = parent.children;
　　var arrEdge = []; //连接线
　　var arrVertex = []; //节点
　　//获取所有信息
　　for (var i = 0; i < parentChildren.length; i++) {
　　　　var child = parentChildren[i];
　　　　if (!child.isVisible()) {
　　　　　　continue;
　　　　}
　　　　//区分连接线、节点
　　　　if (child.isEdge()) {
　　　　　　var obj = new Object();
　　　　　　obj.ID = child.id;
　　　　　　obj.SourceID = child.source.id;
　　　　　　obj.TargetID = child.target.id;
　　　　　　arrEdge.push(obj)