logo GoJS教程 2019 我也要发布文档

自定义节点之边框


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

流程图控件GoJS教程:自定义节点之边框

形状节点

内容周围的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" }
  ];

流程图控件GoJS教程:自定义节点之边框

周围/背景对象不必是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" }
  ];

流程图控件GoJS教程:自定义节点之边框

固定大小的节点

上面的示例使“自动”面板包围了某些内容,其中内容的大小可能不同。这导致节点具有不同的大小。

如果希望将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" }
  ];

流程图控件GoJS教程:自定义节点之边框

请注意,“ 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" }
  ];

流程图控件GoJS教程:自定义节点之边框

注意如何在不限制面板宽度的情况下测量TextBlock。这导致文本被视为单个长行,然后被面板剪切。

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

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

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

流程图控件GoJS教程:自定义节点之边框