流程图控件GoJS教程:调试建议(下)

翻译|使用教程|编辑:吴园园|2019-12-13 14:02:06.583|阅读 55 次

概述:开发图表应用程序不仅仅需要编写一些使用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"}];

流程图控件GoJS教程:调试建议(下)

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

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

流程图控件GoJS教程:调试建议(下)

看起来更好,但是您很惊讶两个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"}];

流程图控件GoJS教程:调试建议(下)

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

流程图控件GoJS教程:调试建议(下)

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

流程图控件GoJS教程:调试建议(下)

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

流程图控件GoJS教程:调试建议(下)

因为默认情况下元素在表格面板的单元格中居中,所以不需要拉伸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;

流程图控件GoJS教程:调试建议(下)

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

这可以通过水平拉伸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;

流程图控件GoJS教程:调试建议(下)

可以看到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教程:调试建议(下)

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

想要购买GoJS正版授权的朋友可以咨询慧都官方客服

流程图控件GoJS教程:调试建议(下)



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:GoJS https://gojs.net/latest/intro/debugging.html

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
GoJS

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

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat