Go.js 沒有中文文檔 也沒有中文demo 學起來很費勁 給大家整理一個算是詳細的文檔
阿新 • • 發佈：2018-04-04
必須 SM iam rtl odi 文檔 文本 ping 用戶
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <title>Draggable Link</title> 6 <meta name="description" 7 content="Drag a link to reconnect it. Nodes have custom Adornments for selection, resizing, and reshaping."/> 8<meta charset="UTF-8"> 9 <script src="js/go/go1.js"></script> 10 <!--<script src="../assets/js/goSamples.js"></script> <!– this is only for the GoJS Samples framework –>--> 11 <script id="code"> 13 functioninit() { 14 if (window.goSamples) goSamples(); // 這些樣本的init - 你不需要調用它 15 var $ = go.GraphObject.make; // 為了簡潔定義模板 16 myDiagram = 17 $(go.Diagram, "myDiagramDiv", // 必須命名或引用div HTML元素 18 { 19 grid: $(go.Panel, "Grid",20 $(go.Shape, "LineH", {stroke: "lightgray", strokeWidth: 0.5}), 21 $(go.Shape, "LineH", {stroke: "gray", strokeWidth: 0.5, interval: 10}), 22 $(go.Shape, "LineV", {stroke: "lightgray", strokeWidth: 0.5}), 23 $(go.Shape, "LineV", {stroke: "gray", strokeWidth: 0.5, interval: 10}) 24 ), 25 allowDrop: true, // 必須是真的才能接受調色板中的液滴 26 "draggingTool.dragsLink": true, 27 "draggingTool.isGridSnapEnabled": true, 28 "linkingTool.isUnconnectedLinkValid": true, 29 "linkingTool.portGravity": 20, 30 "relinkingTool.isUnconnectedLinkValid": true, 31 "relinkingTool.portGravity": 20, 32 "relinkingTool.fromHandleArchetype": 33 $(go.Shape, "Diamond", { 34 segmentIndex: 0, 35 cursor: "pointer", 36 desiredSize: new go.Size(8, 8), 37 fill: "tomato", 38 stroke: "darkred" 39 }), 40 "relinkingTool.toHandleArchetype": 41 $(go.Shape, "Diamond", { 42 segmentIndex: -1, 43 cursor: "pointer", 44 desiredSize: new go.Size(8, 8), 45 fill: "darkred", 46 stroke: "tomato" 47 }), 48 "linkReshapingTool.handleArchetype": 49 $(go.Shape, "Diamond", { 50 desiredSize: new go.Size(7, 7), 51 fill: "lightblue", 52 stroke: "deepskyblue" 53 }), 54 rotatingTool: $(TopRotatingTool), // 定義如下 55 "rotatingTool.snapAngleMultiple": 15, 56 "rotatingTool.snapAngleEpsilon": 15, 57 "undoManager.isEnabled": true 58 }); 59 // 當文檔被修改時，為標題添加一個“*”並啟用“保存”按鈕 60 myDiagram.addDiagramListener("Modified", function (e) { 61 var button = document.getElementById("SaveButton"); 62 if (button) button.disabled = !myDiagram.isModified; 63 var idx = document.title.indexOf("*"); 64 if (myDiagram.isModified) { 65 if (idx < 0) document.title += "*"; 66 } else { 67 if (idx >= 0) document.title = document.title.substr(0, idx); 68 } 69 }); 70 // 定義一個創建通常透明的“端口”的函數。 71 //“name”用作GraphObject.portId，“spot”用於控制鏈接的連接方式 72 // 以及端口在節點上的位置以及布爾型“輸出”和“輸入”參數 73 // 控制用戶是否可以從端口或從端口獲取鏈接。 74 function makePort(name, spot, output, input) { 75 // 港口基本上只是一個小透明的廣場 76 return $(go.Shape, "Circle", 77 { 78 fill: null, // 沒有看到，默認情況下; 通過showSmallPorts設置為半透明灰色，如下定義 79 stroke: null, 80 desiredSize: new go.Size(7, 7), 81 alignment: spot, // 對齊主Shape中的端口 82 alignmentFocus: spot, // 只是在形狀內 83 portId: name, // 聲明這個對象是一個“端口” 84 fromSpot: spot, toSpot: spot, // 聲明鏈接可能在此端口連接的位置 85 fromLinkable: output, toLinkable: input, // 聲明用戶是否可以在此處繪制鏈接 86 cursor: "pointer" // 顯示不同的光標以指示潛在的鏈接點 87 }); 88 } 89 90 var nodeSelectionAdornmentTemplate = 91 $(go.Adornment, "Auto", 92 $(go.Shape, {fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2]}), 93 $(go.Placeholder) 94 ); 95 var nodeResizeAdornmentTemplate = 96 $(go.Adornment, "Spot", 97 {locationSpot: go.Spot.Right}, 98 $(go.Placeholder), 99 $(go.Shape, { 100 alignment: go.Spot.TopLeft, 101 cursor: "nw-resize", 102 desiredSize: new go.Size(6, 6), 103 fill: "lightblue", 104 stroke: "deepskyblue" 105 }), 106 $(go.Shape, { 107 alignment: go.Spot.Top, 108 cursor: "n-resize", 109 desiredSize: new go.Size(6, 6), 110 fill: "lightblue", 111 stroke: "deepskyblue" 112 }), 113 $(go.Shape, { 114 alignment: go.Spot.TopRight, 115 cursor: "ne-resize", 116 desiredSize: new go.Size(6, 6), 117 fill: "lightblue", 118 stroke: "deepskyblue" 119 }), 120 $(go.Shape, { 121 alignment: go.Spot.Left, 122 cursor: "w-resize", 123 desiredSize: new go.Size(6, 6), 124 fill: "lightblue", 125 stroke: "deepskyblue" 126 }), 127 $(go.Shape, { 128 alignment: go.Spot.Right, 129 cursor: "e-resize", 130 desiredSize: new go.Size(6, 6), 131 fill: "lightblue", 132 stroke: "deepskyblue" 133 }), 134 $(go.Shape, { 135 alignment: go.Spot.BottomLeft, 136 cursor: "se-resize", 137 desiredSize: new go.Size(6, 6), 138 fill: "lightblue", 139 stroke: "deepskyblue" 140 }), 141 $(go.Shape, { 142 alignment: go.Spot.Bottom, 143 cursor: "s-resize", 144 desiredSize: new go.Size(6, 6), 145 fill: "lightblue", 146 stroke: "deepskyblue" 147 }), 148 $(go.Shape, { 149 alignment: go.Spot.BottomRight, 150 cursor: "sw-resize", 151 desiredSize: new go.Size(6, 6), 152 fill: "lightblue", 153 stroke: "deepskyblue" 154 }) 155 ); 156 var nodeRotateAdornmentTemplate = 157 $(go.Adornment, 158 {locationSpot: go.Spot.Center, locationObjectName: "CIRCLE"}, 159 $(go.Shape, "Circle", { 160 name: "CIRCLE", 161 cursor: "pointer", 162 desiredSize: new go.Size(7, 7), 163 fill: "lightblue", 164 stroke: "deepskyblue" 165 }), 166 $(go.Shape, { 167 geometryString: "M3.5 7 L3.5 30", 168 isGeometryPositioned: true, 169 stroke: "deepskyblue", 170 strokeWidth: 1.5, 171 strokeDashArray: [4, 2] 172 }) 173 ); 174 myDiagram.nodeTemplate = 175 $(go.Node, "Spot", 176 {locationSpot: go.Spot.Center}, 177 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 178 {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate}, 179 {resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate}, 180 {rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate}, 181 new go.Binding("angle").makeTwoWay(), 182 //主要對象是圍繞具有形狀的TextBlock的面板 183 $(go.Panel, "Auto", 184 {name: "PANEL"}, 185 new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), 186 $(go.Shape, "Rectangle", // 默認數字 187 { 188 portId: "", // 默認端口：如果鏈接數據沒有位置，請使用最近端 189 fromLinkable: true, toLinkable: true, cursor: "pointer", 190 fill: "white", // default color 191 strokeWidth: 2 192 }, 193 new go.Binding("figure"), 194 new go.Binding("fill")), 195 $(go.TextBlock, 196 { 197 font: "bold 11pt Helvetica, Arial, sans-serif", 198 margin: 8, 199 maxSize: new go.Size(160, NaN), 200 wrap: go.TextBlock.WrapFit, 201 editable: true 202 }, 203 new go.Binding("text").makeTwoWay()) 204 ), 205 // 四個小的有名港口，每邊一個： 206 makePort("T", go.Spot.Top, false, true), 207 makePort("L", go.Spot.Left, true, true), 208 makePort("R", go.Spot.Right, true, true), 209 makePort("B", go.Spot.Bottom, true, false), 210 { // 處理鼠標進入/離開事件以顯示/隱藏端口 211 mouseEnter: function (e, node) { 212 showSmallPorts(node, true); 213 }, 214 mouseLeave: function (e, node) { 215 showSmallPorts(node, false); 216 } 217 } 218 ); 219 220 function showSmallPorts(node, show) { 221 node.ports.each(function (port) { 222 if (port.portId !== "") { // 不要更改默認端口，這是一個很大的形狀 223 port.fill = show ? "rgba(0,0,0,.3)" : null; 224 } 225 }); 226 } 227 228 var linkSelectionAdornmentTemplate = 229 $(go.Adornment, "Link", 230 $(go.Shape, 231 // isPanelMain聲明這個Shape共享Link.geometry 232 {isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0}) // 使用選擇對象的strokeWidth 233 ); 234 myDiagram.linkTemplate = 235 $(go.Link, // 整個鏈接面板 236 {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate}, 237 {relinkableFrom: true, relinkableTo: true, reshapable: true}, 238 { 239 routing: go.Link.AvoidsNodes, 240 curve: go.Link.JumpOver, 241 corner: 5, 242 toShortLength: 4 243 }, 244 new go.Binding("points").makeTwoWay(), 245 $(go.Shape, // the link path shape 246 {isPanelMain: true, strokeWidth: 2}), 247 $(go.Shape, // the arrowhead 248 {toArrow: "Standard", stroke: null}), 249 $(go.Panel, "Auto", 250 new go.Binding("visible", "isSelected").ofObject(), 251 $(go.Shape, "RoundedRectangle", // 鏈接形狀 252 {fill: "#F8F8F8", stroke: null}), 253 $(go.TextBlock, 254 { 255 textAlign: "center", 256 font: "10pt helvetica, arial, sans-serif", 257 stroke: "#919191", 258 margin: 2, 259 minSize: new go.Size(10, NaN), 260 editable: true 261 }, 262 new go.Binding("text").makeTwoWay()) 263 ) 264 ); 265 load(); // 從一些JSON文本加載初始圖 266 // 初始化頁面左側的Palette 267 myPalette = 268 $(go.Palette, "myPaletteDiv", // 必須命名或引用DIV HTML元素 269 { 270 maxSelectionCount: 1, 271 nodeTemplateMap: myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板 272 linkTemplate: // 簡化鏈接模板，就在這個調色板中 273 $(go.Link, 274 { // 因為GridLayout.alignment是Location，並且節點具有locationSpot == Spot.Center， 275 // 以相同的方式排列鏈接，我們必須假裝鏈接具有相同的位置點 276 locationSpot: go.Spot.Center, 277 selectionAdornmentTemplate: 278 $(go.Adornment, "Link", 279 {locationSpot: go.Spot.Center}, 280 $(go.Shape, 281 {isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0}), 282 $(go.Shape, // the arrowhead 283 {toArrow: "Standard", stroke: null}) 284 ) 285 }, 286 { 287 routing: go.Link.AvoidsNodes, 288 curve: go.Link.JumpOver, 289 corner: 5, 290 toShortLength: 4 291 }, 292 new go.Binding("points"), 293 $(go.Shape, // 鏈接路徑形狀 294 {isPanelMain: true, strokeWidth: 2}), 295 $(go.Shape, // 箭頭 296 {toArrow: "Standard", stroke: null}) 297 ), 298 model: new go.GraphLinksModel([ // 指定調色板的內容 299 //{text: "模塊內容", figure: "形狀", fill: "顏色"},值可以接受變量 300 {text: "接聽",figure: "RoundedRectangle"}, 301 {text: "確認身份"}, 302 {text: "還款提醒"}, 303 {text: "應答", figure: "Diamond"}, 304 {text: "處理"}, 305 {text: "掛機2", figure: "RoundedRectangle"} 306 ], [ 307 // 調色板也有一個斷開的鏈接，用戶可以拖放 308 {points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)])} 309 ]) 310 }); 311 } 312 313 function TopRotatingTool() { 314 go.RotatingTool.call(this); 315 } 316 317 go.Diagram.inherit(TopRotatingTool, go.RotatingTool); 318 /** @override */ 319 TopRotatingTool.prototype.updateAdornments = function (part) { 320 go.RotatingTool.prototype.updateAdornments.call(this, part); 321 var adornment = part.findAdornment("Rotating"); 322 if (adornment !== null) { 323 adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // 在中間頂部以上 324 } 325 }; 326 /** @override */ 327 TopRotatingTool.prototype.rotate = function (newangle) { 328 go.RotatingTool.prototype.rotate.call(this, newangle + 90); 329 }; 330 // TopRotatingTool類的結尾 331 // 以JSON格式顯示用戶可編輯的圖表模型 332 function save() { 333 saveDiagramProperties(); // 在寫入JSON之前先執行此操作 334 document.getElementById("mySavedModel").value = myDiagram.model.toJson(); 335 myDiagram.isModified = false; 336 } 337 338 function load() { 339 myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); 340 loadDiagramProperties(); // 在Model.modelData被帶入內存後執行此操作 341 } 342 343 function saveDiagramProperties() { 344 myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position); 345 } 346 347 function loadDiagramProperties(e) { 348 // 設置Diagram.initialPosition而不是Diagram.position，以處理初始化副作用 349 var pos = myDiagram.model.modelData.position; 350 if (pos) myDiagram.initialPosition = go.Point.parse(pos); 351 } 352 </script> 353 </head> 354 <body onload="init()"> 355 <div id="sample"> 356 <div style="width: 100%; display: flex; justify-content: center"> 357 <div id="myPaletteDiv" 358 style="width: 105px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div> 359 <div id="myDiagramDiv" style="flex-grow: 1; height: 620px; border: solid 1px black"></div> 360 </div> 361 <p> 362 此示例演示了用戶像鏈接節點一樣拖動鏈接的功能。當鏈接的任一端經過有效端口時，端口將突出顯示。。 363 </p> 364 <p> 365 此示例演示了用戶像鏈接節點一樣拖動鏈接的功能。當鏈接的任一端經過有效端口時，端口將突出顯示。。 366 </p> 367 <p> 368 通過設置部分或全部以下屬性可啟用鏈接拖動功能： 369 <a>DraggingTool.dragsLink</a>, <a>LinkingTool.isUnconnectedLinkValid</a>,and 370 <a>RelinkingTool.isUnconnectedLinkValid</a>. 371 </p> 372 <p> 373 請註意，Link中存在<a>Palette</a>這樣它也可以拖出來並放到主圖上。 374 因為當任何一端沒有與節點連接時鏈路不會自動路由，所以在定義該組件選項時顯式提供路由。 375 </p> 376 <p> 377 這也演示了幾個習慣修飾： 378 <a>Part.selectionAdornmentTemplate</a>, <a>Part.resizeAdornmentTemplate</a>, and 379 <a>Part.rotateAdornmentTemplate</a>. 380 </p> 381 <p> 382 最後這個例子演示了保存和恢復<a>Diagram.position</a>作為財產<a>Model.modelData</a>調用時會自動保存並恢復的對象<a>Model.toJson</a> 383 和<a>Model.fromJson</a>. 384 </p> 385 <div> 386 <div> 387 <button id="SaveButton" onclick="save()">Save</button> 388 <button onclick="load()">Load</button> 389 以JSON格式保存的圖表模型： 390 </div> 391 <textarea id="mySavedModel" style="width:100%;height:300px"> 392 { "class": "go.GraphLinksModel", 393 "linkFromPortIdProperty": "fromPort", 394 "linkToPortIdProperty": "toPort", 395 "nodeDataArray": [ 396 ], 397 "linkDataArray": [ 398 ]} 399 </textarea> 400 </div> 401 </div> 402 </body> 403 </html>
這是一個類似於AI的前端拖拽 傳輸 後臺的一個 下面的可以生成json字符串 可以用方法轉換成xml 用於後臺讀取
註:大家如果需要go.js無水印版的 可以加我QQ私聊我
Go.js 沒有中文文檔 也沒有中文demo 學起來很費勁 給大家整理一個算是詳細的文檔