0
点赞
收藏
分享

微信扫一扫

gojs(三)


GraphObject

有了画布,接下来就要有内容,也就是画布中的元素,一个元素通常是一个 ​​GraphObject​​ 类型的对象。

​GraphObject​​​ 是所有图形对象的抽象类,万物皆 ​​GraphObject​​​。这个类的子类包括 ​​Panel​​​、​​Shape​​​、​​TextBlock​​​、​​Picture​​​ 和 ​​Placeholder​​。

​GraphObject​​ 和其子类的关系如下图。

gojs(三)_子类

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

举报

相关推荐

0 条评论