當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

GoJS 使用笔记

發(fā)布時間：2023/12/9 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 GoJS 使用笔记小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Python微信訂餐小程序課程視頻

https://edu.csdn.net/course/detail/36074

Python實戰(zhàn)量化交易理財系統(tǒng)

https://edu.csdn.net/course/detail/35475
作為商業(yè)軟件，GoJs很容易使用，文檔也很完備，不過項目中沒有時間系統(tǒng)地按照文檔學(xué)習(xí)，總是希望快速入門使用，所以將項目中遇到的問題精簡一下，希望對后來者有些幫助。

開始使用

這里先展示一個最簡單的例子，說明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簡化定義為 $，方便代碼的編寫與閱讀，注意這不是必須的，也可以使用$ $或者其它簡化方式。結(jié)果如下：

這里的關(guān)鍵是go.GraphObject.make的使用，下面重點介紹這個函數(shù)。

使用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)建函數(shù)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的第一個參數(shù)是需要創(chuàng)建的類型，通常是GraphObject的子類，后續(xù)的參數(shù)可以有多個，可以是以下類型：

屬性/值對的JS簡單對象，說明被創(chuàng)建對象的屬性。
GraphObject，添加到被創(chuàng)建對象中的子對象，比如，上面的代碼中在Node中增加Shape和TextBlock。
字符串，針對特定對象的屬性，比如對于TextBlock，就是設(shè)置文本值
其它可能的Js對象，針對創(chuàng)建對象的不同。

Binding

基本用法

Binding顧名思義是綁定，將模型的屬性與GraphObject對象的屬性進(jìn)行綁定。比如，有如下模型：

{ key: 23, say: "你好!" }

我們需要將say屬性綁定到文本對象的text屬性，可以使用下面的代碼：

var $ = go.GraphObject.make;myDiagram.nodeTemplate =$(go.Node, "Auto",. . .$(go.TextBlock, new go.Binding("text", "say")))

轉(zhuǎn)換函數(shù)

如果我們希望綁定的屬性進(jìn)行轉(zhuǎn)換，可以使用轉(zhuǎn)換函數(shù)，比如：

new go.Binding("text", "say", function(v) { return "我說: " + v; })

單向綁定和雙向綁定

單向綁定時只能是模型的屬性改變GraphObject對象的屬性，而雙向綁定時，GraphObject對象的屬性的改變可以改變模型的屬性。雙向綁定的寫法是這樣的：

new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)

當(dāng)loc轉(zhuǎn)換為location時，使用go.Point.parse函數(shù)，當(dāng)location轉(zhuǎn)換為loc時，使用go.Point.stringify函數(shù)。

GraphObject

GraphObject是抽象類，不能直接創(chuàng)建，GraphObject具有下面的一些特性。

尺寸

GraphObject有關(guān)尺寸的屬性如下：

desiredSize,minSize和maxSize。width和height會轉(zhuǎn)換為desiredSize。
angle和scale
stretch

GraphObject在Panel中繪制完成后，會有如下的只讀屬性：

nuturalBounds：表示基本尺寸，不受轉(zhuǎn)換的影響
measureBounds：表示在包含它的Panel中的尺寸
actualBounds：表示在包含它的Panel中的實際尺寸

頂層GraphObject一定是Part

Part是GraphObject的子類，表示頂層元素。頂層元素一定是Part，包括Node,Linke,Group以及Adornment，下面的屬性用于獲取相關(guān)的GraphObject：

panel：獲取包含這個GraphObject的Panel
part: 獲取這個GraphObject所在的Part。
layer: 獲取這個GraphObject所在的Layer。
diagram:獲取所在的Diagram。

Model

模型中保存了圖形顯示的數(shù)據(jù)，描述基本實體、它們的屬性以及之間的關(guān)系。模型中的數(shù)據(jù)要盡量簡單，可以很容易地序列化為JSON或者XML格式。有兩種模型TreeModel和GraphLinksModel，前者保存樹狀結(jié)構(gòu)的數(shù)據(jù)。模型中key值用來標(biāo)識對象，必須是唯一的，下面是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" }];

這是樹形結(jié)構(gòu)的數(shù)據(jù)。如果保存一般的圖結(jié)構(gòu)，需要使用GraphLinksModel。

自定義Node模板

個人認(rèn)為方便的自定義模板是GoJs的強(qiáng)大功能之一，使用nodeTemplateMap可以很方便地定義各種類型的模板，只要在數(shù)據(jù)模型中指定模板的名稱（使用category），就可以顯示相應(yīng)的圖形。nodeTemplateMap的使用方法如下：

myDiagram.nodeTemplateMap.add("End",part);

這里，part就是顯示的模板，比如，下面是一個part的定義，顯示狀態(tài)圖的開始節(jié)點：

對應(yīng)的數(shù)據(jù)如下：

{"id":-1, "loc":"155 -138", "category":"Start"}

數(shù)據(jù)中，category指定了模板類型，loc綁定到圖元的位置，這里是雙向綁定，也就是圖元位置的變化，會改變數(shù)據(jù)模型中的數(shù)據(jù)。

如果只定義通用的模板，可以使用：

myDiagram.nodeTemplate=part;

這種情況下，沒有指定category的數(shù)據(jù)都采用缺省模板顯示。

自定義選中模板

當(dāng)一個節(jié)點被選中時，我們希望使用不同的模板顯示，比如，狀態(tài)圖中，一個被選中的節(jié)點中會出現(xiàn)添加鏈接的按鈕，選中前：

選中后：

如果為使用缺省模板的節(jié)點定義選中模板，可以直接定義:

myDiagram.nodeTemplate.selectionAdornmentTemplate = adornmentTemplate;

如果需要為使用nodeTemplateMap添加的自定義模板定義選中模板，可以使用如下方法:

上面的代碼中，需要先定義模板的part，然后增加選中模板，最后，使用nodeTemplateMap.add方法進(jìn)行添加。

節(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é)束節(jié)點的上下文菜單：

連接的上下文菜單定義與節(jié)點相同，示例代碼如下：

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

節(jié)點和連接關(guān)聯(lián)數(shù)據(jù)的訪問

很多圖形編輯器不容易使用的一個原因是編輯器的數(shù)據(jù)模型與業(yè)務(wù)的數(shù)據(jù)模型很難匹配。業(yè)務(wù)數(shù)據(jù)模型經(jīng)常比較復(fù)雜，不僅僅是鍵值對能夠完全表示的，很多情況下需要使用復(fù)雜的對象描述。GoJs在這一點上做得非常好，圖形相關(guān)的數(shù)據(jù)模型可以和圖形進(jìn)行綁定，并且數(shù)據(jù)模型中可以包括復(fù)雜的數(shù)據(jù)對象，比如下面的節(jié)點中包括了復(fù)合的對象：

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

對象的讀取也不復(fù)雜，在訪問節(jié)點數(shù)據(jù)的示例代碼如下：

訪問連接數(shù)據(jù)的示例代碼如下：

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常用的命令和對應(yīng)的快捷鍵：

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，設(shè)置zoom到適合圖形大小
Ctrl-G 激活 CommandHandler.groupSelection , 組合
Ctrl-Shift-G 激活 CommandHandler.ungroupSelection，取消組合
F2 激活 CommandHandler.editTextBlock，編輯
Esc 激活 CommandHandler.stopCommand，取消命令

GoJs 上下文菜單

前面介紹了節(jié)點和鏈接的上下文菜單，在圖形的背景上也可以設(shè)置上下文菜單，設(shè)置方法很簡單，直接在背景的contextMenu上設(shè)置就可以了，示例代碼如下：

myDiagram.contextMenu =GO("ContextMenu",GO("ContextMenuButton",GO(go.TextBlock, "撤銷"),{click: function (e, obj) {myDiagram.commandHandler.undo();}}));

可以對ContextMenuButton設(shè)置尺寸，比如，增加寬和高的屬性：

GO("ContextMenuButton",GO(go.TextBlock, "撤銷"),{width: 160, height: 120, click: function (e, obj) {myDiagram.commandHandler.undo();}}),

也可以為ContextMenu設(shè)置屬性，添加完菜單按鈕后面，增加屬性設(shè)置：

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 生成圖片并回傳服務(wù)器

GoJs提供在客戶端生成流程圖的blob數(shù)據(jù)，然后通過瀏覽器進(jìn)行下載，這種方式不需要服務(wù)端的支持，示例代碼如下：

myDiagram.makeImageData({ returnType: "blob", scale: 3, detail: 0.9, callback: saveBlobToServer});

這里生成的blob數(shù)據(jù)會由自定義的回調(diào)函數(shù)處理，在回調(diào)函數(shù)中，可以編寫通過瀏覽器的下載代碼，或者將流程圖數(shù)據(jù)回傳到服務(wù)器的代碼。這里，我們希望將圖片回傳服務(wù)器進(jìn)行保存：

服務(wù)器端使用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("");}

總結(jié)

以上是生活随笔為你收集整理的GoJS 使用笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

笔记
GoJS

上一篇： nginx+tomcat8+memcac
下一篇： 2022年五一数学建模C题讲解