JS組件系列——Gojs組件，前端圖形化插件之利器
前言：之前分享過兩篇關于流程畫圖的前端組件，使用的jsPlumb。這個組件本身還不錯，使用方便、入門簡單、輕量級，但是使用一段時間下來，發現一些弊病，比如組件不太穩定，初始進入頁面的時候連線的樣式有時會亂掉，刷新頁面之后才能恢復正常，而且連線樣式比較單一，容易讓人產生視覺疲勞，加之最近公司在大力推行所謂的“工業4.0”，除了對自動化控制要求的提高之外，對這種圖形化界面的要求也隨之提高，所以單純的jsPlumb組件效果已經不能滿足日益發展的公司業務。基于以上種種，最終找到了Gojs組件，它效果強大、api豐富，唯一的不足就是這個組件是一個收費組件，可是在天朝，噓...這是個不能說的秘密！
本文原創地址：http://www.rzrgm.cn/landeanfen/p/7910530.html
一、組件效果預覽
先來兩個炫酷點的效果
就最下面兩個效果而言，就是jsPlumb無法實現的，可是這種效果在MES系統里面是很吸引人的，尤其是一些流程性的業務，用這種效果實現讓可以一眼就感覺高大上了。并且咋一眼看上去，你根本都不相信這是一個web頁面的效果。
其他效果示例
可折疊的樹
這是圖片嗎？
竟然還可以生成圖表！
想搶visio的飯碗嗎？
更多示例可查看 官網
本文原創地址：http://www.rzrgm.cn/landeanfen/p/7910530.html
二、初次接觸
老規矩，還是先來個入門教程。
源碼下載：https://github.com/NorthwoodsSoftware/GoJS
api詳情：https://gojs.net/latest/api/index.html
示例地址：https://gojs.net/latest/samples/index.html
1、Gojs簡介
GoJS是一個功能豐富的JS庫，在Web瀏覽器和平臺上可實現自定義交互圖和復雜的可視化效果，它用自定義模板和布局組件簡化了節點、鏈接和分組等復雜的JS圖表，給用戶交互提供了許多先進的功能，如拖拽、復制、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數據綁定和模型、事務狀態和撤銷管理、調色板、概述、事件處理程序、命令和自定義操作的擴展工具系統。無需切換服務器和插件，GoJS就能實現用戶互動并在瀏覽器中完全運行，呈現HTML5 Canvas元素或SVG，也不用服務器端請求。 GoJS不依賴于任何JS庫或框架（例如bootstrap、jquery等），可與任何HTML或JS框架配合工作，甚至可以不用框架。
2、使用入門
（1）文件引用
<script src="gojs/go-debug_ok.js"></script>
可以用cdn上面的最新版本，也可以引用本地down下來的文件。如果是開發，可以引用debug版本的js，正式運行的時候引用正式的js，這個無需多講。
（2）創建畫布
隨便定義一個html元素，作為我們的畫布
<div id="myDiagramDiv" style="margin:auto;width:300px; height:300px; background-color:#ddd;"></div>
然后使用gojs的api初始化畫布
//創建畫布 var objGo = go.GraphObject.make; var myDiagram = objGo(go.Diagram, "myDiagramDiv", { //模型圖的中心位置所在坐標 initialContentAlignment: go.Spot.Center, //允許用戶操作圖表的時候使用Ctrl-Z撤銷和Ctrl-Y重做快捷鍵 "undoManager.isEnabled": true, //不運行用戶改變圖表的規模 allowZoom: false, //畫布上面是否出現網格 "grid.visible": true, //允許在畫布上面雙擊的時候創建節點 "clickCreatingTool.archetypeNodeData": { text: "Node" }, //允許使用ctrl+c、ctrl+v復制粘貼 "commandHandler.copiesTree": true, //允許使用delete鍵刪除節點 "commandHandler.deletesTree": true, // dragging for both move and copy "draggingTool.dragsTree": true, });
官方示例用的$符號作為變量，博主覺得$符號太敏感，還是換個名字吧~以上幾個參數都是博主摘選的，更多初始化畫布的參數請參考官方api下圖：
（3）創建模型數據（Model）
接著上面的代碼，我們增加如下幾行
var myModel = objGo(go.Model);//創建Model對象 // model中的數據每一個js對象都代表著一個相應的模型圖中的元素 myModel.nodeDataArray = [ { key: "工廠" }, { key: "車間" }, { key: "工人" }, { key: "崗位" }, ]; myDiagram.model = myModel; //將模型數據綁定到畫布圖上
效果預覽
（4）創建節點（Node）
上面有了畫布和節點數據，只是有了一個雛形，但是還沒有任何的圖形化效果。我們加入一些效果試試
在gojs里面給我們提供了幾種模型節點的可選項：
我們增加如下一段代碼
// 定義一個簡單的節點模板 myDiagram.nodeTemplate = objGo(go.Node, "Horizontal",//橫向布局的面板 // 節點淡藍色背景 { background: "#44CCFF" }, objGo(go.Shape, "RoundedRectangle", //定義形狀，這是圓角矩形 { /* Shape的參數。寬高顏色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' }, // 綁定 Shape.figure屬性為Node.data.fig的值，Model對象可以通過Node.data.fig 獲取和設置Shape.figure（修改形狀） new go.Binding("figure", "fig"), new go.Binding('fill', 'fill2')), objGo(go.TextBlock, "Default Text", // 默認文本 // 設置字體大小顏色以及邊距 { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, //綁定TextBlock.text 屬性為Node.data.name的值，Model對象可以通過Node.data.name獲取和設置TextBlock.text new go.Binding("text", "name")) ); var myModel = objGo(go.Model);//創建Model對象 // model中的數據每一個js對象都代表著一個相應的模型圖中的元素 myModel.nodeDataArray = [ { name: "工廠", fig: 'YinYang', fill2: 'blue' }, { name: "車間", fig: 'Peace', fill2: 'red' }, { name: "工人", fig: 'NotAllowed', fill2: 'green' }, { name: "崗位", fig: 'Fragile', fill2: 'yellow' }, ]; myDiagram.model = myModel; //將模型數據綁定到畫布圖上
代碼釋疑：以上我們給畫布對象定義了兩種節點模板，一種是文本節點，另一種是形狀節點（Node）。在形狀節點中，我們定義了數據模型的通用節點樣式，就是這一段代碼 { /* Shape的參數。寬高顏色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' }, 然后通過 new go.Binding("figure", "fig") 方法將模板里面的屬性映射到數據實例中，比如這里模板里面的figure屬性定義的是Club，如果在我們的數據里面定義fig屬性，那么它就會覆蓋模板里面的figure的默認值。同樣，fill和fill2也是通過同樣的原理去區別模板中的樣式和實例中的實際樣式的！
注：更多figure屬性的取值詳見 這里
效果如下
由此可見我們數據里面的屬性會覆蓋模板的原始屬性，如果是新增的節點，由于沒有自定義數據屬性，所以呈現到界面上面的時候就是模板里面的原生樣式！
（5）節點連線
有了上面的基礎，我們可以在畫布上面畫出我們想要的圖形效果了，可是還沒有連線。我們知道連線是建立在節點模型的上面的，于是乎我們的Model又分為了以下三種類型：
- Model：最基本的（不帶連線，如上面的例子）
- GraphLinksModel ：高級點的動態連線圖
- TreeModel：樹形圖的模型（從例子看好像用的不多）
GraphLinksModel中為model.nodeDataArray提供model.linkDataArray為node節點連線保存數據模型信息，其實也是的一個JSON數組對象，每個線條都有兩個屬性 “to” 和 “from” 即Node節點的“key”值，兩個屬性代表兩個key表示兩個節點間的連線。
我們上面已經寫過最基本的Model的例子了，我們再來個帶連線的Model的示例
var myModel = objGo(go.GraphLinksModel); myModel.nodeDataArray = [ { key: "aaa" ,name: "工廠" }, { key: "bbb" ,name: "車間"}, { key: "ccc" ,name: "車間" } ]; myModel.linkDataArray = [ { from: "aaa", to: "bbb" }, { from: "bbb", to: "ccc" } ]; myDiagram.model = myModel;
效果如下
學習了Model、GraphLinksModel，還剩下一種TreeModel樹節點的模型，這個博主不打算做詳細介紹，有興趣可以直接查看官網。
三、綜合效果
關于綜合效果，博主不打算將gojs的api逐個翻個遍了，這樣太耗時間，傷不起，只是將官方示例中的部分源碼截取出來供大家參考。有需要的再細究！
1、自定義流程的使用
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Draggable Link</title> <meta name="description" content="Drag a link to reconnect it. Nodes have custom Adornments for selection, resizing, and reshaping." /> <!-- Copyright 1998-2017 by Northwoods Software Corporation. --> <meta charset="UTF-8"> <script src="../../gojs/go-debug.js"></script> <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var objGo = go.GraphObject.make; // for conciseness in defining templates myDiagram = objGo(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element { grid: objGo(go.Panel, "Grid", objGo(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }), objGo(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }), objGo(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }), objGo(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 }) ), allowDrop: true, // must be true to accept drops from the Palette "draggingTool.dragsLink": true, "draggingTool.isGridSnapEnabled": true, "linkingTool.isUnconnectedLinkValid": true, "linkingTool.portGravity": 20, "relinkingTool.isUnconnectedLinkValid": true, "relinkingTool.portGravity": 20, "relinkingTool.fromHandleArchetype": objGo(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }), "relinkingTool.toHandleArchetype": objGo(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }), "linkReshapingTool.handleArchetype": objGo(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }), rotatingTool: objGo(TopRotatingTool), // defined below "rotatingTool.snapAngleMultiple": 15, "rotatingTool.snapAngleEpsilon": 15, "undoManager.isEnabled": true }); // when the document is modified, add a "*" to the title and enable the "Save" button myDiagram.addDiagramListener("Modified", function(e) { var button = document.getElementById("SaveButton"); if (button) button.disabled = !myDiagram.isModified; var idx = document.title.indexOf("*"); if (myDiagram.isModified) { if (idx < 0) document.title += "*"; } else { if (idx >= 0) document.title = document.title.substr(0, idx); } }); // Define a function for creating a "port" that is normally transparent. // The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect // and where the port is positioned on the node, and the boolean "output" and "input" arguments // control whether the user can draw links from or to the port. function makePort(name, spot, output, input) { // the port is basically just a small transparent square return objGo(go.Shape, "Circle", { fill: null, // not seen, by default; set to a translucent gray by showSmallPorts, defined below stroke: null, desiredSize: new go.Size(7, 7), alignment: spot, // align the port on the main Shape alignmentFocus: spot, // just inside the Shape portId: name, // declare this object to be a "port" fromSpot: spot, toSpot: spot, // declare where links may connect at this port fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here cursor: "pointer" // show a different cursor to indicate potential link point }); } var nodeSelectionAdornmentTemplate = objGo(go.Adornment, "Auto", objGo(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }), objGo(go.Placeholder) ); var nodeResizeAdornmentTemplate = objGo(go.Adornment, "Spot", { locationSpot: go.Spot.Right }, objGo(go.Placeholder), objGo(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objGo(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objGo(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objGo(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objGo(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objGo(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objGo(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objGo(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }) ); var nodeRotateAdornmentTemplate = objGo(go.Adornment, { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" }, objGo(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }), objGo(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }) ); myDiagram.nodeTemplate = objGo(go.Node, "Spot", { locationSpot: go.Spot.Center }, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate }, { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate }, { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate }, new go.Binding("angle").makeTwoWay(), // the main object is a Panel that surrounds a TextBlock with a Shape objGo(go.Panel, "Auto", { name: "PANEL" }, new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), objGo(go.Shape, "Rectangle", // default figure { portId: "", // the default port: if no spot on link data, use closest side fromLinkable: true, toLinkable: true, cursor: "pointer", fill: "white", // default color strokeWidth: 2 }, new go.Binding("figure"), new go.Binding("fill")), objGo(go.TextBlock, { font: "bold 11pt Helvetica, Arial, sans-serif", margin: 8, maxSize: new go.Size(160, NaN), wrap: go.TextBlock.WrapFit, editable: true }, new go.Binding("text").makeTwoWay()) ), // four small named ports, one on each side: makePort("T", go.Spot.Top, false, true), makePort("L", go.Spot.Left, true, true), makePort("R", go.Spot.Right, true, true), makePort("B", go.Spot.Bottom, true, false), { // handle mouse enter/leave events to show/hide the ports mouseEnter: function(e, node) { showSmallPorts(node, true); }, mouseLeave: function(e, node) { showSmallPorts(node, false); } } ); function showSmallPorts(node, show) { node.ports.each(function(port) { if (port.portId !== "") { // don't change the default port, which is the big shape port.fill = show ? "rgba(0,0,0,.3)" : null; } }); } var linkSelectionAdornmentTemplate = objGo(go.Adornment, "Link", objGo(go.Shape, // isPanelMain declares that this Shape shares the Link.geometry { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // use selection object's strokeWidth ); myDiagram.linkTemplate = objGo(go.Link, // the whole link panel { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate }, { relinkableFrom: true, relinkableTo: true, reshapable: true }, { routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver, corner: 5, toShortLength: 4 }, new go.Binding("points").makeTwoWay(), objGo(go.Shape, // the link path shape { isPanelMain: true, strokeWidth: 2 }), objGo(go.Shape, // the arrowhead { toArrow: "Standard", stroke: null }), objGo(go.Panel, "Auto", new go.Binding("visible", "isSelected").ofObject(), objGo(go.Shape, "RoundedRectangle", // the link shape { fill: "#F8F8F8", stroke: null }), objGo(go.TextBlock, { textAlign: "center", font: "10pt helvetica, arial, sans-serif", stroke: "#919191", margin: 2, minSize: new go.Size(10, NaN), editable: true }, new go.Binding("text").makeTwoWay()) ) ); load(); // load an initial diagram from some JSON text // initialize the Palette that is on the left side of the page myPalette = objGo(go.Palette, "myPaletteDiv", // must name or refer to the DIV HTML element { maxSelectionCount: 1, nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram linkTemplate: // simplify the link template, just in this Palette objGo(go.Link, { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center, // to line up the Link in the same manner we have to pretend the Link has the same location spot locationSpot: go.Spot.Center, selectionAdornmentTemplate: objGo(go.Adornment, "Link", { locationSpot: go.Spot.Center }, objGo(go.Shape, { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }), objGo(go.Shape, // the arrowhead { toArrow: "Standard", stroke: null }) ) }, { routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver, corner: 5, toShortLength: 4 }, new go.Binding("points"), objGo(go.Shape, // the link path shape { isPanelMain: true, strokeWidth: 2 }), objGo(go.Shape, // the arrowhead { toArrow: "Standard", stroke: null }) ), model: new go.GraphLinksModel([ // specify the contents of the Palette { text: "Start", figure: "Circle", fill: "#00AD5F" }, { text: "Step" }, { text: "DB", figure: "Database", fill: "lightgray" }, { text: "???", figure: "Diamond", fill: "lightskyblue" }, { text: "End", figure: "Circle", fill: "#CE0620" }, { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" } ], [ // the Palette also has a disconnected Link, which the user can drag-and-drop { 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)]) } ]) }); } function TopRotatingTool() { go.RotatingTool.call(this); } go.Diagram.inherit(TopRotatingTool, go.RotatingTool); /** @override */ TopRotatingTool.prototype.updateAdornments = function(part) { go.RotatingTool.prototype.updateAdornments.call(this, part); var adornment = part.findAdornment("Rotating"); if (adornment !== null) { adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // above middle top } }; /** @override */ TopRotatingTool.prototype.rotate = function(newangle) { go.RotatingTool.prototype.rotate.call(this, newangle + 90); }; // end of TopRotatingTool class // Show the diagram's model in JSON format that the user may edit function save() { saveDiagramProperties(); // do this first, before writing to JSON document.getElementById("mySavedModel").value = myDiagram.model.toJson(); myDiagram.isModified = false; } function load() { myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); loadDiagramProperties(); // do this after the Model.modelData has been brought into memory } function saveDiagramProperties() { myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position); } function loadDiagramProperties(e) { // set Diagram.initialPosition, not Diagram.position, to handle initialization side-effects var pos = myDiagram.model.modelData.position; if (pos) myDiagram.initialPosition = go.Point.parse(pos); } </script> </head> <body onload="init()"> <div id="sample"> <div style="width:100%; white-space:nowrap;"> <span style="display: inline-block; vertical-align: top; width:105px"> <div id="myPaletteDiv" style="border: solid 1px black; height: 620px"></div> </span> <span style="display: inline-block; vertical-align: top; width:80%"> <div id="myDiagramDiv" style="border: solid 1px black; height: 620px"></div> </span> </div> <p> This sample demonstrates the ability for the user to drag around a Link as if it were a Node. When either end of the link passes over a valid port, the port is highlighted. </p> <p> The link-dragging functionality is enabled by setting some or all of the following properties: <a>DraggingTool.dragsLink</a>, <a>LinkingTool.isUnconnectedLinkValid</a>, and <a>RelinkingTool.isUnconnectedLinkValid</a>. </p> <p> Note that a Link is present in the <a>Palette</a> so that it too can be dragged out and onto the main Diagram. Because links are not automatically routed when either end is not connected with a Node, the route is provided explicitly when that Palette item is defined. </p> <p> This also demonstrates several custom Adornments: <a>Part.selectionAdornmentTemplate</a>, <a>Part.resizeAdornmentTemplate</a>, and <a>Part.rotateAdornmentTemplate</a>. </p> <p> Finally this sample demonstrates saving and restoring the <a>Diagram.position</a> as a property on the <a>Model.modelData</a> object that is automatically saved and restored when calling <a>Model.toJson</a> and <a>Model.fromJson</a>. </p> <div> <div> <button id="SaveButton" onclick="save()">Save</button> <button onclick="load()">Load</button> Diagram Model saved in JSON format: </div> <textarea id="mySavedModel" style="width:100%;height:300px"> { "class": "go.GraphLinksModel", "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ ], "linkDataArray": [ ]} </textarea> </div> </div> </body> </html>
效果如下：
建議各位copy代碼，在本地看到效果，然后再根據實際需求去研究它的api，這樣才不會太盲目而花費太多時間。
2、工業流程圖
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Process Flow</title> <meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." /> <!-- Copyright 1998-2017 by Northwoods Software Corporation. --> <meta charset="UTF-8"> <script src="../../gojs/go-debug.js"></script> <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make; // for more concise visual tree definitions myDiagram = $(go.Diagram, "myDiagramDiv", { "grid.visible": true, "grid.gridCellSize": new go.Size(30, 20), "draggingTool.isGridSnapEnabled": true, "resizingTool.isGridSnapEnabled": true, "rotatingTool.snapAngleMultiple": 90, "rotatingTool.snapAngleEpsilon": 45, "undoManager.isEnabled": true }); // when the document is modified, add a "*" to the title and enable the "Save" button myDiagram.addDiagramListener("Modified", function(e) { var button = document.getElementById("SaveButton"); if (button) button.disabled = !myDiagram.isModified; var idx = document.title.indexOf("*"); if (myDiagram.isModified) { if (idx < 0) document.title += "*"; } else { if (idx >= 0) document.title = document.title.substr(0, idx); } }); myDiagram.nodeTemplateMap.add("Process", $(go.Node, "Auto", { locationSpot: new go.Spot(0.5, 0.5), locationObjectName: "SHAPE", resizable: true, resizeObjectName: "SHAPE" }, new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape, "Cylinder1", { name: "SHAPE", strokeWidth: 2, fill: $(go.Brush, "Linear", { start: go.Spot.Left, end: go.Spot.Right, 0: "gray", 0.5: "white", 1: "gray" }), minSize: new go.Size(50, 50), portId: "", fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides }, new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)), $(go.TextBlock, { alignment: go.Spot.Center, textAlign: "center", margin: 5, editable: true }, new go.Binding("text").makeTwoWay()) )); myDiagram.nodeTemplateMap.add("Valve", $(go.Node, "Vertical", { locationSpot: new go.Spot(0.5, 1, 0, -21), locationObjectName: "SHAPE", selectionObjectName: "SHAPE", rotatable: true }, new go.Binding("angle").makeTwoWay(), new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.TextBlock, { alignment: go.Spot.Center, textAlign: "center", margin: 5, editable: true }, new go.Binding("text").makeTwoWay(), // keep the text upright, even when the whole node has been rotated upside down new go.Binding("angle", "angle", function(a) { return a === 180 ? 180 : 0; }).ofObject()), $(go.Shape, { name: "SHAPE", geometryString: "F1 M0 0 L40 20 40 0 0 20z M20 10 L20 30 M12 30 L28 30", strokeWidth: 2, fill: $(go.Brush, "Linear", { 0: "gray", 0.35: "white", 0.7: "gray" }), portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35) }) )); myDiagram.linkTemplate = $(go.Link, { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7 }, new go.Binding("points").makeTwoWay(), // mark each Shape to get the link geometry with isPanelMain: true $(go.Shape, { isPanelMain: true, stroke: "black", strokeWidth: 5 }), $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 3 }), $(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 1, name: "PIPE", strokeDashArray: [10, 10] }), $(go.Shape, { toArrow: "Triangle", fill: "black", stroke: null }) ); load(); loop(); // animate some flow through the pipes } function loop() { var diagram = myDiagram; setTimeout(function() { var oldskips = diagram.skipsUndoManager; diagram.skipsUndoManager = true; diagram.links.each(function(link) { var shape = link.findObject("PIPE"); var off = shape.strokeDashOffset - 2; shape.strokeDashOffset = (off <= 0) ? 20 : off; }); diagram.skipsUndoManager = oldskips; loop(); }, 100); } function save() { document.getElementById("mySavedModel").value = myDiagram.model.toJson(); myDiagram.isModified = false; } function load() { myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); } </script> </head> <body onload="init()"> <div id="sample"> <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:500px"></div> <p> A <em>process flow diagram</em> is commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment. A simple SCADA diagram, with animation of the flow along the pipes, is implemented here. </p> <p> The diagram displays the background grid layer by setting <b>grid.visible</b> to true, and also allows snapping to the grid using <a>DraggingTool.isGridSnapEnabled</a>, <a>ResizingTool.isGridSnapEnabled</a>, and <a>RotatingTool.snapAngleMultiple</a> alongside <a>RotatingTool.snapAngleEpsilon</a>. </p> <p> The diagram also uses the <b>loop</b> function to animate the links by adjusting the <a>Shape.strokeDashOffset</a> every 100 ms. </p> <div> <div> <button id="SaveButton" onclick="save()">Save</button> <button onclick="load()">Load</button> Diagram Model saved in JSON format: </div> <textarea id="mySavedModel" style="width:100%;height:300px"> { "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":"P1", "category":"Process", "pos":"150 120", "text":"Process"}, {"key":"P2", "category":"Process", "pos":"330 320", "text":"Tank"}, {"key":"V1", "category":"Valve", "pos":"270 120", "text":"V1"}, {"key":"P3", "category":"Process", "pos":"150 420", "text":"Pump"}, {"key":"V2", "category":"Valve", "pos":"150 280", "text":"VM", "angle":270}, {"key":"V3", "category":"Valve", "pos":"270 420", "text":"V2", "angle":180}, {"key":"P4", "category":"Process", "pos":"450 140", "text":"Reserve Tank"}, {"key":"V4", "category":"Valve", "pos":"390 60", "text":"VA"}, {"key":"V5", "category":"Valve", "pos":"450 260", "text":"VB", "angle":90} ], "linkDataArray": [ {"from":"P1", "to":"V1"}, {"from":"P3", "to":"V2"}, {"from":"V2", "to":"P1"}, {"from":"P2", "to":"V3"}, {"from":"V3", "to":"P3"}, {"from":"V1", "to":"V4"}, {"from":"V4", "to":"P4"}, {"from":"V1", "to":"P2"}, {"from":"P4", "to":"V5"}, {"from":"V5", "to":"P2"} ]} </textarea> </div> </div> </body> </html>
四、總結
本文根據js的一些基礎用法做了簡單介紹，今天就先到這里，以后有問題了再來跟大家分享。如果你的項目里面也有這種業務需求，可以用起來試試！需要說明一點，如果您的公司不缺錢，建議使用正版授權的組件，畢竟尊重作者的勞動成果很重要！
本文原創出處：http://www.rzrgm.cn/landeanfen/
歡迎各位轉載，但是未經作者本人同意，轉載文章之后必須在文章頁面明顯位置給出作者和原文連接，否則保留追究法律責任的權利
浙公網安備 33010602011771號