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

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

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

調(diào)試節(jié)點(diǎn)面板設(shè)計(jì)

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

• 使用GraphObjects構(gòu)建

• 文字區(qū)塊

• 形狀

• 圖片

• 面板

• 桌子面板

• GraphObjects的大小

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

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é)點(diǎn)為固定大小。因此，您可以設(shè)置節(jié)點(diǎn)的寬度和高度：

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

看起來更好，但是您很驚訝兩個(gè)TextBlocks都在中心附近。這是為什么？出于調(diào)試目的，讓我們更改每個(gè)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也不超過容納兩個(gè)TextBlocks的大小。

因此，您認(rèn)為只需要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)在具有紅色背景的面板確實(shí)填滿了整個(gè)外部汽車面板，在其主要形狀內(nèi)充當(dāng)邊框。但是，石灰綠色和青綠色的TextBlocks仍然只是它們的自然高度。

如果您希望文本在垂直方向上均勻間隔，您可能會(huì)認(rèn)為您只需要拉伸這兩個(gè)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在水平而不是垂直拉伸！原因是垂直面板從不垂直拉伸其元素。它始終以其自然高度將其元素堆疊在一起。當(dāng)垂直面板的高度超過其元素的堆疊時(shí)，底部將有多余的空間。

而不是垂直面板，我們應(yīng)該使用表格面板。這需要在每個(gè)元素（即每個(gè)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"}];

因?yàn)槟J(rèn)情況下元素在表格面板的單元格中居中，所以不需要拉伸TextBlocks。（您可以通過設(shè)置Panel.defaultAlignment或Panel.defaultStretch來更改它。）

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

但是，為了演示另一種調(diào)試技術(shù)，我們將使Node Part.resizable。您可以交互地調(diào)整節(jié)點(diǎn)的大小（整個(gè)節(jié)點(diǎn)，因?yàn)槲覀儧]有設(shè)置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;

請(qǐng)注意，當(dāng)節(jié)點(diǎn)變窄時(shí)，它將如何剪切文本而不是自動(dòng)換行。假設(shè)您希望文本自動(dòng)換行。

這可以通過水平拉伸TextBlocks來實(shí)現(xiàn)，這將定義它們的寬度，從而迫使文本換行。但是，當(dāng)文本方向從左到右時(shí)，文本通常繪制在TextBlock邊界的左側(cè)。如果希望每個(gè)TextBlock在其邊界內(nèi)居中，則需要將TextBlock.textAlign設(shè)置為“ 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ū)域的寬度延伸。請(qǐng)注意，隨著節(jié)點(diǎn)變窄，文本如何換行，從而導(dǎo)致TextBlocks變得更窄。當(dāng)然，如果沒有足夠的空間來渲染所有文本，則將剪切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正版授權(quán)的朋友可以。