GOJS使用--前端拓扑图
1.基础版：
-
引入go.js
<script src="https://my.oschina.net//u/4402671/blog/3234986/js/go.js" type="text/javascript"></script> -
定义html标签
1<!--每个go.js图都包含在html元素中，我们需要给出一个显示的大小--> 2<div id="myDiagramDiv" style="width:400px; height:150px;background-color: #DAE4E4"></div> -
js
1<script> 2 // make构建gojs对象，使$缩写go.GraphObject 3 var $ = go.GraphObject.make; 4 // JS中，绘制图标时需要传递html标签的ID 5 var myDiagram = $(go.Diagram, "myDiagramDiv", 6 { 7 "undoManager.isEnabled": true //启动ctrl+z撤销 和 ctrk+y 重做 8 } 9 ); 10 // 在模型数据中，每个节点都由一个JavaScript对象表示 11 var Mymodel = $(go.Model); 12 Mymodel.nodeDataArray = [ 13 {key: "Alpha"}, 14 {key: "Beta"}, 15 {key: "Gamma"}, 16 ]; 17 myDiagram.model = Mymodel 18</script> -
效果如下显示：可以在go.js图的范围内任意拖动三个模块，但是不难发现html上多了几行水印：
-
去除水印方式：
1在go.js搜索7eba17a4ca3b1a8346 2# 注释掉该行 3a.zr = b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V, Ik, 4, 4); 4# 下一行添加 5a.zr = function(){return true;}
2.拓扑图模块添置图片
-
js
1<script> 2 // make构建gojs对象，使$缩写go.GraphObject 3 var $ = go.GraphObject.make; 4 // JS中，绘制图标时需要传递html标签的ID 5 var myDiagram = $(go.Diagram, "myDiagramDiv", 6 { 7 "undoManager.isEnabled": true //启动ctrl+z撤销 和 ctrk+y 重做 8 } 9 ); 10 // 定义node 11 myDiagram.nodeTemplate = 12 $(go.Node, "Horizontal", 13 // 添加北京颜色 此为当前节点对象 14 {background:"#44CCFF"}, 15 $(go.Picture, 16 // 图片的宽高，包括图片背景(在未设置情况下显示) 17 {margin:10,width:50,height:50,background:"red"}, 18 // Picture.source 绑定模型数据source属性的数据 19 new go.Binding("source") 20 ), 21 $(go.TextBlock, 22 // TextBlock.text初始值 23 "默认值..", 24 // 文本一些样式设置字体颜色，字体大小。。。 25 {margin:12,stroke:"white",font:"bold 16px sans-serif"}, 26 // TextBlock.text 是绑定到模型数据的 name属性的数据 27 new go.Binding("text","name") 28 ) 29 ); 30 // 在模型数据中，每个节点都由一个JavaScript对象表示 31 var Mymodel = $(go.Model); 32 Mymodel.nodeDataArray = [ 33 {name: "Alpha", "source":"img/cat1.png"}, 34 {name: "Beta", "source":"img/cat2.png"}, 35 {name: "Gamma", "source":"img/cat2.png"}, 36 {/* Emoty node data */} 37 ]; 38 myDiagram.model = Mymodel 39</script> -
显示效果：
3.添置连接线
-
只需要将Model模型改成TreeModel.并将定义每条数据key和parent来确定每个节点之间关系。
1// key 和oarent来确定每个节点之间关系 2var Mymodel = $(go.TreeModel); 3 Mymodel.nodeDataArray = [ 4 {name: "Alpha", "source":"img/cat1.png", key:"1"}, 5 {name: "Beta", "source":"img/cat2.png", key:"2", parent:"1"}, 6 {name: "Gamma", "source":"img/cat2.png", key:"3",parent:"1"}, 7 ]; -
显示效果
4.图标布局 树形结构先似乎
-
需要定义layout.来构建树形结构
1<script> 2 // make构建gojs对象，使$缩写go.GraphObject 3 var $ = go.GraphObject.make; 4 // JS中，绘制图标时需要传递html标签的ID 5 var myDiagram = $(go.Diagram, "myDiagramDiv", 6 { 7 "undoManager.isEnabled": true, //启动ctrl+z撤销 和 ctrk+y 重做 8 // 指定一个树形结构：从上到下 9 // TreeLayout 默认未从左到右流动，当设置90从上到下，当设置180，从右向左，当设置270表示从下到上 10 // layerSpacing 实行结构每一层的间距 11 layout: $(go.TreeLayout, 12 {angle:90,layerSpacing:50} 13 ) 14 } 15 ); 16 // 定义node 17 myDiagram.nodeTemplate = 18 $(go.Node, "Horizontal", 19 // 添加北京颜色 此为当前节点对象 20 {background:"#44CCFF"}, 21 $(go.Picture, 22 // 图片的宽高，包括图片背景(在未设置情况下显示) 23 {margin:10,width:50,height:50,background:"red"}, 24 // Picture.source 绑定模型数据source属性的数据 25 new go.Binding("source") 26 ), 27 $(go.TextBlock, 28 // TextBlock.text初始值 29 "默认值..", 30 // 文本一些样式设置字体颜色，字体大小。。。 31 {margin:12,stroke:"white",font:"bold 16px sans-serif"}, 32 // TextBlock.text 是绑定到模型数据的 name属性的数据 33 new go.Binding("text","name") 34 ) 35 ); 36 // 在模型数据中，每个节点都由一个JavaScript对象表示 37 var Mymodel = $(go.TreeModel); 38 Mymodel.nodeDataArray = [ 39 {name: "Alpha", "source":"img/cat1.png", key:"1"}, 40 {name: "Beta", "source":"img/cat2.png", key:"2", parent:"1"}, 41 {name: "Gamma", "source":"img/cat3.png", key:"3",parent:"1"}, 42 {name: "Jellylorum", "source":"img/cat4.png", key:"4",parent:"3"}, 43 {name: "Alonzo", "source":"img/cat5.png", key:"5",parent:"3"}, 44 {name: "Munkustrap", "source":"img/cat6.png", key:"6",parent:"2"}, 45 ]; 46 myDiagram.model = Mymodel 47</script> -
显示效果
5.链接模式
-
需要定义路线模板和箭头模板
1<script> 2 // make构建gojs对象，使$缩写go.GraphObject 3 var $ = go.GraphObject.make; 4 // JS中，绘制图标时需要传递html标签的ID 5 var myDiagram = $(go.Diagram, "myDiagramDiv", 6 { 7 "undoManager.isEnabled": true, //启动ctrl+z撤销 和 ctrk+y 重做 8 // 指定一个树形结构：从上到下 9 // TreeLayout 默认未从左到右流动，当设置90从上到下，当设置180，从右向左，当设置270表示从下到上 10 // layerSpacing 实行结构每一层的间距 11 layout: $(go.TreeLayout, 12 {angle:90,layerSpacing:50} 13 ) 14 } 15 ); 16 // 定义node 17 myDiagram.nodeTemplate = 18 $(go.Node, "Horizontal", 19 // 添加北京颜色 此为当前节点对象 20 {background:"#44CCFF"}, 21 $(go.Picture, 22 // 图片的宽高，包括图片背景(在未设置情况下显示) 23 {margin:10,width:50,height:50,background:"red"}, 24 // Picture.source 绑定模型数据source属性的数据 25 new go.Binding("source") 26 ), 27 $(go.TextBlock, 28 // TextBlock.text初始值 29 "默认值..", 30 // 文本一些样式设置字体颜色，字体大小。。。 31 {margin:12,stroke:"white",font:"bold 16px sans-serif"}, 32 // TextBlock.text 是绑定到模型数据的 name属性的数据 33 new go.Binding("text","name") 34 ) 35 ); 36 // 定义一个有箭头路线模板 37 myDiagram.linkTemplate = 38 $(go.Link, 39 // routing默认未go.Link.Normal 40 // corner 为转角值，就是线置交转交的弧度 41 {routing:go.Link.Orthogonal, corner:5}, 42 // strokeWidth 线的粗细，stroke 线的颜色 43 $(go.Shape,{strokeWidth:3, stroke: "#555"}), 44 // 生成箭头模板toArrow:Standard,OpenTriangle... stroke为箭头颜色 45 $(go.Shape,{toArrow:"Standard",stroke:null}) 46 ); 47 // 在模型数据中，每个节点都由一个JavaScript对象表示 48 var Mymodel = $(go.TreeModel); 49 Mymodel.nodeDataArray = [ 50 {name: "Alpha", "source":"img/cat1.png", key:"1"}, 51 {name: "Beta", "source":"img/cat2.png", key:"2", parent:"1"}, 52 {name: "Gamma", "source":"img/cat3.png", key:"3",parent:"1"}, 53 {name: "Jellylorum", "source":"img/cat4.png", key:"4",parent:"3"}, 54 {name: "Alonzo", "source":"img/cat5.png", key:"5",parent:"3"}, 55 {name: "Munkustrap", "source":"img/cat6.png", key:"6",parent:"2"}, 56 ]; 57 myDiagram.model = Mymodel 58</script> 59 -
显示效果：
6.自定义：
-
js版本：
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>Flowchart</title> 6 <meta name="description" content="Interactive flowchart diagram implemented by GoJS in JavaScript for HTML."/> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!-- Copyright 1998-2020 by Northwoods Software Corporation. --> 9 10 <script src="https://my.oschina.net//u/4402671/blog/3234986/js/go.js"></script> 11 <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> 12 <!--<script src="../assets/js/goSamples.js"></script> <!– this is only for the GoJS Samples framework –>--> 13 <script id="code"> 14 function init() { 15 // 初始化示例 16 // if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this 17 // make构建模板 18 var $ = go.GraphObject.make; // for conciseness in defining templates 19 myDiagram = 20 $(go.Diagram, document.getElementById("myDiagramDiv"), // must name or refer to the DIV HTML element 21 { 22 // 每次画线后调用的事件：为条件连线加上标签 23 "LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below 24 // 每次重画线后调用的事件 25 "LinkRelinked": showLinkLabel, 26 // 启用Ctrl-Z和Ctrl-Y撤销重做功能 27 "undoManager.isEnabled": true, // enable undo & redo 28 // 居中显示内容 29 initialContentAlignment: go.Spot.Center, 30 // 是否允许从Palette面板拖入元素 31 allowDrop: true, 32 }); 33 34 // 当图有改动时，在页面标题后加*，且启动保存按钮 35 myDiagram.addDiagramListener("Modified", function (e) { 36 var button = document.getElementById("SaveButton"); 37 if (button) button.disabled = !myDiagram.isModified; 38 var idx = document.title.indexOf("*"); 39 if (myDiagram.isModified) { 40 if (idx < 0) document.title += "*"; 41 } else { 42 if (idx >= 0) document.title = document.title.substr(0, idx); 43 } 44 }); 45 // 设置节点位置风格，并与模型"loc"属性绑定，该方法会在初始化各种节点模板时使用 46 function nodeStyle() { 47 return [ 48 // 将节点位置信息 Node.location 同节点模型数据中 "loc" 属性绑定： 49 // 节点位置信息从 节点模型 "loc" 属性获取, 并由静态方法 Point.parse 解析. 50 // 如果节点位置改变了, 会自动更新节点模型中"loc"属性, 并由 Point.stringify 方法转化为字符串 51 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 52 { 53 // 节点位置 Node.location 定位在节点的中心 54 locationSpot: go.Spot.Center 55 } 56 ]; 57 } 58 // 创建"port"方法，"port"是一个透明的长方形细长图块，在每个节点的四个边界上，如果鼠标移到节点某个边界上，它会高亮 59 // "name": "port" ID，即GraphObject.portId, 60 // "align": 决定"port" 属于节点4条边的哪条 61 // "spot": 控制连线连入/连出的位置，如go.Spot.Top指, go.Spot.TopSide 62 // "output" / "input": 布尔型，指定是否允许连线从此"port"连入或连出 63 function makePort(name, align, spot, output, input) { 64 // 表示如果是上，下，边界则是水平的"port" 65 var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom); 66 return $(go.Shape, 67 { 68 fill: "transparent", // 默认透明不现实 69 strokeWidth: 0, // 无边框 70 width: horizontal ? NaN : 8, // 垂直"port"则8像素宽 71 height: !horizontal ? NaN : 8, // 水平"port"则8像素 72 alignment: align, // 同其节点对齐 73 stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),//自动同其节点一同伸缩 74 portId: name, // 声明ID 75 fromSpot: spot, // 声明连线头连出此"port"的位置 76 fromLinkable: output, // 布尔型，是否允许连线从此"port"连出 77 toSpot: spot, // 声明连线尾连入此"port"的位置 78 toLinkable: input, // 布尔型，是否允许连线从此"port"连出 79 cursor: "pointer", // 鼠标由指针改为手指，表示此处可点击生成连线 80 mouseEnter: function (e, port) { //鼠标移到"port"位置后，高亮 81 if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)"; 82 }, 83 mouseLeave: function (e, port) {// 鼠标移出"port"位置后，透明 84 port.fill = "transparent"; 85 } 86 }); 87 } 88 // 定义图形上的文字风格 89 function textStyle() { 90 return { 91 font: "bold 11pt Lato, Helvetica, Arial, sans-serif", 92 stroke: "#F8F8F8" 93 } 94 } 95 96 // 定义步骤（默认类型）节点的模板 97 98 myDiagram.nodeTemplateMap.add("", // the default category 99 $(go.Node, "Table", nodeStyle(), 100 // 步骤节点是一个包含可编辑文字块的长方形图块 101 $(go.Panel, "Auto", 102 $(go.Shape, "Rectangle", 103 {fill: "#282c34", stroke: "#00A9C9", strokeWidth: 3.5}, 104 new go.Binding("figure", "figure")), 105 $(go.TextBlock, textStyle(), 106 { 107 margin: 8, 108 maxSize: new go.Size(160, NaN), 109 wrap: go.TextBlock.WrapFit,// 尺寸自适应 110 editable: true// 文字可编辑 111 }, 112 new go.Binding("text").makeTwoWay())// 双向绑定模型中"text"属性 113 ), 114 // 上、左、右可以入，左、右、下可以出 115 // "Top"表示中心，"TopSide"表示上方任一位置，自动选择 116 makePort("T", go.Spot.Top, go.Spot.TopSide, false, true), 117 makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true), 118 makePort("R", go.Spot.Right, go.Spot.RightSide, true, true), 119 makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false) 120 )); 121 // 定义条件节点的模板 122 myDiagram.nodeTemplateMap.add("Conditional", 123 $(go.Node, "Table", nodeStyle(), 124 // 条件节点是一个包含可编辑文字块的菱形图块 125 $(go.Panel, "Auto", 126 $(go.Shape, "Diamond", 127 {fill: "#282c34", stroke: "#00A9C9", strokeWidth: 3.5}, 128 new go.Binding("figure", "figure")), 129 $(go.TextBlock, textStyle(), 130 { 131 margin: 8, 132 maxSize: new go.Size(160, NaN), 133 wrap: go.TextBlock.WrapFit, 134 editable: true 135 }, 136 new go.Binding("text").makeTwoWay()) 137 ), 138 // 上、左、右可以入，左、右、下可以出 139 makePort("T", go.Spot.Top, go.Spot.Top, false, true), 140 makePort("L", go.Spot.Left, go.Spot.Left, true, true), 141 makePort("R", go.Spot.Right, go.Spot.Right, true, true), 142 makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false) 143 )); 144 // 定义开始节点的模板 145 myDiagram.nodeTemplateMap.add("Start", 146 $(go.Node, "Table", nodeStyle(), 147 $(go.Panel, "Spot", 148 $(go.Shape, "Circle", 149 {desiredSize: new go.Size(70, 70), fill: "#282c34", stroke: "#09d3ac", strokeWidth: 3.5}), 150 $(go.TextBlock, "Start", textStyle(), 151 new go.Binding("text")) 152 ), 153 // 左、右、下可以出，但都不可入 154 makePort("L", go.Spot.Left, go.Spot.Left, true, false), 155 makePort("R", go.Spot.Right, go.Spot.Right, true, false), 156 makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false) 157 )); 158 // 定义结束节点的模板 159 myDiagram.nodeTemplateMap.add("End", 160 $(go.Node, "Table", nodeStyle(), 161 // 结束节点是一个圆形图块，文字不可编辑 162 $(go.Panel, "Spot", 163 $(go.Shape, "Circle", 164 {desiredSize: new go.Size(60, 60), fill: "#282c34", stroke: "#DC3C00", strokeWidth: 3.5}), 165 $(go.TextBlock, "End", textStyle(), 166 new go.Binding("text")) 167 ), 168 // 上、左、右可以入，但都不可出 169 makePort("T", go.Spot.Top, go.Spot.Top, false, true), 170 makePort("L", go.Spot.Left, go.Spot.Left, false, true), 171 makePort("R", go.Spot.Right, go.Spot.Right, false, true) 172 )); 173 174 // taken from ../extensions/Figures.js: 175 go.Shape.defineFigureGenerator("File", function (shape, w, h) { 176 var geo = new go.Geometry(); 177 var fig = new go.PathFigure(0, 0, true); // starting point 178 geo.add(fig); 179 fig.add(new go.PathSegment(go.PathSegment.Line, .75 * w, 0)); 180 fig.add(new go.PathSegment(go.PathSegment.Line, w, .25 * h)); 181 fig.add(new go.PathSegment(go.PathSegment.Line, w, h)); 182 fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()); 183 var fig2 = new go.PathFigure(.75 * w, 0, false); 184 geo.add(fig2); 185 // The Fold 186 fig2.add(new go.PathSegment(go.PathSegment.Line, .75 * w, .25 * h)); 187 fig2.add(new go.PathSegment(go.PathSegment.Line, w, .25 * h)); 188 geo.spot1 = new go.Spot(0, .25); 189 geo.spot2 = go.Spot.BottomRight; 190 return geo; 191 }); 192 // 定义注释节点的模板 193 myDiagram.nodeTemplateMap.add("Comment", 194 // 注释节点是一个包含可编辑文字块的文件图块 195 $(go.Node, "Auto", nodeStyle(), 196 $(go.Shape, "File", 197 {fill: "#282c34", stroke: "#DEE0A3", strokeWidth: 3}), 198 $(go.TextBlock, textStyle(), 199 { 200 margin: 8, 201 maxSize: new go.Size(200, NaN), 202 wrap: go.TextBlock.WrapFit,// 尺寸自适应 203 textAlign: "center", 204 editable: true// 文字可编辑 205 }, 206 new go.Binding("text").makeTwoWay()) 207 // 不支持连线入和出 208 )); 209 210 211 // 初始化连接线的模板 212 myDiagram.linkTemplate = 213 $(go.Link, // 所有连接线 214 { 215 routing: go.Link.AvoidsNodes,// 连接线避开节点 216 curve: go.Link.JumpOver, 217 corner: 5, toShortLength: 4,// 直角弧度，箭头弧度 218 relinkableFrom: true,// 允许连线头重设 219 relinkableTo: true,// 允许连线尾重设 220 reshapable: true,// 允许线形修改 221 resegmentable: true,// 允许连线分割（折线）修改 222 // 鼠标移到连线上后高亮 223 mouseEnter: function (e, link) { 224 link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; 225 }, 226 mouseLeave: function (e, link) { 227 link.findObject("HIGHLIGHT").stroke = "transparent"; 228 }, 229 selectionAdorned: false 230 }, 231 new go.Binding("points").makeTwoWay(), // 双向绑定模型中"points"数组属性 232 $(go.Shape, // 隐藏的连线形状，8个像素粗细，当鼠标移上后显示 233 {isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT"}), 234 $(go.Shape, // 连线规格（颜色，选中/非选中，粗细） 235 {isPanelMain: true, stroke: "gray", strokeWidth: 2}, 236 new go.Binding("stroke", "isSelected", function (sel) { 237 return sel ? "dodgerblue" : "gray"; 238 }).ofObject()), 239 $(go.Shape, // 箭头规格 240 {toArrow: "standard", strokeWidth: 0, fill: "gray"}), 241 $(go.Panel, "Auto", // 连线标签，默认不显示 242 {visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5}, 243 new go.Binding("visible", "visible").makeTwoWay(),// 双向绑定模型中"visible"属性 244 $(go.Shape, "RoundedRectangle", // 连线中显示的标签形状 245 {fill: "#F8F8F8", strokeWidth: 0}), 246 $(go.TextBlock, "Yes", // // 连线中显示的默认标签文字 247 { 248 textAlign: "center", 249 font: "10pt helvetica, arial, sans-serif", 250 stroke: "#333333", 251 editable: true 252 }, 253 new go.Binding("text").makeTwoWay()) // 双向绑定模型中"text"属性 254 ) 255 ); 256 257 // 此事件方法由整个画板的LinkDrawn和LinkRelinked事件触发 258 // 如果连线是从"conditional"条件节点出发，则将连线上的标签显示出来 259 function showLinkLabel(e) { 260 var label = e.subject.findObject("LABEL"); 261 if (label !== null) label.visible = (e.subject.fromNode.data.category === "Conditional"); 262 } 263 264 // 临时的连线（还在画图中），包括重连的连线，都保持直角 265 myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal; 266 myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal; 267 268 load(); // load an initial diagram from some JSON text 269 270 // 在图形页面的左边初始化图例Palette面板 271 myPalette = 272 $(go.Palette, "myPaletteDiv", // 必须同HTML中Div元素id一致 273 { 274 // Instead of the default animation, use a custom fade-down 275 "animationManager.initialAnimationStyle": go.AnimationManager.None, 276 "InitialAnimationStarting": animateFadeDown, // 使用此函数设置动画 277 278 nodeTemplateMap: myDiagram.nodeTemplateMap, // 同myDiagram公用一种node节点模板 279 model: new go.GraphLinksModel([ // 初始化Palette面板里的内容 280 {category: "Start", text: "Start"}, 281 {text: "Step"}, 282 {category: "Conditional", text: "???"}, 283 {category: "End", text: "End"}, 284 {category: "Comment", text: "Comment"} 285 ]) 286 }); 287 288 // 动画效果 289 function animateFadeDown(e) { 290 var diagram = e.diagram; 291 var animation = new go.Animation(); 292 animation.isViewportUnconstrained = true; // So Diagram positioning rules let the animation start off-screen 293 animation.easing = go.Animation.EaseOutExpo; 294 animation.duration = 900; 295 // Fade "down", in other words, fade in from above 296 animation.add(diagram, 'position', diagram.position.copy().offset(0, 200), diagram.position); 297 animation.add(diagram, 'opacity', 0, 1); 298 animation.start(); 299 } 300 301 } // end init 302 // 将go模型以JSon格式保存在文本框内 303 function save() { 304 document.getElementById("mySavedModel").value = myDiagram.model.toJson(); 305 myDiagram.isModified = false; 306 } 307 // 初始化模型范例 308 function load() { 309 myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); 310 } 311 312 // 在新窗口中将图形转化为SVG，并分页打印 313 function printDiagram() { 314 var svgWindow = window.open(); 315 if (!svgWindow) return; // failure to open a new Window 316 var printSize = new go.Size(700, 960); 317 var bnds = myDiagram.documentBounds; 318 var x = bnds.x; 319 var y = bnds.y; 320 while (y < bnds.bottom) { 321 while (x < bnds.right) { 322 var svg = myDiagram.makeSVG({scale: 1.0, position: new go.Point(x, y), size: printSize}); 323 svgWindow.document.body.appendChild(svg); 324 x += printSize.width; 325 } 326 x = bnds.x; 327 y += printSize.height; 328 } 329 setTimeout(function () { 330 svgWindow.print(); 331 }, 1); 332 } 333 </script> 334</head> 335 <body onload="init()"> 336 <div id="sample"> 337 <div style="width: 100%; display: flex; justify-content: space-between"> 338 <div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: #282c34;"></div> 339 <div id="myDiagramDiv" style="flex-grow: 1; height: 750px; background-color: #282c34;"></div> 340 </div> 341 <button id="SaveButton" onclick="save()">Save</button> 342 <button onclick="load()">Load</button> 343 Diagram Model saved in JSON format: 344 <textarea id="mySavedModel" style="width:100%;height:300px"> 345 { "class": "go.GraphLinksModel", 346 "linkFromPortIdProperty": "fromPort", 347 "linkToPortIdProperty": "toPort", 348 "nodeDataArray": [ 349 ], 350 "linkDataArray": [ 351 ]} 352 </textarea> 353 <button onclick="printDiagram()">Print Diagram Using SVG</button> 354 </div> 355 </body> 356</html> 357 -
vue版
1<template> 2 <el-card> 3 <my-bread level1='拓扑图' level2='拓扑图绘制'></my-bread> 4 <div id='sample'> 5 <div style='width: 100%; display: flex; justify-content: space-between'> 6 <div ref='myPaletteDiv' style='width: 100px; margin-right: 2px; background-color: #282c34;'></div> 7 <div ref='myDiagramDiv' style='flex-grow: 1; height: 750px; background-color: #282c34;'></div> 8 </div> 9 <button id='SaveButton' @click='save()'>Save</button> 10 <button @click='load()'>Load</button> 11 Diagram Model saved in JSON format: 12 <textarea ref='mySavedModel' style='width:100%;height:300px'> 13 {{this.diagramData}} 14 </textarea> 15 <button @click='printDiagram()'>Print Diagram Using SVG</button> 16 </div> 17 </el-card> 18<!-- <button @click='init()'></button>--> 19</template> 20 21<script> 22import go from 'gojs' 23let $ = go.GraphObject.make 24export default { 25 data () { 26 return { 27 diagramData : { 'class': 'go.GraphLinksModel', 28 'linkFromPortIdProperty': 'fromPort', 29 'linkToPortIdProperty': 'toPort', 30 'nodeDataArray': [ 31 ], 32 'linkDataArray': [ 33 ]}, 34 myDiagram: null, 35 myPalette: null 36 } 37 }, 38 mounted () { 39 this.myDiagram = 40 $(go.Diagram, this.$refs.myDiagramDiv, 41 { 42 // 每次画线后调用的事件：为条件连线加上标签 43 'LinkDrawn': this.showLinkLabel, 44 // 每次重画线后调用的事件 45 'LinkRelinked': this.showLinkLabel, 46 // 启用Ctrl-Z和Ctrl-Y撤销重做功能 47 'undoManager.isEnabled': true, 48 // 居中显示内容 49 initialContentAlignment: go.Spot.Center, 50 // 是否允许从Palette面板拖入元素 51 allowDrop: true, 52 }) 53 // console.log(this.$refs.SaveButton) 54 // 当图有改动时，在页面标题后加*，且启动保存按钮 55 // this.myDiagram.addDiagramListener('Modified', function (e) { 56 // // var button = this.$refs.SaveButton 57 // var button = document.getElementById('SaveButton') 58 // if (button) button.disabled =! this.myDiagram.isModified 59 // var idx = document.title.indexOf('*') 60 // if (this.myDiagram.isModified) { 61 // if (idx < 0) document.title += '*' 62 // } else { 63 // if (idx >= 0) document.title = document.title.substr(0, idx) 64 // } 65 // }) 66 // 定义步骤（默认类型）节点的模板 67 this.myDiagram.nodeTemplateMap.add('', 68 $(go.Node, 'Table', this.nodeStyle(), 69 // 步骤节点是一个包含可编辑文字块的长方形图块 70 $(go.Panel, 'Auto', 71 $(go.Shape, 'Rectangle', 72 {fill: '#282c34', stroke: '#00A9C9', strokeWidth: 3.5}, 73 new go.Binding('figure', 'figure')), 74 $(go.TextBlock, this.textStyle(), 75 { 76 margin: 8, 77 maxSize: new go.Size(160, NaN), 78 wrap: go.TextBlock.WrapFit,// 尺寸自适应 79 editable: true// 文字可编辑 80 }, 81 new go.Binding('text').makeTwoWay())// 双向绑定模型中'text'属性 82 ), 83 // 上、左、右可以入，左、右、下可以出 84 // 'Top'表示中心，'TopSide'表示上方任一位置，自动选择 85 this.makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), 86 this.makePort('L', go.Spot.Left, go.Spot.LeftSide, true, true), 87 this.makePort('R', go.Spot.Right, go.Spot.RightSide, true, true), 88 this.makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false) 89 )) 90 // 定义条件节点的模板 91 this.myDiagram.nodeTemplateMap.add('Conditional', 92 $(go.Node, 'Table', this.nodeStyle(), 93 // 条件节点是一个包含可编辑文字块的菱形图块 94 $(go.Panel, 'Auto', 95 $(go.Shape, 'Diamond', 96 {fill: '#282c34', stroke: '#00A9C9', strokeWidth: 3.5}, 97 new go.Binding('figure', 'figure')), 98 $(go.TextBlock, this.textStyle(), 99 { 100 margin: 8, 101 maxSize: new go.Size(160, NaN), 102 wrap: go.TextBlock.WrapFit, 103 editable: true 104 }, 105 new go.Binding('text').makeTwoWay()) 106 ), 107 // 上、左、右可以入，左、右、下可以出 108 this.makePort('T', go.Spot.Top, go.Spot.Top, false, true), 109 this.makePort('L', go.Spot.Left, go.Spot.Left, true, true), 110 this.makePort('R', go.Spot.Right, go.Spot.Right, true, true), 111 this.makePort('B', go.Spot.Bottom, go.Spot.Bottom, true, false) 112 )) 113 // 定义开始节点的模板 114 this.myDiagram.nodeTemplateMap.add('Start', 115 $(go.Node, 'Table', this.nodeStyle(), 116 $(go.Panel, 'Spot', 117 $(go.Shape, 'Circle', 118 {desiredSize: new go.Size(70, 70), fill: '#282c34', stroke: '#09d3ac', strokeWidth: 3.5}), 119 $(go.TextBlock, 'Start', this.textStyle(), 120 new go.Binding('text')) 121 ), 122 // 左、右、下可以出，但都不可入 123 this.makePort('L', go.Spot.Left, go.Spot.Left, true, false), 124 this.makePort('R', go.Spot.Right, go.Spot.Right, true, false), 125 this.makePort('B', go.Spot.Bottom, go.Spot.Bottom, true, false) 126 )) 127 // 定义结束节点的模板 128 this.myDiagram.nodeTemplateMap.add('End', 129 $(go.Node, 'Table', this.nodeStyle(), 130 // 结束节点是一个圆形图块，文字不可编辑 131 $(go.Panel, 'Spot', 132 $(go.Shape, 'Circle', 133 {desiredSize: new go.Size(60, 60), fill: '#282c34', stroke: '#DC3C00', strokeWidth: 3.5}), 134 $(go.TextBlock, 'End', this.textStyle(), 135 new go.Binding('text')) 136 ), 137 // 上、左、右可以入，但都不可出 138 this.makePort('T', go.Spot.Top, go.Spot.Top, false, true), 139 this.makePort('L', go.Spot.Left, go.Spot.Left, false, true), 140 this.makePort('R', go.Spot.Right, go.Spot.Right, false, true) 141 )); 142 // taken from 143 go.Shape.defineFigureGenerator('File', function (shape, w, h) { 144 var geo = new go.Geometry(); 145 var fig = new go.PathFigure(0, 0, true); // starting point 146 geo.add(fig); 147 fig.add(new go.PathSegment(go.PathSegment.Line, .75 * w, 0)); 148 fig.add(new go.PathSegment(go.PathSegment.Line, w, .25 * h)); 149 fig.add(new go.PathSegment(go.PathSegment.Line, w, h)); 150 fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()); 151 var fig2 = new go.PathFigure(.75 * w, 0, false); 152 geo.add(fig2); 153 // The Fold 154 fig2.add(new go.PathSegment(go.PathSegment.Line, .75 * w, .25 * h)); 155 fig2.add(new go.PathSegment(go.PathSegment.Line, w, .25 * h)); 156 geo.spot1 = new go.Spot(0, .25); 157 geo.spot2 = go.Spot.BottomRight; 158 return geo; 159 }) 160 // 定义注释节点的模板 161 this.myDiagram.nodeTemplateMap.add('Comment', 162 // 注释节点是一个包含可编辑文字块的文件图块 163 $(go.Node, 'Auto', this.nodeStyle(), 164 $(go.Shape, 'File', 165 {fill: '#282c34', stroke: '#DEE0A3', strokeWidth: 3}), 166 $(go.TextBlock, this.textStyle(), 167 { 168 margin: 8, 169 maxSize: new go.Size(200, NaN), 170 wrap: go.TextBlock.WrapFit,// 尺寸自适应 171 textAlign: 'center', 172 editable: true// 文字可编辑 173 }, 174 new go.Binding('text').makeTwoWay()) 175 // 不支持连线入和出 176 )) 177 // 初始化连接线的模板 178 this.myDiagram.linkTemplate = 179 $(go.Link, // 所有连接线 180 { 181 routing: go.Link.AvoidsNodes,// 连接线避开节点 182 curve: go.Link.JumpOver, 183 corner: 5, toShortLength: 4,// 直角弧度，箭头弧度 184 relinkableFrom: true,// 允许连线头重设 185 relinkableTo: true,// 允许连线尾重设 186 reshapable: true,// 允许线形修改 187 resegmentable: true,// 允许连线分割（折线）修改 188 // 鼠标移到连线上后高亮 189 mouseEnter: function (e, link) { 190 link.findObject('HIGHLIGHT').stroke = 'rgba(30,144,255,0.2)'; 191 }, 192 mouseLeave: function (e, link) { 193 link.findObject('HIGHLIGHT').stroke = 'transparent'; 194 }, 195 selectionAdorned: false 196 }, 197 new go.Binding('points').makeTwoWay(), // 双向绑定模型中'points'数组属性 198 $(go.Shape, // 隐藏的连线形状，8个像素粗细，当鼠标移上后显示 199 {isPanelMain: true, strokeWidth: 8, stroke: 'transparent', name: 'HIGHLIGHT'}), 200 $(go.Shape, // 连线规格（颜色，选中/非选中，粗细） 201 {isPanelMain: true, stroke: 'gray', strokeWidth: 2}, 202 new go.Binding('stroke', 'isSelected', function (sel) { 203 return sel ? 'dodgerblue' : 'gray'; 204 }).ofObject()), 205 $(go.Shape, // 箭头规格 206 {toArrow: 'standard', strokeWidth: 0, fill: 'gray'}), 207 $(go.Panel, 'Auto', // 连线标签，默认不显示 208 {visible: false, name: 'LABEL', segmentIndex: 2, segmentFraction: 0.5}, 209 new go.Binding('visible', 'visible').makeTwoWay(),// 双向绑定模型中'visible'属性 210 $(go.Shape, 'RoundedRectangle', // 连线中显示的标签形状 211 {fill: '#F8F8F8', strokeWidth: 0}), 212 $(go.TextBlock, 'Yes', // // 连线中显示的默认标签文字 213 { 214 textAlign: 'center', 215 font: '10pt helvetica, arial, sans-serif', 216 stroke: '#333333', 217 editable: true 218 }, 219 new go.Binding('text').makeTwoWay()) // 双向绑定模型中'text'属性 220 ) 221 ); 222 // 临时的连线（还在画图中），包括重连的连线，都保持直角 223 this.myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal; 224 this.myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal; 225 // 读取json数据 226 this.load() 227 // 在图形页面的左边初始化图例Palette面板 228 this.myPalette = 229 $(go.Palette, this.$refs.myPaletteDiv, // 必须同HTML中Div元素id一致 230 { 231 // Instead of the default animation, use a custom fade-down 232 'animationManager.initialAnimationStyle': go.AnimationManager.None, 233 'InitialAnimationStarting': this.animateFadeDown, // 使用此函数设置动画 234 235 nodeTemplateMap: this.myDiagram.nodeTemplateMap, // 同myDiagram公用一种node节点模板 236 model: new go.GraphLinksModel([ // 初始化Palette面板里的内容 237 {category: 'Start', text: '开始'}, 238 {text: '步骤'}, 239 {category: 'Conditional', text: '选择'}, 240 {category: 'End', text: '结束'}, 241 {category: 'Comment', text: '标识'} 242 ]) 243 }) 244 }, 245 methods : { 246 showLinkLabel (e) { 247 var label = e.subject.findObject('LABEL') 248 if (label !== null) label.visible = (e.subject.fromNode.data.category === 'Conditional') 249 }, 250 // 设置节点位置风格，并与模型'loc'属性绑定，该方法会在初始化各种节点模板时使用 251 nodeStyle () { 252 return [ 253 // 将节点位置信息 Node.location 同节点模型数据中 'loc' 属性绑定： 254 // 节点位置信息从 节点模型 'loc' 属性获取, 并由静态方法 Point.parse 解析. 255 // 如果节点位置改变了, 会自动更新节点模型中'loc'属性, 并由 Point.stringify 方法转化为字符串 256 new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), 257 { 258 // 节点位置 Node.location 定位在节点的中心 259 locationSpot: go.Spot.Center 260 } 261 ] 262 }, 263 // 创建'port'方法，'port'是一个透明的长方形细长图块，在每个节点的四个边界上，如果鼠标移到节点某个边界上，它会高亮 264 // 'name': 'port' ID，即GraphObject.portId, 265 // 'align': 决定'port' 属于节点4条边的哪条 266 // 'spot': 控制连线连入/连出的位置，如go.Spot.Top指, go.Spot.TopSide 267 // 'output' / 'input': 布尔型，指定是否允许连线从此'port'连入或连出 268 makePort (name, align, spot, output, input) { 269 // 表示如果是上，下，边界则是水平的'port' 270 var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom); 271 return $(go.Shape, 272 { 273 fill: 'transparent', // 默认透明不现实 274 strokeWidth: 0, // 无边框 275 width: horizontal ? NaN : 8, // 垂直'port'则8像素宽 276 height: !horizontal ? NaN : 8, // 水平'port'则8像素 277 alignment: align, // 同其节点对齐 278 stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),//自动同其节点一同伸缩 279 portId: name, // 声明ID 280 fromSpot: spot, // 声明连线头连出此'port'的位置 281 fromLinkable: output, // 布尔型，是否允许连线从此'port'连出 282 toSpot: spot, // 声明连线尾连入此'port'的位置 283 toLinkable: input, // 布尔型，是否允许连线从此'port'连出 284 cursor: 'pointer', // 鼠标由指针改为手指，表示此处可点击生成连线 285 mouseEnter: function (e, port) { //鼠标移到'port'位置后，高亮 286 if (!e.diagram.isReadOnly) port.fill = 'rgba(255,0,255,0.5)'; 287 }, 288 mouseLeave: function (e, port) {// 鼠标移出'port'位置后，透明 289 port.fill = 'transparent'; 290 } 291 }) 292 }, 293 // 定义图形上的文字风格 294 textStyle() { 295 return { 296 font: 'bold 11pt Lato, Helvetica, Arial, sans-serif', 297 stroke: '#F8F8F8' 298 } 299 }, 300 load () { 301 this.myDiagram.model = go.Model.fromJson(this.$refs.mySavedModel.value) 302 // console.log(this.$refs.mySavedModel.value) 303 }, 304 animateFadeDown(e) { 305 var diagram = e.diagram; 306 var animation = new go.Animation(); 307 animation.isViewportUnconstrained = true; // So Diagram positioning rules let the animation start off-screen 308 animation.easing = go.Animation.EaseOutExpo; 309 animation.duration = 900; 310 // Fade 'down', in other words, fade in from above 311 animation.add(diagram, 'position', diagram.position.copy().offset(0, 200), diagram.position); 312 animation.add(diagram, 'opacity', 0, 1); 313 animation.start(); 314 }, 315 // 初始化模型范例 316 save () { 317 this.$refs.mySavedModel.value = this.myDiagram.model.toJson() 318 this.myDiagram.isModified = false 319 }, 320 // 在新窗口中将图形转化为SVG，并分页打印 321 printDiagram() { 322 var svgWindow = window.open(); 323 if (!svgWindow) return; // failure to open a new Window 324 var printSize = new go.Size(700, 960); 325 var bnds = this.myDiagram.documentBounds; 326 var x = bnds.x; 327 var y = bnds.y; 328 while (y < bnds.bottom) { 329 while (x < bnds.right) { 330 var svg = this.myDiagram.makeSVG({scale: 1.0, position: new go.Point(x, y), size: printSize}); 331 svgWindow.document.body.appendChild(svg); 332 x += printSize.width; 333 } 334 x = bnds.x; 335 y += printSize.height; 336 } 337 setTimeout(function () { 338 svgWindow.print(); 339 }, 1); 340 } 341 } 342} 343</script> 344<style scoped> 345 346</style> 347 -
参考文件：