流程圖控件GoJS教程：圖例和標(biāo)題

---

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

有時(shí)，除了作為圖主題的節(jié)點(diǎn)和鏈接之外，人們還想顯示描述不同類型節(jié)點(diǎn)或鏈接的“圖例”或“鍵”。也許有人還希望圖中有大寫(xiě)字母的“標(biāo)題”。

圖外

首先，必須考慮標(biāo)題或圖例是否應(yīng)包含在圖中。您可以在圖表之外的HTML中創(chuàng)建所需的任何內(nèi)容。

請(qǐng)注意，HTML中的任何內(nèi)容都不會(huì)自動(dòng)與視口中顯示的圖表內(nèi)容一起滾動(dòng)和縮放。但是HTML元素可以位于圖的DIV元素之前或之后。

未建模的零件

其次，您應(yīng)該考慮在數(shù)據(jù)模型中保留標(biāo)題還是圖例。您需要在數(shù)據(jù)庫(kù)中保存并加載該數(shù)據(jù)嗎？

如果您不希望這些對(duì)象包含在應(yīng)用程序的數(shù)據(jù)模型中，則可以將它們創(chuàng)建為簡(jiǎn)單的部件和圖，然后將它們添加到顯式定義的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" })));

如果不指定的地點(diǎn)或位置的零件，如果你的Diagram.layout（如果有的話），不指定任何Part.location，那么有可能不是這些部件的實(shí)際位置，他們可能不會(huì)在任何地方出現(xiàn)圖。

所有使用LayoutNetwork的預(yù)定義Layout，包括TreeLayout，都不能在簡(jiǎn)單的Part上運(yùn)行，而只能在Node和Link上運(yùn)行。如果已將節(jié)點(diǎn)添加到圖中，則即使您顯式設(shè)置了它的位置，它也將作為該圖的常規(guī)樹(shù)布局的一部分進(jìn)行定位。另外，如果將其Part.isLayoutPositioned屬性設(shè)置為false，它仍可能是Node 。

您會(huì)注意到標(biāo)題在上圖中是可選的，可移動(dòng)的，可復(fù)制的和可刪除的。您可能需要將Part.selectable之類的屬性設(shè)置為false。

建模零件

另一方面，如果您確實(shí)想在模型中存儲(chǔ)標(biāo)題或圖例，則可以使用常規(guī)機(jī)制進(jìn)行存儲(chǔ)。通常，您將使用節(jié)點(diǎn)類別和模板映射。

如果您不希望用戶操作這些對(duì)象，則需要將Part.selectable設(shè)置為false。您可能需要將Part.layerName設(shè)置為“Grid”，以便它始終位于其他所有內(nèi)容的背景中。（“網(wǎng)格”圖層中的所有零件都是自動(dòng)不可選擇的，因?yàn)樵搱D層的Layer.allowSelect為false 。）

靜態(tài)零件

第三，考慮您是否希望標(biāo)題或圖例隨著用戶滾動(dòng)或縮放圖表而移動(dòng)或縮放。如果要在視口中將這樣的裝飾保持在相同位置，則最簡(jiǎn)單的方法是將其實(shí)現(xiàn)為與圖的DIV元素疊加的HTML元素。

但是，如果您真的想使用GoJS Part來(lái)實(shí)現(xiàn)它，則可以通過(guò)實(shí)現(xiàn)一個(gè)“ViewportBoundsChanged” DiagramEvent偵聽(tīng)器來(lái)實(shí)現(xiàn)，該偵聽(tīng)器會(huì)不斷將位置和比例重置為使其在用戶滾動(dòng)或縮放時(shí)不會(huì)移動(dòng)的值。

  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");
  });

請(qǐng)注意，當(dāng)用戶平移或滾動(dòng)或縮放該圖時(shí)，標(biāo)題將以明顯相同的有效尺寸保持在相同的視口位置。本示例使用了“網(wǎng)格” 圖層（請(qǐng)參見(jiàn)圖層介紹），該圖層便于確保標(biāo)題（或圖例）保留在后臺(tái)并且不參與選擇或鼠標(biāo)事件或UndoManager。

---

想要購(gòu)買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊