流程圖控件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正版授權，或了解更多產品信息請點擊