流程图控件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正版授权的朋友可以。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼