流程圖控件GoJS教程：自定義節(jié)點之邊框

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

GoJS現(xiàn)已更新至最新版本2.1發(fā)布，添加了動畫功能，修復(fù)了一些bug，增強(qiáng)用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

周邊內(nèi)容

通常用邊框或其他背景包圍有趣的信息

簡單邊框

許多簡單的節(jié)點只是由一個的面板類型的面板，自動帶有圍繞TextBlock的Shape。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle",
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );
 
  diagram.model.nodeDataArray = [
    { key: "Alpha", color: "lightblue" }
  ];

形狀節(jié)點

內(nèi)容周圍的Shape不必為矩形。本示例演示了許多形狀。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        new go.Binding("figure", "fig"),
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );
 
  diagram.model.nodeDataArray = [
    { key: "Alpha", color: "lightblue", fig: "RoundedRectangle" },
    { key: "Beta", color: "lightblue", fig: "Ellipse" },
    { key: "Gamma", color: "lightblue", fig: "Hexagon" },
    { key: "Delta", color: "lightblue", fig: "FramedRectangle" },
    { key: "Epsilon", color: "lightblue", fig: "Cloud" },
    { key: "Zeta", color: "lightblue", fig: "Procedure" }
  ];

周圍/背景對象不必是Shape。您可以使用圖片或什至更復(fù)雜的對象（例如Panel）。

復(fù)雜內(nèi)容

自動面板的內(nèi)容不必限于單個TextBlock－您可以具有任意復(fù)雜的對象面板。在此示例中，內(nèi)容是具有三行TextBlocks的表格面板。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { fill: $(go.Brush, "Linear", { 0: "white", 1: "lightblue" }),
          stroke: "darkblue", strokeWidth: 2 }),
      $(go.Panel, "Table",
        { defaultAlignment: go.Spot.Left, margin: 4 },
        $(go.RowColumnDefinition, { column: 1, width: 4 }),
        $(go.TextBlock,
          { row: 0, column: 0, columnSpan: 3, alignment: go.Spot.Center },
          { font: "bold 12pt sans-serif" },
          new go.Binding("text", "key")),
        $(go.TextBlock, "First: ",
          { row: 1, column: 0 }),
        $(go.TextBlock,
          { row: 1, column: 2 },
          new go.Binding("text", "prop1")),
        $(go.TextBlock, "Second: ",
          { row: 2, column: 0 }),
        $(go.TextBlock,
          { row: 2, column: 2 },
          new go.Binding("text", "prop2"))
      )
    );
 
  diagram.model.nodeDataArray = [
    { key: "Alpha", prop1: "value of 'prop1'", prop2: "the other property" }
  ];

固定大小的節(jié)點

上面的示例使“自動”面板包圍了某些內(nèi)容，其中內(nèi)容的大小可能不同。這導(dǎo)致節(jié)點具有不同的大小。

如果希望將Panel（因此Node，因為Node繼承自Part，而Part繼承自Panel）的大小固定，則在該P(yáng)anel上設(shè)置GraphObject.desiredSize。（等效地，您可以設(shè)置GraphObject.width和GraphObject.height。）這可能會導(dǎo)致內(nèi)容裁剪過大，或者如果內(nèi)容小于“自動”提供的可用區(qū)域，則可能會導(dǎo)致多余的空間面板。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { desiredSize: new go.Size(100, 50) },  // on Panel
      $(go.Shape,
        new go.Binding("figure", "fig"),
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );
  diagram.model.nodeDataArray = [
    { key: "Alpha", color: "lightblue", fig: "RoundedRectangle" },
    { key: "Beta", color: "lightblue", fig: "Ellipse" },
    { key: "Gamma", color: "lightblue", fig: "Hexagon" },
    { key: "Delta", color: "lightblue", fig: "FramedRectangle" },
    { key: "Epsilon,Epsilon,Epsilon", color: "lightblue", fig: "Cloud" },
    { key: "Z", color: "lightblue", fig: "Procedure" }
  ];

請注意，“ Epsilon ...” TextBlock是如何在面板的寬度受限制的有限寬度的約束下進(jìn)行測量的。這導(dǎo)致文本在（可能）被剪切之前被包裝。

您可能不希望設(shè)置主要元素的ShapeSize，在這種情況下為Shape。如果您這樣做，則不會限制面板中內(nèi)容元素的大小。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { desiredSize: new go.Size(100, 50) },  // on main element, not on Panel
        new go.Binding("figure", "fig"),
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );
  diagram.model.nodeDataArray = [
    { key: "Alpha", color: "lightblue", fig: "RoundedRectangle" },
    { key: "Beta", color: "lightblue", fig: "Ellipse" },
    { key: "Gamma", color: "lightblue", fig: "Hexagon" },
    { key: "Delta", color: "lightblue", fig: "FramedRectangle" },
    { key: "Epsilon,Epsilon,Epsilon", color: "lightblue", fig: "Cloud" },
    { key: "Z", color: "lightblue", fig: "Procedure" }
  ];

注意如何在不限制面板寬度的情況下測量TextBlock。這導(dǎo)致文本被視為單個長行，然后被面板剪切。

=====================================================

想要購買GoJS正版授權(quán)的朋友可以。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼