GraphObject
有了画布,接下来就要有内容,也就是画布中的元素,一个元素通常是一个 GraphObject 类型的对象。
GraphObject 是所有图形对象的抽象类,万物皆 GraphObject。这个类的子类包括 Panel、Shape、TextBlock、Picture 和 Placeholder。
GraphObject 和其子类的关系如下图。

GraphObject 是抽象类,不能直接创建,需要利用 $  也就是 go.GraphObject.make 去创建子类的实例。
面板(Panel)
面板是将其他图形对象作为元素的图形对象。面板负责确定其所有元件的尺寸和位置。每个面板建立自己的坐标系,按顺序绘制面板的元素。
Panel 有不同的类型,每个类型表示一种布局,通过不同的坐标系统排列。
注意,GoJS 中的 x 轴水平向右,y 轴垂直向下。
Panel 的值包括以下类型:
- Panel.Position:建立坐标系,通过指定坐标对绝对位置排序。
- Panel.Vertical:定义垂直方向的线性排列。
- Panel.Horizontal:定义水平方向的线性排列。
- Panel.Auto:调整主元素的大小以适应Panel 中的其他元素。
- Panel.Spot:通过GraphObject.alignment 属性指定其他元素相对于主元素的位置。
- Panel.Table:以表格的方式排列元素,通过指定row 和col 以及相关信息指定元素位置。
- Panel.TableRow:只能在Panel.Table 中使用,以将元素集合组织为表格中的行。
- Panel.TableColumn:只能在Panel.Table 中使用,以将元素集合组织为表格中的列。
- Panel.Viewbox:用于自动调整单个元素的大小以适合面板的可用区域。
- Panel.Grid:仅用于绘制常规的线条图案,元素必须是用于描述重复行的形状。
- Panel.Link:仅供Link 部件和Link Adornments 使用。
- Panel.Graduated:用于沿主Shape 元素绘制常规刻度线和文本。
零部件(Part)
所有零部件都是面板,因为零部件类继承自面板类。
我们只能向 画布 中添加 零部件,所以 Part 是顶级元素。Node 和 Link 继承自 Part 。 所以我们可以向 画布 中添加 节点 或 线 。
而 Shape 、TextBlock 、Picture 则只能作为 Part 的子元素,不能直接添加到 画布 中。
节点(Node)
节点可以是通过线连接到其他节点的零部件,也可以是组的成员。Node 可以被 Link 连接起来。每一个 Node 都有一个 key,用来唯一标识该 Node。
连线(Link)
link 有 from 和 to 属性,用来表示该 Link 的 出发点 和 结束点。
组(Group)
组继承自节点,允许节点在逻辑上包含其他节点和线。
形状(Shape)
表示一个几何图形。可以使用 GoJS 中定义好的一些图形,如 “Rectangle” 也可以自定义图形的形状。通过 fill 和 stroke 等属性决定图形的显示。
文本(TextBlock)
文本属性和 CSS 相同 font-style、 font-variant、 font-weight 、font-size、 font-family。也可以定义 stroke 等属性。










