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

點擊下載GoJS最新版

相關內容推薦

流程圖控件GoJS教程：內置GraphObject類各指數介紹(一)

流程圖控件GoJS教程：內置GraphObject類各指數介紹(二)

流程圖控件GoJS教程：內置GraphObject類各指數介紹(三)

流程圖控件GoJS教程：內置GraphObject類各指數介紹(四)

流程圖控件GoJS教程：內置GraphObject類各指數介紹(五) 

流程圖控件GoJS教程：內置GraphObject類各指數介紹(六) 

流程圖控件GoJS教程：內置GraphObject類各指數介紹(七) 

isVisibleObject

isVisibleObject(): boolean
如果此對象可見 并且它的每個包含視覺的面板也是可見的，則此謂詞為真。這將忽略此對象所屬面板的實際位置或外觀（可見性除外），并忽略Layer或Diagram 的所有屬性。

對于Part s，您可以調用Part.isVisible謂詞來確定不僅 Part 可見，而且任何包含的Group或Link或Layer都可見。

Static make

• make<T>(cls: "ToolTip" | "ContextMenu", ...initializers: (string | EnumValue | AnimationTrigger | (Partial<GraphObject> & {}) | Binding | RowColumnDefinition | PanelLayout | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]): T
• make<T>(cls: "Button" | "TreeExpanderButton" | "SubGraphExpanderButton" | "ContextMenuButton" | "PanelExpanderButton" | "CheckBoxButton" | "CheckBox", ...initializers: (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}) | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]): T
• make<T>(cls: string, ...initializers: (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}) | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]): T
• make<CT>(cls: CT, ...initializers: (string | EnumValue | HTMLDivElement | (Partial<InstanceType<CT>> & {} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & { Changed?: ChangedEventHandler; ModelChanged?: ChangedEventHandler } : {})) | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | (string | EnumValue | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | (Partial<InstanceType<CT>> & {} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & { Changed?: ChangedEventHandler; ModelChanged?: ChangedEventHandler } : {})))[])[]): InstanceType<CT>

第一個參數必須是類類型或類的名稱或預定義類型的面板的名稱。此函數將構造該類型的新實例并使用其余參數來初始化對象。第一個參數不能是您嘗試初始化的常規(guī)對象（例如 GraphObject）；為此，您可以調用setProperties或Diagram.setProperties，盡管這比直接設置屬性效率低。

如果初始化參數是一個枚舉值，它會嘗試設置看起來最合適的屬性。

如果初始化參數是一個字符串，這將根據正在構建的對象的類型設置一個特定的屬性。

• 如果對象是TextBlock，則設置TextBlock.text。
• 如果對象是Shape，則設置Shape.figure。
• 如果對象是Picture，則設置Picture.source。
• 如果對象是Panel（包括Part、Node或Group），則設置Panel.type。

• GraphObject和RowColumnDefinition只能作為Panel的元素添加。
• Binding s 只能應用于GraphObject s 和RowColumnDefinition s。
• PathFigure s 只能添加到Geometry對象。
• PathSegment只能添加到PathFigure對象。
• 常規(guī) JavaScript 數組提供了一系列初始化參數。
• 常規(guī) JavaScript 對象提供在正在構建的對象上設置的屬性/值對。

對于面板，句點之前的子字符串用作傳遞給Panel.findObject的名稱， 以獲取設置屬性的實際對象，即句點之后的子字符串。這通常僅在預定義的面板上有用：

• 一個“Button”有一個形狀命名為“ButtonBorder”周圍的面板的內容。
• 一個“TreeExpanderButton”具有“ButtonBorder”形和“ButtonIcon”形狀，加或減的跡象。
• 一個“SubGraphExpanderButton”具有“ButtonBorder”形和“ButtonIcon”形狀，加或減的跡象。
• 一個“ContextMenuButton”有一個名為“ButtonBorder”周圍的面板的內容形態(tài)。

對于圖表，句點之前的子字符串用作圖表本身的屬性名稱，以獲取要在其上設置屬性的實際對象。作為一種特殊情況，如果圖表上不存在這樣的屬性值，它會在Diagram.toolManager上查找。請參閱下面的一些示例。

另外的圖表，只為圖，如果屬性名稱是名DiagramEvent，屬性值必須是一個DiagramEvent監(jiān)聽功能，并Diagram.addDiagramListener是使用DiagramEvent名和函數調用。請注意，所有 DiagramEvent 名稱均大寫且不包含任何句點，因此不會與Diagram或ToolManager上的任何屬性發(fā)生任何名稱沖突。盡管您可以為相同的 DiagramEvent 名稱注冊多個偵聽器，但由于 JavaScript 的限制，這些偵聽器需要使用單獨的 JavaScript 對象進行聲明，因為 JavaScript 不允許在對象文字中出現重復的屬性名稱。

此外，對于圖表，如果屬性名稱是"Changed"或"ModelChanged"，則屬性值必須是一個 ChangedEvent 偵聽器函數，該函數通過ChangedEvent參數調用。當屬性名稱為 時"Changed"，它調用Diagram.addChangedListener，通知有關圖表或其層或 GraphObjects 的更改。當屬性名稱"ModelChanged"，它調用Model.addChangedListener在Diagram.model，導致約更改型號或它的數據的通知。這是非常方便，因為Diagram.model屬性setter會自動調用 Model.removeChangedListener在舊模型上，從而避免對舊模型進行更多更改時的任何開銷，并避免對可能導致垃圾收集保留的偵聽器的引用。它還將在新模型上調用Model.addChangedListener，幫助實現與新模型相同的行為。

如果屬性名稱是數字并且正在構造的對象是Brush，則通過調用Brush.addColorStop將數字和值添加到 Brush 。

否則，屬性名稱將用作正在構建的對象上的常規(guī)屬性名稱。這會嘗試進行一些屬性名稱和值檢查：當正在構建的對象上未定義屬性時，它將發(fā)出錯誤信號。可以通過這種方式發(fā)現許多 JavaScript 代碼會忽略的拼寫錯誤。

如果屬性名稱以下劃線開頭，則不會抱怨該屬性未定義。不僅在正在構建的對象上設置了下劃線屬性，而且對copy 的調用 也會將此類命名屬性的值復制到新對象中。

在示例和介紹頁面中，使用別名調用此函數$。如果您想保留$對另一個 JavaScript 庫的使用，您可以使用不同的短名稱。

 var $ = go.GraphObject.make;

 var diagram =
   $(go.Diagram, "myDiagramDiv",
     {
        // don't initialize some properties until after a new model has been loaded
        "InitialLayoutCompleted": loadDiagramProperties,
       allowZoom: false,  // don't allow the user to change the diagram's scale
       "grid.visible": true,  // display a background grid for the whole diagram
       "grid.gridCellSize": new go.Size(20, 20),
       // allow double-click in background to create a new node
       "clickCreatingTool.archetypeNodeData": { text: "Node" },
       // allow Ctrl-G to call the groupSelection command
       "commandHandler.archetypeGroupData":
           { text: "Group", isGroup: true, color: "blue" },
       "toolManager.hoverDelay": 100,  // how quickly tooltips are shown
       // mouse wheel zooms instead of scrolls
       "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
       "commandHandler.copiesTree": true,  // for the copy command
       "commandHandler.deletesTree": true, // for the delete command
       "draggingTool.dragsTree": true,  // dragging for both move and copy
       "draggingTool.isGridSnapEnabled": true,
       layout: $(go.TreeLayout,
                 { angle: 90, sorting: go.TreeLayout.SortingAscending })
     });

 diagram.nodeTemplate =
   $(go.Node, "Auto",  // or go.Panel.Auto
     new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
     $(go.Shape, "RoundedRectangle",
       {
         fill: $(go.Brush, "Linear", { 0: "#FEC901", 1: "#FEA200" }),
         stroke: "gray",
         strokeWidth: 2,
         strokeDashArray: [3, 3]
       }),
     $(go.TextBlock,
       { margin: 5, font: "bold 12pt sans-serif" },
       new go.Binding("text", "key"))
   );

類型參數
參數

• cls: "ToolTip" | "ContextMenu"
• Rest ...initializers: (string | EnumValue | AnimationTrigger | (Partial<GraphObject> & {}) | Binding | RowColumnDefinition | PanelLayout | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]

Returns T
Type parameters
T: Panel<T>

參數

• cls: "Button" | "TreeExpanderButton" | "SubGraphExpanderButton" | "ContextMenuButton" | "PanelExpanderButton" | "CheckBoxButton" | "CheckBox"
• Rest ...initializers: (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> &amp; {}) | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]

Returns T
類型參數
T : GraphObject < T >

參數

• cls: string
• Rest ...initializers: (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}) | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]

Returns T
類型參數
CT : ConstructorType < CT >

參數

• cls: CT
• Rest ...initializers: (string | EnumValue | HTMLDivElement | (Partial<InstanceType<CT>> & {} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & { Changed?: ChangedEventHandler; ModelChanged?: ChangedEventHandler } : {})) | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | (string | EnumValue | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | (Partial<InstanceType<CT>> & {} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & { Changed?: ChangedEventHandler; ModelChanged?: ChangedEventHandler } : {})))[])[]