流程图控件GoJS教程：调试建议（下）

开发图表应用程序不仅仅需要编写一些使用GoJS库的JavaScript代码。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.1发布，修复了一些bug，增强用户体验，赶快下载试试吧~

GoJS最新试用版

调试节点面板设计

在构建自己的节点模板时，有时节点中的对象的大小和位置可能无法达到您想要的方式。重要的是要了解如何在面板中组装对象。您将要重新阅读：

• 使用GraphObjects构建

• 文字区块

• 形状

• 图片

• 面板

• 桌子面板

• GraphObjects的大小

假设您要一个由两个TextBlock组成的节点，一个在另一个之上。您可以从以下开始：

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

但是，等等-您希望节点为固定大小。因此，您可以设置节点的宽度和高度：

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都在中心附近。这是为什么于调试目的，让我们更改每个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"}];

现在很明显，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"}];

现在具有红色背景的面板确实填满了整个外部汽车面板，在其主要形状内充当边框。但是，石灰绿色和青绿色的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"}];

现在，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来更改它。）

我们都做完了吗许。文本更改大小会怎样种测试方法是使用长短字符串使用不同的模型数据创建一堆节点。

但是，为了演示另一种调试技术，我们将使Node Part.resizable。您可以交互地调整节点的大小（整个节点，因为我们没有设置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;

请注意，当节点变窄时，它将如何剪切文本而不是自动换行。假设您希望文本自动换行。

这可以通过水平拉伸TextBlocks来实现，这将定义它们的宽度，从而迫使文本换行。但是，当文本方向从左到右时，文本通常绘制在TextBlock边界的左侧。如果希望每个TextBlock在其边界内居中，则需要将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沿可用区域的宽度延伸。请注意，随着节点变窄，文本如何换行，从而导致TextBlocks变得更窄。当然，如果没有足够的空间来渲染所有文本，则将剪切TextBlocks。

现在我们只需要除去用于调试的彩色背景和可调整大小性，并分配所需的颜色和字体即可。

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正版授权的朋友可以咨询官方客服。

标签：