GOJS教程 -- 如何使用Nodes

發表於   |   分類於   |  

你可以自定义节点的样式和行为。

常规节点

简单的框图节点

大多数情况下，我们的节点都是一个框包含着文本信息（TextBlock），并且将排列属性设置为Panel.Auto。

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

结果：
node

其他形状的框图节点

下面的例子中展示其他几种形状的框图：

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

结果：
node

较复杂的框图节点

一个排列参数设置为Panel.Auto的节点中，你不必将TextBlock局限为一个，你可以根据情况自行组合Panel对象。下面的例子中就使用TablePanel包含了多个TextBlock。

diagram.nodeTemplate =
$(go.Node, "Auto",
  $(go.Shape,
    { fill: $(go.Brush, 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" }
];

结果：
node

简单组合节点

图标节点

像下面例子这种的节点，一般元素的排列属性都设置为Panel.Vertical，也就是说上面是图，下面是文字信息。

diagram.nodeTemplate =
$(go.Node, "Vertical",
  $(go.Picture,
    { maxSize: new go.Size(50, 50) },
    new go.Binding("source", "img")),
  $(go.TextBlock,
    { margin: new go.Margin(3, 0, 0, 0),
      maxSize: new go.Size(100, 30),
      editable: true, isMultiline: false },
    new go.Binding("text", "text"))
);

diagram.model.nodeDataArray = [
    { text: "kitten", img: "images/50x40.png" }
];

结果：
node

小图标节点

一般这种节点元素的排列属性为Panel.Horizontal，水平排列，就是左边是图，右边是文字信息。

diagram.nodeTemplate =
$(go.Node, "Horizontal",
  $(go.Picture,
    { maxSize: new go.Size(16, 16) },
    new go.Binding("source", "img")),
  $(go.TextBlock,
    { margin: new go.Margin(0, 0, 0, 2) },
    new go.Binding("text", "text"))
);

diagram.model.nodeDataArray = [
    { text: "kitten", img: "images/50x40.png" }
];

结果：
node

复杂组合节点

有时候，你需要在节点中展示更多的信息。那么我们就需要将元素排列属性设置为Panel.Spot，这个属性的意思就是Node里的元素都排列在这个Node中的各个锚点上。

diagram.nodeTemplate =
$(go.Node, "Spot",
  // the main content:
  $(go.Panel, "Vertical",
    $(go.Picture,
      { maxSize: new go.Size(50, 50) },
      new go.Binding("source", "img")),
    $(go.TextBlock,
      { margin: new go.Margin(3, 0, 0, 0) },
      new go.Binding("text", "text"),
      new go.Binding("stroke", "error", function(err) { return err ? "red" : "black" }))
  ),
  // decorations:
  $(go.Shape, "TriangleUp",
    { alignment: go.Spot.TopLeft,
      fill: "yellow", width: 14, height: 14,
      visible: false },
    new go.Binding("visible", "info", function(i) { return i ? true : false; })),
  $(go.Shape, "StopSign",
    { alignment: go.Spot.TopRight,
      fill: "red", width: 14, height: 14,
      visible: false },
    new go.Binding("visible", "error")),
  {
    toolTip:
      $(go.Adornment, "Auto",
        $(go.Shape, { fill: "#FFFFCC" },
          new go.Binding("visible", "info", function(i) { return i ? true : false; })),
        $(go.TextBlock, { margin: 4 },
          new go.Binding("text", "info"))
      )
  }
);

diagram.model.nodeDataArray = [
    { text: "kitten", img: "images/50x40.png", info: "" },
    { text: "kitten", img: "images/50x40.png", error: true, info: "shredded curtains" }
];

结果：
node
分享到：