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

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

GoJS現已更新至最新版本2.1發布，添加了動畫功能，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

周邊內容

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

簡單邊框

許多簡單的節點只是由一個的面板類型的面板，自動帶有圍繞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" }
  ];

形狀節點

內容周圍的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。您可以使用圖片或什至更復雜的對象（例如Panel）。

復雜內容

自動面板的內容不必限于單個TextBlock－您可以具有任意復雜的對象面板。在此示例中，內容是具有三行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" }
  ];

固定大小的節點

上面的示例使“自動”面板包圍了某些內容，其中內容的大小可能不同。這導致節點具有不同的大小。

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

  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是如何在面板的寬度受限制的有限寬度的約束下進行測量的。這導致文本在（可能）被剪切之前被包裝。

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

  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。這導致文本被視為單個長行，然后被面板剪切。

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

想要購買GoJS正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼