GoJS 笔记

By | 2021年12月31日

Panels

Panels 是个 GraphObjects,他们 hold 其他 GraphObjects 作为他们的元素。Panel负责确定它的所有元素的大小和位置。每个 Panel 建立自己的坐标系。Panel里的元素按顺序绘制,从而确定这些元素的Z顺序。

GoJS的panel有:

  • Panel.Position
  • Panel.Vertical
  • Panel.Horizontal
  • Panel.Auto
  • Panel.Spot
  • Panel.Table (see the next section about Table Panels)
  • Panel.Viewbox
  • Panel.Link (see the section about Link Labels)
  • Panel.Grid (see the section about Grid Patterns)
  • Panel.Graduated (see the section about Graduated Panels)

Layouts

1 Default Layout

如果不设置Diagram.layout的值,那么它默认就有一个Layout实例。到目前为止,您看到的许多示例都没有设置diagram.layout,因此使用默认布局。

这种布局不同于所有其他布局子类,因为它只设置不具有位置的节点的位置——即graphobject.actualbounds的x或y是NaN的位置。它将保留未修改的所有具有已定义位置的节点,并忽略所有链接。

2 Automatic Layouts

GoJS提供的几种自动布局:

  • GridLayout
  • TreeLayout
  • ForceDirectedLayout
  • LayeredDigraphLayout
  • CircularLayout

3 Layout Usage

使用方式一(Diagram.layout):

diagram.layout = new go.ForceDirectedLayout();

使用方式二(GraphObject.make):

var diagram = $(go.Diagram, "myDiagramDiv",
                {
                  layout: $(go.TreeLayout,
                            { angle: 90, nodeSpacing: 10, layerSpacing: 30 })
                });

提示:我们建议尽可能使用graphhobject.make,因为错误检查作用于 property names。

4 Custom Layouts

除了上面介绍的自动布局外,GoJS允许创建自定义布局。

Performance

当图表仅限于几百个节点和链接时,特别是在桌面上,为图表获得良好的性能并不需要您付出任何努力。然而,当你的应用程序可能处理数千或数万个节点和链接时,你可能需要调整你的实现以避免昂贵的功能。

1 Constructing and Sizing Nodes

尽可能使用更简单的 panel。“Table”面板功能比较丰富,但如果可以尽量使用”Horizontal”/”Vertical”/”Spot”/”Auto” 这些轻量级的面板。
如果您有一个Picture并且事先知道它的预期大小,那么最好设置它的GraphObject.desiredSize(或GraphObject.width和GraphObject.height),这样一旦图像加载就不必重新测量它。 当节点更改大小时,可能需要再次执行布局,因此具有固定大小的节点有助于减少图表布局。 通常,在节点元素(尤其是图片)上设置GraphObject.desiredSize将加快GoJS测量和排列构成节点或链接的面板的速度。

2 Layouts

GridLayout 和 TreeLayout 速度快,LayeredDigraphLayout 速度慢。

3 Virtualization

对于一个含有123456个节点的diagram,就需要用虚拟化技术了,虚拟化仅会构造与视区相交的节点和链接,因此加载和渲染速度相当快。

4 其他注意事项

您可以根据缩放级别使用多个模板。如果缩小到足够远(因此屏幕上有很多节点),则可以切换到简化的模板,以便渲染(平移、拖动等时)更快。不过,切换模板的过程有一个性能成本,因为部件必须自己重新构建。

发表评论

您的电子邮箱地址不会被公开。