流程图控件GoJS教程：图例和标题

---

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

有时，除了作为图主题的节点和链接之外，人们还想显示描述不同类型节点或链接的“图例”或“键”。也许有人还希望图中有大写字母的“标题”。

图外

首先，必须考虑标题或图例是否应包含在图中。您可以在图表之外的HTML中创建所需的任何内容。

请注意，HTML中的任何内容都不会自动与视口中显示的图表内容一起滚动和缩放。但是HTML元素可以位于图的DIV元素之前或之后。

未建模的零件

其次，您应该考虑在数据模型中保留标题还是图例。您需要在数据库中保存并加载该数据吗？

如果您不希望这些对象包含在应用程序的数据模型中，则可以将它们创建为简单的部件和图，然后将它们添加到显式定义的Part.locations的图中。

  setupForLegend(diagram);  // this creates a diagram just like the first example

  diagram.add(
    $(go.Part, { location: new go.Point(0, -40) },
      $(go.TextBlock, "A Title", { font: "bold 24pt sans-serif", stroke: "green" })));

如果不指定的地点或位置的零件，如果你的Diagram.layout（如果有的话），不指定任何Part.location，那么有可能不是这些部件的实际位置，他们可能不会在任何地方出现图。

所有使用LayoutNetwork的预定义Layout，包括TreeLayout，都不能在简单的Part上运行，而只能在Node和Link上运行。如果已将节点添加到图中，则即使您显式设置了它的位置，它也将作为该图的常规树布局的一部分进行定位。另外，如果将其Part.isLayoutPositioned属性设置为false，它仍可能是Node 。

您会注意到标题在上图中是可选的，可移动的，可复制的和可删除的。您可能需要将Part.selectable之类的属性设置为false。

建模零件

另一方面，如果您确实想在模型中存储标题或图例，则可以使用常规机制进行存储。通常，您将使用节点类别和模板映射。

如果您不希望用户操作这些对象，则需要将Part.selectable设置为false。您可能需要将Part.layerName设置为“Grid”，以便它始终位于其他所有内容的背景中。（“网格”图层中的所有零件都是自动不可选择的，因为该图层的Layer.allowSelect为false 。）

静态零件

第三，考虑您是否希望标题或图例随着用户滚动或缩放图表而移动或缩放。如果要在视口中将这样的装饰保持在相同位置，则最简单的方法是将其实现为与图的DIV元素叠加的HTML元素。

但是，如果您真的想使用GoJS Part来实现它，则可以通过实现一个“ViewportBoundsChanged” DiagramEvent侦听器来实现，该侦听器会不断将位置和比例重置为使其在用户滚动或缩放时不会移动的值。

  setupForLegend(diagram);  // this creates a diagram just like the first example

  diagram.add(
    $(go.Part,
      {
        layerName: "Grid",  // must be in a Layer that is Layer.isTemporary,
                            // to avoid being recorded by the UndoManager
        _viewPosition: new go.Point(0,0)  // some position in the viewport,
                                           // not in document coordinates
      },
      $(go.TextBlock, "A Title", { font: "bold 24pt sans-serif", stroke: "green" })));

  // Whenever the Diagram.position or Diagram.scale change,
  // update the position of all simple Parts that have a _viewPosition property.
  diagram.addDiagramListener("ViewportBoundsChanged", function(e) {
    e.diagram.commit(function(dia) {
      // only iterates through simple Parts in the diagram, not Nodes or Links
      dia.parts.each(function(part) {
        // and only on those that have the "_viewPosition" property set to a Point
        if (part._viewPosition) {
          part.position = dia.transformViewToDoc(part._viewPosition);
          part.scale = 1/dia.scale;
        }
      })
    }, "fix Parts");
  });

请注意，当用户平移或滚动或缩放该图时，标题将以明显相同的有效尺寸保持在相同的视口位置。本示例使用了“网格” 图层（请参见图层介绍），该图层便于确保标题（或图例）保留在后台并且不参与选择或鼠标事件或UndoManager。

---

想要购买GoJS正版授权，或了解更多产品信息请点击