流程图控件GoJS教程：内置GraphObject类各指数介绍(八)

GoJS是一款功能强大，快速且轻量级的流程图控件。本文介绍了GoJS API参考手册中GoJS类别索引-类装饰的具体内容。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的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>

这个静态函数根据它的类和附加参数构建一个对象，提供初始属性或成为Panel元素的GraphObject s 。

第一个参数必须是类类型或类的名称或预定义类型的面板的名称。此函数将构造该类型的新实例并使用其余参数来初始化对象。第一个参数不能是您尝试初始化的常规对象（例如 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对象。
• 常规 JavaScript 数组提供了一系列初始化参数。
• 常规 JavaScript 对象提供在正在构建的对象上设置的属性/值对。

当初始化参数是一个普通的 JavaScript 对象时，有几种方法可以应用该对象的属性。如果属性名称是一个带有句点的字符串，如果对象是Panel或Diagram，则这具有特殊含义。目前只有一个句点分隔符是属性字符串的有效语法，并且它只对面板和图表有效。

对于面板，句点之前的子字符串用作传递给Panel.findObject的名称， 以获取设置属性的实际对象，即句点之后的子字符串。这通常仅在预定义的面板上有用：

• 一个“Button”有一个形状命名为“ButtonBorder”周围的面板的内容。
• 一个“TreeExpanderButton”具有“ButtonBorder”形和“ButtonIcon”形状，加或减的迹象。
• 一个“SubGraphExpanderButton”具有“ButtonBorder”形和“ButtonIcon”形状，加或减的迹象。
• 一个“ContextMenuButton”有一个名为“ButtonBorder”周围的面板的内容形态。

但是您可以通过调用静态函数GraphObject.defineBuilder来定义 GraphObject.make 可以构建的自己的名称。

对于图表，句点之前的子字符串用作图表本身的属性名称，以获取要在其上设置属性的实际对象。作为一种特殊情况，如果图表上不存在这样的属性值，它会在Diagram.toolManager上查找。请参阅下面的一些示例。

另外的图表，只为图，如果属性名称是名DiagramEvent，属性值必须是一个DiagramEvent监听功能，并Diagram.addDiagramListener是使用DiagramEvent名和函数调用。请注意，所有 DiagramEvent 名称均大写且不包含任何句点，因此不会与Diagram或ToolManager上的任何属性发生任何名称冲突。尽管您可以为相同的 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 。

否则，属性名称将用作正在构建的对象上的常规属性名称。这会尝试进行一些属性名称和值检查：当正在构建的对象上未定义属性时，它将发出错误信号。可以通过这种方式发现许多 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"))   );

有关 GraphObject.make 的使用信息和示例，请参阅有关构建对象的介绍页面。

类型参数
参数

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

零个或更多个值即初始化新对象，典型地具有其值的新的对象，或JavaScript阵列与附加的初始化参数，或一对设置属性的对象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> & {}) | (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 } : {})))[])[]

想要购买GoJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都