GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

這是所有圖形對象的抽象基類。從GraphObject繼承的類包括:Shape、TextBlock、Picture和Panel。部件類從面板類派生，節點類和鏈接類從面板類派生。

使用靜態函數graphject是非常常見的。為了建立一個圖形對象的可視化樹。你可以在介紹中看到很多這樣的例子，從構建對象開始，從最小樣本開始。

由于GraphObject是一個抽象類，程序員不創建GraphObject本身，但是這個類定義了各種GraphObject所使用的許多屬性。

GraphObject上唯一的視覺屬性是background和areabbackground。然而，你可以通過設置可見來控制是否繪制圖形對象，或者如果你仍然希望圖形對象占據空間，可以將不透明度設置為零。此外，如果你想控制任何鼠標或觸摸事件是否“看到”GraphObject，你可以將pickable設置為false。

要了解更多關于如何繪制的信息，請參見Shape、TextBlock和Picture類上的屬性。

GraphObject分級

GraphObject定義了導致對象自身大小不同的大多數屬性。最突出的包括:

• desiredSize、minSize和maxSize屬性用于顯式設置或限制可視元素的大小。width和height是方便屬性，分別設置了desiredSize的寬度和高度。
• 角度和比例屬性用于轉換視覺元素。
• 拉伸屬性決定了圖形對象將如何填充它的視覺空間，由它的包含面板上下文賦予它。頂級(部分)圖形對象不受此屬性影響，因為它們總是被授予無限空間。

• GraphObject的自然邊界描述它的局部大小，不受任何轉換(縮放、角度)的影響。
• 圖形對象的測量范圍描述了它在其包含的面板內的大小。
• 圖形對象的實際邊界描述了它在面板中的位置和給定大小。這個大小可能小于測量范圍，例如，如果一個具有較大期望大小的圖形對象被放置在一個更小的期望大小的面板中。實際邊界小于測量邊界通常意味著一個對象將被裁剪。

圖形對象的大小和位置在面板

一些graphhobject屬性指導包含的面板如何在面板中設置對象的大小和位置。

• 對齊指定了對象相對于面板上某個區域的位置。例如，斑點的對齊值。bottom-right表示GraphObject應該在面板的右下角。
• alignmentFocus精確地指定了GraphObject的哪個點應該在對齊點上對齊。
• column和row屬性只在Panel中使用。表面板，以指示GraphObject應該在哪里。
• columnSpan和rowSpan屬性告訴面板。圖形對象應該有多大。
• isPanelMain屬性向某些類型的面板表明，GraphObject是其他面板子對象應該測量或定位的“主要”對象。
• margin屬性告訴包含它的面板這個圖形對象周圍的額外空間。
• position屬性用于確定圖形對象作為面板元素時的相對位置。面板的位置。

頂級圖形對象是部分

Part是表示頂級對象的GraphObject的派生類。所有頂級圖形對象都必須是部件，節點、鏈接、組和裝飾都源自部件。零件的位置決定了零件在文檔坐標中的左上角的位置。也看到部分。location，它支持基于零件中不同元素的不同位置來指定位置的方法。

有幾個只讀屬性可以幫助在可視化樹中導航。

• 面板返回直接包含這個圖形對象的面板
• part返回這個GraphObject所在的部分，可能通過中間的面板;這通常用于獲取模型數據Panel.data
• layer返回這個GraphObject的部分所在的層
• 返回這個graphhobject的部件層所在的圖表

用戶交互

圖形對象有幾個屬性，支持動態自定義交互。有幾個可定義的函數可以對輸入事件執行:mouseDragEnter, mouseDragLeave, mouseDrop, mouseEnter, mouseHold, mouseHover, mouseLeave和mouseOver。例如，你可以定義鼠標進入-離開事件處理程序來修改鼠標經過鏈接時的外觀:

myDiagram.linkTemplate =
  $(go.Link,
    $(go.Shape,
      { strokeWidth: 2, stroke: "gray" },  // default color is "gray"
      { // here E is the InputEvent and OBJ is this Shape
        mouseEnter: function(e, obj) { obj.strokeWidth = 4; obj.stroke = "dodgerblue"; },
        mouseLeave: function(e, obj) { obj.strokeWidth = 2; obj.stroke = "gray"; }
      }));

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { name: "TB", margin: 3 },
      new go.Binding("text", "key")),
    { // second arg will be this GraphObject, which in this case is the Node itself:
      click: function(e, node) {
        window.open("http://en.wikipedia.org/Wiki/" + node.data.key);
      }
    });

屬性actionCancel, actionDown, actionMove和actionUp定義了當GraphObject的isActionable屬性設置為true(默認為false)時要執行的函數。更多細節請參見ActionTool。

GraphObjects作為港口

在GoJS中，鏈接只能連接到指定為“端口”的節點內的元素，默認情況下，唯一的端口是節點本身。在節點中設置GraphObject的portId允許該對象充當端口。注意:唯一一種可以保存鏈接所連接的端口的模型，即非空字符串的portIds，是GraphLinksModel的GraphLinksModel。linkFromPortIdProperty GraphLinksModel。linkToPortIdProperty被設置為鏈接數據對象的名稱屬性。

圖形對象有幾個屬性，僅當它們作為端口時才相關。這些與港口相關的屬性是:

• portId，它必須設置為節點內唯一的字符串，以便將這個GraphObject視為“端口”，而不是整個節點
• fromSpot和toSpot，鏈路應該連接到這個端口
• fromEndSegmentLength和toEndSegmentLength是與端口相鄰的鏈路段的長度
• fromShortLength and toShortLength表示鏈路在接觸該端口之前應該終止的距離
• fromLinkable和toLinkable，用戶是否可以繪制連接到此端口的鏈接
• fromLinkableDuplicates和toLinkableDuplicates，用戶是否可以在同一對端口之間繪制多條鏈路
• fromLinkableSelfNode和toLinkableSelfNode，用戶是否可以在同一個節點上的端口之間繪制一個鏈接
• fromMaxLinks和toMaxLinks，以限制在特定方向上與此端口連接的鏈接數量

圖形對象還可以用作鏈接上的“標簽”。除了alignmentFocus屬性之外，這些屬性還會在鏈接面板中以一種特定的方式將“標簽”定位在鏈接路徑的特定點上:

• segmentIndex，標簽應該在哪個段上
• segmentFraction，標簽在段上的距離
• segmentOffset，其中標簽應該相對于段定位
• segmentOrientation，標簽應該如何旋轉相對于線段的角度

有幾個屬性指定了相當高級的交互行為:

• 游標，指定游標的CSS字符串
• 快捷菜單
• 工具提示