GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

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

使用靜態(tài)函數(shù)graphject是非常常見的。為了建立一個(gè)圖形對(duì)象的可視化樹。你可以在介紹中看到很多這樣的例子，從構(gòu)建對(duì)象開始，從最小樣本開始。

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

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

要了解更多關(guān)于如何繪制的信息，請(qǐng)參見Shape、TextBlock和Picture類上的屬性。

GraphObject分級(jí)

GraphObject定義了導(dǎo)致對(duì)象自身大小不同的大多數(shù)屬性。最突出的包括:

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

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

圖形對(duì)象的大小和位置在面板

一些graphhobject屬性指導(dǎo)包含的面板如何在面板中設(shè)置對(duì)象的大小和位置。

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

頂級(jí)圖形對(duì)象是部分

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

有幾個(gè)只讀屬性可以幫助在可視化樹中導(dǎo)航。

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

用戶交互

圖形對(duì)象有幾個(gè)屬性，支持動(dòng)態(tài)自定義交互。有幾個(gè)可定義的函數(shù)可以對(duì)輸入事件執(zhí)行:mouseDragEnter, mouseDragLeave, mouseDrop, mouseEnter, mouseHold, mouseHover, mouseLeave和mouseOver。例如，你可以定義鼠標(biāo)進(jìn)入-離開事件處理程序來(lái)修改鼠標(biāo)經(jīng)過(guò)鏈接時(shí)的外觀:

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定義了當(dāng)GraphObject的isActionable屬性設(shè)置為true(默認(rèn)為false)時(shí)要執(zhí)行的函數(shù)。更多細(xì)節(jié)請(qǐng)參見ActionTool。

GraphObjects作為港口

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

圖形對(duì)象有幾個(gè)屬性，僅當(dāng)它們作為端口時(shí)才相關(guān)。這些與港口相關(guān)的屬性是:

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

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

• segmentIndex，標(biāo)簽應(yīng)該在哪個(gè)段上
• segmentFraction，標(biāo)簽在段上的距離
• segmentOffset，其中標(biāo)簽應(yīng)該相對(duì)于段定位
• segmentOrientation，標(biāo)簽應(yīng)該如何旋轉(zhuǎn)相對(duì)于線段的角度

有幾個(gè)屬性指定了相當(dāng)高級(jí)的交互行為:

• 游標(biāo)，指定游標(biāo)的CSS字符串
• 快捷菜單
• 工具提示