gojs(三)

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 等属性。