翻譯|使用教程|編輯:王香|2019-06-03 14:08:13.940|閱讀 718 次
概述:您可以在傳統(tǒng)的JavaScript代碼中構(gòu)造Node或其他類型的Part。 GoJS還提供了一種更具聲明性的構(gòu)建部件方式,與代碼相比具有多個(gè)優(yōu)勢(shì)。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
您可以在傳統(tǒng)的JavaScript代碼中構(gòu)造Node或其他類型的Part。 GoJS還提供了一種更具聲明性的構(gòu)建部件方式,與代碼相比具有多個(gè)優(yōu)勢(shì)。
本文將討論可用于構(gòu)建節(jié)點(diǎn)的基本對(duì)象類型。這些頁(yè)面通過顯式創(chuàng)建和添加節(jié)點(diǎn)和鏈接來構(gòu)建圖表。后面的頁(yè)面將展示如何使用模型而不是使用此類代碼來構(gòu)建圖表。
首先,查看包含有關(guān)用于構(gòu)建一些示例節(jié)點(diǎn)和鏈接的GraphObject的注釋的圖表:

如您所見,節(jié)點(diǎn)或鏈接可以由許多GraphObject組成,包括可以嵌套的Panel。您可以拖動(dòng)任何注釋,以便在注釋鏈接的末尾看到GraphObject所覆蓋的區(qū)域,但鏈接本身中的GraphObjects除外。
GraphObject是可以被構(gòu)造和任何其他對(duì)象以相同的方式初始化的JavaScript對(duì)象。一個(gè)節(jié)點(diǎn)是一個(gè)GraphObject包含GraphObject S,從而為TextBlock的 S,形狀 S, 圖片 s和面板 s表示可能還包含更多GraphObjects。
一個(gè)非常簡(jiǎn)單的Node可能包含Shape和TextBlock。您可以使用以下代碼構(gòu)建GraphObjects的這種可視化樹:
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 = "Hello!"; textblock.margin = 5; node.add(textblock); diagram.add(node);

雖然以這種方式構(gòu)建節(jié)點(diǎn)將起作用,但隨著節(jié)點(diǎn)變得更復(fù)雜,代碼將變得更加復(fù)雜以便閱讀和維護(hù)。幸運(yùn)的是,GoJS有更好的方法從GraphObjects制作零件。
此外,后面的部分將討論如何使用模型,模板和數(shù)據(jù)綁定自動(dòng)創(chuàng)建節(jié)點(diǎn)和鏈接。在此之前,這些頁(yè)面將顯式創(chuàng)建節(jié)點(diǎn)并直接將它們添加到Diagrams。
  GoJS定義了一個(gè)靜態(tài)函數(shù)GraphObject.make,它在構(gòu)造GraphObjects時(shí)非常有用,而不必考慮和跟蹤臨時(shí)變量名。此靜態(tài)函數(shù)還支持以嵌套方式構(gòu)建對(duì)象,其中縮進(jìn)為您提供有關(guān)可視樹中深度的線索,與上面顯示的簡(jiǎn)單線性代碼不同。
GraphObject.make是一個(gè)函數(shù),其第一個(gè)參數(shù)必須是類類型,通常是GraphObject的子類。
 GraphObject.make的 其他參數(shù)可能有以下幾種類型:
我們可以使用go.GraphObject.make重寫上面的代碼,以產(chǎn)生完全相同的結(jié)果:
 var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, go.Panel.Auto,
      $(go.Shape,
        { figure: "RoundedRectangle",          fill: "lightblue" }),
      $(go.TextBlock,
        { text: "Hello!",          margin: 5 })
    ));
通過使用字符串參數(shù)可以簡(jiǎn)化這一點(diǎn):

var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));
注意我們?nèi)绾瓮ㄟ^使用字符串值來設(shè)置Panel.type,Shape.figure和TextBlock.text屬性。
使用$作為go.GraphObject.make的縮寫是非常方便的,我們將從現(xiàn)在開始使用它。將go.GraphObject.make調(diào)用最小化為單個(gè)字符有助于消除代碼中的混亂,并使縮進(jìn)與正在構(gòu)造的可視樹中的GraphObject的嵌套匹配 。
其他一些JavaScript庫(kù)自動(dòng)將“$”定義為一個(gè)方便的類型函數(shù)名稱,假設(shè)它們是唯一重要的庫(kù)。但是,當(dāng)然,你不能讓同一個(gè)符號(hào)在同一范圍內(nèi)同時(shí)具有兩種不同的含義。因此,您可能希望在使用GoJS時(shí)選擇使用其他短名稱,例如“$$”或“GO” 。該GoJS文檔和示例使用“$”,因?yàn)樗股傻拇a最清楚。
使用GraphObject.make的另一個(gè)好處是,它將確保您設(shè)置的任何屬性都是類的定義屬性。如果屬性名稱中有拼寫錯(cuò)誤,則會(huì)拋出錯(cuò)誤,您可以在控制臺(tái)日志中看到一條消息。
 GraphObject.make也可用于構(gòu)建除繼承自GraphObject的GoJS類之外的GoJS類。下面是使用go.GraphObject.make構(gòu)建Brush 而不是GraphObject子類的示例。
diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: $(go.Brush, "Linear",
                  { 0.0: "Violet", 1.0: "Lavender" }) }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));
 使用GraphObject.make構(gòu)建Diagram也很常見。在這樣的用法中,字符串參數(shù)(如果提供的話必須是第二個(gè)參數(shù))將命名圖應(yīng)該使用的DIV HTML元素。等效地,您可以將對(duì)DIV元素的直接引用作為第二個(gè)參數(shù)傳遞。
此外,在圖表上設(shè)置屬性時(shí),您可以使用屬性名稱,這些屬性名稱由兩個(gè)以句點(diǎn)分隔的標(biāo)識(shí)符組成。句點(diǎn)之前的名稱用作圖表或Diagram.toolManager上的屬性名稱,該圖表返回要設(shè)置其屬性的對(duì)象。句點(diǎn)后面的名稱是設(shè)置的屬性的名稱。請(qǐng)注意,由于存在嵌入的句點(diǎn),因此JavaScript屬性語(yǔ)法要求您使用引號(hào)。
您還可以聲明DiagramEvent聽眾,仿佛呼喚Diagram.addDiagramListener,假裝設(shè)置圖表屬性,它實(shí)際上是一個(gè)DiagramEvent的名稱。因?yàn)樗蠨iagramEvent都具有大寫的名稱,所以名稱不會(huì)與任何Diagram屬性名稱沖突。
以下是GraphObject.make用于構(gòu)建圖表的適度廣泛用法:
var myDiagram =
    $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
      {
        // don't initialize some properties until after a new model has been loaded
        "InitialLayoutCompleted": loadDiagramProperties,  // a DiagramEvent listener
        // have mouse wheel events zoom in and out instead of scroll up and down
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
        // specify a data object to copy for each new Node that is created by clicking
        "clickCreatingTool.archetypeNodeData": { text: "new node" }
      });
  // the DiagramEvent listener for "InitialLayoutCompleted"
  function loadDiagramProperties(e) { . . . }使用GraphObject.make進(jìn)行的所有這些初始化仍然是JavaScript代碼,因此我們可以調(diào)用函數(shù)并輕松共享諸如畫筆之類的對(duì)象:
var violetbrush = $(go.Brush, "Linear", { 0.0: "Violet", 1.0: "Lavender" });
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: violetbrush }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse",
        { fill: violetbrush }),
      $(go.TextBlock, "Goodbye!",
        { margin: 5 })
    ));
  可以共享Brush es和Geometry對(duì)象,但可能不共享GraphObject。
購(gòu)買GoJS正版授權(quán),請(qǐng)點(diǎn)擊“”喲!
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: