作為商業軟體，GoJs很容易使用，檔案也很完備，不過專案中沒有時間系統地按照檔案學習，總是希望快速入門使用，所以將專案中遇到的問題精簡一下，希望對后來者有些幫助，

開始使用

這里先展示一個最簡單的例子，說明GoJs的使用，

<!DOCTYPE html> <!-- HTML5 document type -->
<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創建圖形和圖形中的元素，這里先將 go.GraphObject.make簡化定義為$，方便代碼的撰寫與閱讀，注意這不是必須的，也可以使用$$或者其它簡化方式，結果如下：

這里的關鍵是go.GraphObject.make的使用，下面重點介紹這個函式，

使用go.GraphObject.make創建物件

一個圖形可以看做由節點和連線組成，在GoJs中，圖形元素是GraphObject，我們可以使用代碼創建節點：

  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);

這種辦法屬于常規的編程方法，容易理解，但是需要定義大量的中間變數，如果需要創建的元素很多，就會感覺有些冗余，因此GoJs使用創建函式go.GraphObject.make簡化創建程序，上面的代碼寫為：

  var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "你好!", { margin: 5 })
    ));

可讀性好多了， go.GraphObject.make的第一個引數是需要創建的型別，通常是GraphObject的子類，后續的引數可以有多個，可以是以下型別：

屬性/值對的JS簡單物件，說明被創建物件的屬性，
GraphObject，添加到被創建物件中的子物件，比如，上面的代碼中在Node中增加Shape和TextBlock，
字串，針對特定物件的屬性，比如對于TextBlock，就是設定文本值
其它可能的Js物件，針對創建物件的不同，

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是抽象類，不能直接創建，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的定義，顯示狀態圖的開始節點：

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的資料都采用預設模板顯示，

自定義選中模板

當一個節點被選中時，我們希望使用不同的模板顯示，比如，狀態圖中，一個被選中的節點中會出現添加鏈接的按鈕，選中前：

選中后：

如果為使用預設模板的節點定義選中模板，可以直接定義:

 myDiagram.nodeTemplate.selectionAdornmentTemplate = adornmentTemplate;

如果需要為使用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方法進行添加，

節點和連接的背景關系選單

對于節點和選單的預設模板，可以直接使用contextMenu定義背景關系選單，比如:

        myDiagram.nodeTemplate.contextMenu =
            $("ContextMenu",
                $("ContextMenuButton",
                    $(go.TextBlock, "顯示屬性"),
                    { click: function (e, obj) { 
                      var data = https://www.cnblogs.com/zhenl/archive/2022/02/23/myDiagram.model.findNodeDataForKey(obj.part.key);
                      alert(data.complex.p1); 
                      } })
            );

對于使用nodeTemplateMap定義的自定義模板，需要在模板上先定義背景關系選單，然后再將模板添加到nodeTemplateMap中，下面的代碼定義了狀態圖中結束節點的背景關系選單：

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 = https://www.cnblogs.com/zhenl/archive/2022/02/23/myDiagram.model.findNodeDataForKey(obj.part.key);
                      alert(data.complex.p1); 
                      } })
            ); 
      myDiagram.nodeTemplateMap.add("End",
        partEnd
      );

連接的背景關系選單定義與節點相同，示例代碼如下：

        myDiagram.linkTemplate.contextMenu =
            $("ContextMenu",
                $("ContextMenuButton",
                    $(go.TextBlock, "顯示屬性"),
                    { click: function (e, obj) { 
                      alert(obj.part.data.expression); 
                      } })
            );

節點和連接關聯資料的訪問

很多圖形編輯器不容易使用的一個原因是編輯器的資料模型與業務的資料模型很難匹配，業務資料模型經常比較復雜，不僅僅是鍵值對能夠完全表示的，很多情況下需要使用復雜的物件描述，GoJs在這一點上做得非常好，圖形相關的資料模型可以和圖形進行系結，并且資料模型中可以包括復雜的資料物件，比如下面的節點中包括了復合的物件：

{"id":-1, "loc":"155 -138", "category":"Start","complex":{"p1":"自定義屬性"}}

物件的讀取也不復雜，在訪問節點資料的示例代碼如下：

        myDiagram.nodeTemplate.contextMenu =
            $("ContextMenu",
                $("ContextMenuButton",
                    $(go.TextBlock, "顯示屬性"),
                    { click: function (e, obj) { 
                      var data = https://www.cnblogs.com/zhenl/archive/2022/02/23/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實作，命令可以通過代碼執行，也可以通過快捷鍵執行，下面的代碼執行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 背景關系選單

前面介紹了節點和鏈接的背景關系選單，在圖形的背景上也可以設定背景關系選單，設定方法很簡單，直接在背景的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("");
        }

本文來自博客園，作者：尋找無名的特質，轉載請注明原文鏈接：https://www.cnblogs.com/zhenl/p/15920309.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431436.html

標籤：其他

上一篇：Node.js 原始碼分析 - 加載 js 檔案

下一篇：單元測驗 - 測驗場景記錄

GoJS 使用筆記