javascript
GoJS 使用笔记
Python微信訂餐小程序課程視頻
https://edu.csdn.net/course/detail/36074
Python實戰(zhàn)量化交易理財系統(tǒng)
https://edu.csdn.net/course/detail/35475
作為商業(yè)軟件，GoJs很容易使用，文檔也很完備，不過項目中沒有時間系統(tǒng)地按照文檔學習，總是希望快速入門使用，所以將項目中遇到的問題精簡一下，希望對后來者有些幫助。
開始使用
這里先展示一個最簡單的例子，說明GoJs的使用。
html> <html><head><script src="https://unpkg.com/gojs/release/go-debug.js">script> head><body><div id="myDiagramDiv" style="width:1200px; height:850px; background-color: #DAE4E4;">div><script>var $ = go.GraphObject.make;myDiagram =$(go.Diagram, "myDiagramDiv",{"undoManager.isEnabled": true});myDiagram.add($(go.Node, "Auto",$(go.Shape, "RoundedRectangle",{fill: $(go.Brush, "Linear",{ 0.0: "Violet", 1.0: "Lavender" })}),$(go.TextBlock, "測試文本!",{ margin: 5 }),$("Button", {alignment: go.Spot.Right,alignmentFocus: go.Spot.Left,click: function(e,obj){ console.log(e); console.log(obj);alert(obj);}},$(go.TextBlock, "+", // the Button content{ font: "bold 8pt sans-serif" }))));script> body>html>首先是引用GoJs庫，可以有多個途徑下載，可以通過npm，nuget等包管理工具，也可以直接下載。我們這里使用unpkg的引用。
然后就是使用 go.GraphObject.make創(chuàng)建圖形和圖形中的元素。這里先將 go.GraphObject.make簡化定義為，方便代碼的編寫與閱讀，注意這不是必須的，也可以使用，方便代碼的編寫與閱讀，注意這不是必須的，也可以使用，方便代碼的編寫與閱讀，注意這不是必須的，也可以使用$或者其它簡化方式。結果如下：
這里的關鍵是go.GraphObject.make的使用，下面重點介紹這個函數。
使用go.GraphObject.make創(chuàng)建對象
一個圖形可以看做由節(jié)點和連線組成，在GoJs中，圖形元素是GraphObject，我們可以使用代碼創(chuàng)建節(jié)點：
var node = new go.Node(go.Panel.Auto);var shape = new go.Shape();shape.figure = "RoundedRectangle";shape.fill = "lightblue";node.add(shape);var textblock = new go.TextBlock();textblock.text = "你好!";textblock.margin = 5;node.add(textblock);diagram.add(node);這種辦法屬于常規(guī)的編程方法，容易理解，但是需要定義大量的中間變量，如果需要創(chuàng)建的元素很多，就會感覺有些冗余。因此GoJs使用創(chuàng)建函數go.GraphObject.make簡化創(chuàng)建過程。上面的代碼寫為：
var $ = go.GraphObject.make;diagram.add($(go.Node, "Auto",$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),$(go.TextBlock, "你好!", { margin: 5 })));可讀性好多了。 go.GraphObject.make的第一個參數是需要創(chuàng)建的類型，通常是GraphObject的子類，后續(xù)的參數可以有多個，可以是以下類型：
- 屬性/值對的JS簡單對象，說明被創(chuàng)建對象的屬性。
- GraphObject，添加到被創(chuàng)建對象中的子對象，比如，上面的代碼中在Node中增加Shape和TextBlock。
- 字符串，針對特定對象的屬性，比如對于TextBlock，就是設置文本值
- 其它可能的Js對象，針對創(chuàng)建對象的不同。
Binding
基本用法
Binding顧名思義是綁定，將模型的屬性與GraphObject對象的屬性進行綁定。比如，有如下模型：
{ key: 23, say: "你好!" }我們需要將say屬性綁定到文本對象的text屬性，可以使用下面的代碼：
var $ = go.GraphObject.make;myDiagram.nodeTemplate =$(go.Node, "Auto",. . .$(go.TextBlock, new go.Binding("text", "say")))轉換函數
如果我們希望綁定的屬性進行轉換，可以使用轉換函數，比如：
new go.Binding("text", "say", function(v) { return "我說: " + v; })單向綁定和雙向綁定
單向綁定時只能是模型的屬性改變GraphObject對象的屬性，而雙向綁定時，GraphObject對象的屬性的改變可以改變模型的屬性。雙向綁定的寫法是這樣的：
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)當loc轉換為location時，使用go.Point.parse函數，當location轉換為loc時，使用go.Point.stringify函數。
GraphObject
GraphObject是抽象類，不能直接創(chuàng)建，GraphObject具有下面的一些特性。
尺寸
GraphObject有關尺寸的屬性如下：
- desiredSize,minSize和maxSize。width和height會轉換為desiredSize。
- angle和scale
- stretch
GraphObject在Panel中繪制完成后，會有如下的只讀屬性：
- nuturalBounds：表示基本尺寸，不受轉換的影響
- measureBounds： 表示在包含它的Panel中的尺寸
- actualBounds：表示在包含它的Panel中的實際尺寸
頂層GraphObject一定是Part
Part是GraphObject的子類，表示頂層元素。頂層元素一定是Part，包括Node,Linke,Group以及Adornment，下面的屬性用于獲取相關的GraphObject：
- panel：獲取包含這個GraphObject的Panel
- part: 獲取這個GraphObject所在的Part。
- layer: 獲取這個GraphObject所在的Layer。
- diagram:獲取所在的Diagram。
Model
模型中保存了圖形顯示的數據，描述基本實體、它們的屬性以及之間的關系。模型中的數據要盡量簡單，可以很容易地序列化為JSON或者XML格式。有兩種模型TreeModel和GraphLinksModel，前者保存樹狀結構的數據。模型中key值用來標識對象，必須是唯一的，下面是Model的使用實例:
myDiagram.model = new go.TreeModel();myDiagram.model.nodeDataArray = [{ "key": 0, "text": "Mind Map", "loc": "0 0" },{ "key": 1, "parent": 0, "text": "Getting more time", "brush": "skyblue", "dir": "right", "loc": "77 -22" },{ "key": 11, "parent": 1, "text": "Wake up early", "brush": "skyblue", "dir": "right", "loc": "200 -48" },{ "key": 12, "parent": 1, "text": "Delegate", "brush": "skyblue", "dir": "right", "loc": "200 -22" }];這是樹形結構的數據。如果保存一般的圖結構，需要使用GraphLinksModel。
自定義Node模板
個人認為方便的自定義模板是GoJs的強大功能之一，使用nodeTemplateMap可以很方便地定義各種類型的模板，只要在數據模型中指定模板的名稱（使用category），就可以顯示相應的圖形。nodeTemplateMap的使用方法如下：
myDiagram.nodeTemplateMap.add("End",part);這里，part就是顯示的模板，比如，下面是一個part的定義，顯示狀態(tài)圖的開始節(jié)點：
var partStart= $(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),$(go.Shape, "Circle",{fill: "#52ce60", /* green */stroke: null,portId: "",fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,cursor: "pointer"}),$(go.TextBlock, "開始",{font: "bold 16pt helvetica, bold arial, sans-serif",stroke: "whitesmoke"}));對應的數據如下：
{"id":-1, "loc":"155 -138", "category":"Start"}數據中，category指定了模板類型，loc綁定到圖元的位置，這里是雙向綁定，也就是圖元位置的變化，會改變數據模型中的數據。
如果只定義通用的模板，可以使用：
myDiagram.nodeTemplate=part;這種情況下，沒有指定category的數據都采用缺省模板顯示。
自定義選中模板
當一個節(jié)點被選中時，我們希望使用不同的模板顯示，比如，狀態(tài)圖中，一個被選中的節(jié)點中會出現(xiàn)添加鏈接的按鈕，選中前：
選中后：
如果為使用缺省模板的節(jié)點定義選中模板，可以直接定義:
如果需要為使用nodeTemplateMap添加的自定義模板定義選中模板，可以使用如下方法:
var partStart= $(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),$(go.Shape, "Circle",{fill: "#52ce60", /* green */stroke: null,portId: "",fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,cursor: "pointer"}),$(go.TextBlock, "開始",{font: "bold 16pt helvetica, bold arial, sans-serif",stroke: "whitesmoke"}));partStart.selectionAdornmentTemplate =$(go.Adornment, "Spot",$(go.Panel, "Auto",$(go.Shape, "RoundedRectangle", roundedRectangleParams,{ fill: null, stroke: "#7986cb", strokeWidth: 3 }),$(go.Placeholder) // a Placeholder sizes itself to the selected Node),// the button to create a "next" node, at the top-right corner$("Button",{alignment: go.Spot.TopRight,click: addNodeAndLink // this function is defined below},$(go.Shape, "PlusLine", { width: 6, height: 6 })));myDiagram.nodeTemplateMap.add("Start",partStart);上面的代碼中，需要先定義模板的part，然后增加選中模板，最后，使用nodeTemplateMap.add方法進行添加。
節(jié)點和連接的上下文菜單
對于節(jié)點和菜單的缺省模板，可以直接使用contextMenu定義上下文菜單，比如:
myDiagram.nodeTemplate.contextMenu =$("ContextMenu",$("ContextMenuButton",$(go.TextBlock, "顯示屬性"),{ click: function (e, obj) { var data = myDiagram.model.findNodeDataForKey(obj.part.key);alert(data.complex.p1); } }));對于使用nodeTemplateMap定義的自定義模板，需要在模板上先定義上下文菜單，然后再將模板添加到nodeTemplateMap中，下面的代碼定義了狀態(tài)圖中結束節(jié)點的上下文菜單：
var partEnd=$(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),$(go.Shape, "Circle",{fill: "maroon",stroke: null,portId: "",fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,cursor: "pointer"}),$(go.Shape, "Circle", { fill: null, desiredSize: new go.Size(65, 65), strokeWidth: 2, stroke: "whitesmoke" }),$(go.TextBlock, "結束",{font: "bold 16pt helvetica, bold arial, sans-serif",stroke: "whitesmoke"}));partEnd.contextMenu=$("ContextMenu",$("ContextMenuButton",$(go.TextBlock, "顯示屬性"),{ click: function (e, obj) { var data = myDiagram.model.findNodeDataForKey(obj.part.key);alert(data.complex.p1); } })); myDiagram.nodeTemplateMap.add("End",partEnd);連接的上下文菜單定義與節(jié)點相同，示例代碼如下：
myDiagram.linkTemplate.contextMenu =$("ContextMenu",$("ContextMenuButton",$(go.TextBlock, "顯示屬性"),{ click: function (e, obj) { alert(obj.part.data.expression); } }));節(jié)點和連接關聯(lián)數據的訪問
很多圖形編輯器不容易使用的一個原因是編輯器的數據模型與業(yè)務的數據模型很難匹配。業(yè)務數據模型經常比較復雜，不僅僅是鍵值對能夠完全表示的，很多情況下需要使用復雜的對象描述。GoJs在這一點上做得非常好，圖形相關的數據模型可以和圖形進行綁定，并且數據模型中可以包括復雜的數據對象，比如下面的節(jié)點中包括了復合的對象：
{"id":-1, "loc":"155 -138", "category":"Start","complex":{"p1":"自定義屬性"}}對象的讀取也不復雜，在訪問節(jié)點數據的示例代碼如下：
myDiagram.nodeTemplate.contextMenu =$("ContextMenu",$("ContextMenuButton",$(go.TextBlock, "顯示屬性"),{ click: function (e, obj) { var data = myDiagram.model.findNodeDataForKey(obj.part.key);alert(data.complex.p1); } }));訪問連接數據的示例代碼如下：
myDiagram.linkTemplate.contextMenu =$("ContextMenu",$("ContextMenuButton",$(go.TextBlock, "顯示屬性"),{ click: function (e, obj) { console.log(e);console.log(obj.part);alert(obj.part.data.expression); } }));GoJs的命令
GoJs的命令，比如刪除、重做、取消等等通過類CommandHandler實現(xiàn)。命令可以通過代碼執(zhí)行，也可以通過快捷鍵執(zhí)行。下面的代碼執(zhí)行undo操作：
myDiagram.commandHandler.undo();下面是GoJs常用的命令和對應的快捷鍵：
- Del 或者 Backspace 激活 CommandHandler.deleteSelection，刪除
- Ctrl-X 或者 Shift-Del 激活 CommandHandler.cutSelection，剪切
- Ctrl-C 或者 Ctrl-Insert 激活 CommandHandler.copySelection，拷貝
- Ctrl-V 或者 Shift-Insert 激活 CommandHandler.pasteSelection，粘貼
- Ctrl-A 激活 CommandHandler.selectAll，全選
- Ctrl-Z 或者 Alt-Backspace 激活 CommandHandler.undo，取消
- Ctrl-Y 或者 Alt-Shift-Backspace 激活 CommandHandler.redo，重做
- 空格鍵 激活 CommandHandler.scrollToPart，滾動到部件
-
- （減號）激活CommandHandler.decreaseZoom，縮小zoom
-
- （加號）激活 CommandHandler.increaseZoom，放大zoom
- Ctrl-0 激活 CommandHandler.resetZoom ，重置zoom
- Shift-Z 激活 CommandHandler.zoomToFit，設置zoom到適合圖形大小
- Ctrl-G 激活 CommandHandler.groupSelection , 組合
- Ctrl-Shift-G 激活 CommandHandler.ungroupSelection，取消組合
- F2 激活 CommandHandler.editTextBlock，編輯
- Esc 激活 CommandHandler.stopCommand，取消命令
GoJs 上下文菜單
前面介紹了節(jié)點和鏈接的上下文菜單，在圖形的背景上也可以設置上下文菜單，設置方法很簡單，直接在背景的contextMenu上設置就可以了，示例代碼如下：
myDiagram.contextMenu =GO("ContextMenu",GO("ContextMenuButton",GO(go.TextBlock, "撤銷"),{click: function (e, obj) {myDiagram.commandHandler.undo();}}));可以對ContextMenuButton設置尺寸，比如，增加寬和高的屬性：
GO("ContextMenuButton",GO(go.TextBlock, "撤銷"),{width: 160, height: 120, click: function (e, obj) {myDiagram.commandHandler.undo();}}),也可以為ContextMenu設置屬性，添加完菜單按鈕后面，增加屬性設置：
myDiagram.contextMenu =GO("ContextMenu",GO("ContextMenuButton",GO(go.TextBlock, "撤銷"),{click: function (e, obj) {myDiagram.commandHandler.undo();}}),GO("ContextMenuButton",GO(go.TextBlock, "重做"),{click: function (e, obj) {myDiagram.commandHandler.redo();}}),{width:200});GoJs 生成圖片并回傳服務器
GoJs提供在客戶端生成流程圖的blob數據，然后通過瀏覽器進行下載，這種方式不需要服務端的支持，示例代碼如下：
myDiagram.makeImageData({ returnType: "blob", scale: 3, detail: 0.9, callback: saveBlobToServer});這里生成的blob數據會由自定義的回調函數處理，在回調函數中，可以編寫通過瀏覽器的下載代碼，或者將流程圖數據回傳到服務器的代碼。這里，我們希望將圖片回傳服務器進行保存：
function saveBlobToServer(blob) {var fd = new FormData();fd.append('fname', 'myBlobFile.png');fd.append('data', blob);$.ajax({type: 'POST',url: root + 'Upload/SaveImage',data: fd,processData: false,contentType: false}).done(function (data) {if (!data) alert("保存完成");else alert(data);});}服務器端使用Asp.Net Core：
[HttpPost]public IActionResult SaveImage(){var files = Request.Form.Files;var fn = Request.Form["fname"];if (files.Count > 0){var pic = files[0];var fileName = fn;// Path.Combine(rootpath, pic.FileName);if (System.IO.File.Exists(fileName)) System.IO.File.Delete(fileName);using (var stream = new FileStream(fileName, FileMode.CreateNew)){pic.CopyTo(stream);}}return Content("");}總結
- 上一篇： nginx+tomcat8+memcac
- 下一篇： gradle idea java ssm