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

GoJS現(xiàn)已更新至最新版本2.1發(fā)布，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

調(diào)試節(jié)點面板設計

在構建自己的節(jié)點模板時，有時節(jié)點中的對象的大小和位置可能無法達到您想要的方式。重要的是要了解如何在面板中組裝對象。您將要重新閱讀：

• 使用GraphObjects構建

• 文字區(qū)塊

• 形狀

• 圖片

• 面板

• 桌子面板

• GraphObjects的大小

假設您要一個由兩個TextBlock組成的節(jié)點，一個在另一個之上。您可以從以下開始：

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",
      { margin: 3 },
      $(go.TextBlock,
        new go.Binding("text", "t1")),
      $(go.TextBlock,
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

但是，等等-您希望節(jié)點為固定大小。因此，您可以設置節(jié)點的寬度和高度：

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",
      { margin: 3 },
      $(go.TextBlock,
        new go.Binding("text", "t1")),
      $(go.TextBlock,
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

看起來更好，但是您很驚訝兩個TextBlocks都在中心附近。這是為什么？出于調(diào)試目的，讓我們更改每個TextBlock和嵌套面板的GraphObject.background顏色。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",             { background: "red" },
      { margin: 3 },
      $(go.TextBlock,                   { background: "lime" },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                   { background: "cyan" },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

現(xiàn)在很明顯，TextBlocks的大小不超過容納文本的大小，Panel也不超過容納兩個TextBlocks的大小。

因此，您認為只需要GraphObject.stretch面板即可。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill },
      $(go.TextBlock,                   { background: "lime" },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                   { background: "cyan" },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

現(xiàn)在具有紅色背景的面板確實填滿了整個外部汽車面板，在其主要形狀內(nèi)充當邊框。但是，石灰綠色和青綠色的TextBlocks仍然只是它們的自然高度。

如果您希望文本在垂直方向上均勻間隔，您可能會認為您只需要拉伸這兩個TextBlocks。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill },
      $(go.TextBlock,                   { background: "lime" },
        { stretch: go.GraphObject.Fill },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                   { background: "cyan" },
        { stretch: go.GraphObject.Fill },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

現(xiàn)在，TextBlocks在水平而不是垂直拉伸！原因是垂直面板從不垂直拉伸其元素。它始終以其自然高度將其元素堆疊在一起。當垂直面板的高度超過其元素的堆疊時，底部將有多余的空間。

而不是垂直面板，我們應該使用表格面板。這需要在每個元素（即每個TextBlock）上分配GraphObject.row。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill },
      $(go.TextBlock,                { background: "lime" },
        { row: 0 },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                { background: "cyan" },
        { row: 1 },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

因為默認情況下元素在表格面板的單元格中居中，所以不需要拉伸TextBlocks。（您可以通過設置Panel.defaultAlignment或Panel.defaultStretch來更改它。）

我們都做完了嗎？也許。文本更改大小會怎樣？一種測試方法是使用長短字符串使用不同的模型數(shù)據(jù)創(chuàng)建一堆節(jié)點。

但是，為了演示另一種調(diào)試技術，我們將使Node Part.resizable。您可以交互地調(diào)整節(jié)點的大小（整個節(jié)點，因為我們沒有設置Part.resizeObjectName），因此您可以看到嵌套的Panel和TextBlocks如何處理約束的大小。

diagram.nodeTemplate =
  $(go.Node, "Auto",                 { resizable: true },
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill },
      $(go.TextBlock,                { background: "lime" },
        { row: 0 },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                { background: "cyan" },
        { row: 1 },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];
diagram.findNodeForData(diagram.model.nodeDataArray[0]).isSelected = true;

請注意，當節(jié)點變窄時，它將如何剪切文本而不是自動換行。假設您希望文本自動換行。

這可以通過水平拉伸TextBlocks來實現(xiàn)，這將定義它們的寬度，從而迫使文本換行。但是，當文本方向從左到右時，文本通常繪制在TextBlock邊界的左側(cè)。如果希望每個TextBlock在其邊界內(nèi)居中，則需要將TextBlock.textAlign設置為“ center”。

diagram.nodeTemplate =
  $(go.Node, "Auto",                 { resizable: true },
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill,
        defaultStretch: go.GraphObject.Horizontal },
      $(go.TextBlock,                { background: "lime" },
        { row: 0, textAlign: "center" },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                { background: "cyan" },
        { row: 1, textAlign: "center" },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];
diagram.findNodeForData(diagram.model.nodeDataArray[0]).isSelected = true;

可以看到TextBlocks沿可用區(qū)域的寬度延伸。請注意，隨著節(jié)點變窄，文本如何換行，從而導致TextBlocks變得更窄。當然，如果沒有足夠的空間來渲染所有文本，則將剪切TextBlocks。

現(xiàn)在我們只需要除去用于調(diào)試的彩色背景和可調(diào)整大小性，并分配所需的顏色和字體即可。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",
      { margin: 3, stretch: go.GraphObject.Fill,
        defaultStretch: go.GraphObject.Horizontal, background: "purple" },
      $(go.TextBlock,
        { row: 0, textAlign: "center", stroke: "white", font: "bold 11pt sans-serif" },
        new go.Binding("text", "t1")),
      $(go.TextBlock,
        { row: 1, textAlign: "center", stroke: "white", font: "bold 11pt sans-serif" },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];

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

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