Auto布局

  1. myDiagram.nodeTemplateMap.add("Auto布局",
  2.             $(go.Node,
  3.                 $(go.Panel, "Auto", {
  4.                         background: "#F5F5F5"
  5.                     },
  6.                     $(go.Shape, "RoundedRectangle", {
  7.                         width: 150,
  8.                         height: 150,
  9.                         fill: "#aecaea",
  10.                         stroke: null
  11.                     }),
  12.                     $(go.Shape, "RoundedRectangle", {
  13.                         width: 100,
  14.                         height: 100,
  15.                         fill: "#ffda92",
  16.                         stroke: null
  17.                     }),
  18.                     $(go.TextBlock, { //控制文字显示
  19.                         //alignment: go.Spot.TopLeft,
  20.                         font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
  21.                         stroke: "#5687b3",
  22.                         textAlign: "center",
  23.                     }, new go.Binding("text").makeTwoWay())
  24.                 ) //go.Panel的括号
  25.             ) //go.Node的括号

image.png

Vertical布局

  1. myDiagram.nodeTemplateMap.add("Vertical布局",
  2.             $(go.Node,
  3.                 $(go.Panel, go.Panel.Vertical, {
  4.                         background: "#F5F5F5"
  5.                     },
  6.                     $(go.Shape, "RoundedRectangle", {
  7.                         width: 150,
  8.                         height: 150,
  9.                         fill: "#aecaea",
  10.                         stroke: null
  11.                     }),
  12.                     $(go.Shape, "RoundedRectangle", {
  13.                         width: 100,
  14.                         height: 100,
  15.                         fill: "#ffda92",
  16.                         stroke: null
  17.                     }),
  18.                     $(go.TextBlock, { //控制文字显示
  19.                         font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
  20.                         stroke: "#5687b3",
  21.                         textAlign: "center",
  22.                     }, new go.Binding("text").makeTwoWay())
  23.                 ) //go.Panel的括号
  24.             ) //go.Node的括号
  25.         );

image.png

Horizontal布局

  1. myDiagram.nodeTemplateMap.add("Horizontal布局",
  2.             $(go.Node,
  3.                 $(go.Panel, "Horizontal", {
  4.                         background: "#F5F5F5"
  5.                     },
  6.                     $(go.Shape, "RoundedRectangle", {
  7.                         width: 150,
  8.                         height: 150,
  9.                         fill: "#aecaea",
  10.                         stroke: null
  11.                     }),
  12.                     $(go.Shape, "RoundedRectangle", {
  13.                         width: 100,
  14.                         height: 100,
  15.                         fill: "#ffda92",
  16.                         stroke: null
  17.                     }),
  18.                     $(go.TextBlock, { //控制文字显示
  19.                         font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
  20.                         stroke: "#5687b3",
  21.                         textAlign: "center",
  22.                     }, new go.Binding("text").makeTwoWay())
  23.                 ) //go.Panel的括号
  24.             ) //go.Node的括号
  25.         );

image.png

Spot布局

  1. myDiagram.nodeTemplateMap.add("Spot布局",
  2.             $(go.Node,
  3.                 $(go.Panel, "Spot", {
  4.                         background: "#F5F5F5"
  5.                     },
  6.                     $(go.Shape, "RoundedRectangle", {
  7.                         width: 150,
  8.                         height: 150,
  9.                         fill: "#aecaea",
  10.                         stroke: null
  11.                     }),
  12.                     $(go.TextBlock, { //控制文字显示
  13.                         font: "bold 10pt Microsoft YaHei, Arial, sans-serif",
  14.                         stroke: "#5687b3",
  15.                         width: 100,
  16.                         alignment: go.Spot.Center,
  17.                         text: "以蓝色为主块,其他块在蓝色块上的相对位置"
  18.                     }),
  19.                     $(go.Shape, "RoundedRectangle", {
  20.                         width: 100,
  21.                         height: 100,
  22.                         alignment: go.Spot.TopLeft,
  23.                         fill: "#ffda92",
  24.                         stroke: null
  25.                     }),
  26.                     $(go.TextBlock, { //控制文字显示
  27.                         font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
  28.                         stroke: "#5687b3",
  29.                         alignment: go.Spot.TopRight,
  30.                         textAlign: "center",
  31.                     }, new go.Binding("text").makeTwoWay())
  32.                 ) //go.Panel的括号
  33.             ) //go.Node的括号
  34.         );

image.png

Position布局

  1. myDiagram.nodeTemplateMap.add("Position布局",
  2.             $(go.Node,
  3.                 $(go.Panel, "Position", {
  4.                         background: "#F5F5F5"
  5.                     },
  6.                     $(go.Panel, "Auto", {
  7.                             position: new go.Point(0, 0)
  8.                         },
  9.                         $(go.Shape, "RoundedRectangle", {
  10.                             width: 40,
  11.                             height: 40,
  12.                             fill: "#aecaea",
  13.                             stroke: null
  14.                         }),
  15.                         $(go.TextBlock, { //控制文字显示
  16.                             font: "bold 10pt Microsoft YaHei, Arial, sans-serif",
  17.                             stroke: "#5687b3",
  18.                             textAlign: "center",
  19.                             width: 40,
  20.                             height: 40,
  21.                             text: "坐标\n0,0"
  22.                         })), $(go.Panel, "Auto", {
  23.                             position: new go.Point(40, 40)
  24.                         },
  25.                         $(go.Shape, "RoundedRectangle", {
  26.                             width: 40,
  27.                             height: 40,
  28.                             fill: "#ffda92",
  29.                             stroke: null
  30.                         }),
  31.                         $(go.TextBlock, { //控制文字显示
  32.                             font: "bold 10pt Microsoft YaHei, Arial, sans-serif",
  33.                             stroke: "#5687b3",
  34.                             textAlign: "center",
  35.                             width: 40,
  36.                             height: 40,
  37.                             text: "坐标\n40,40"
  38.                         })), $(go.Panel, "Auto", {
  39.                             position: new go.Point(80, 80)
  40.                         },
  41.                         $(go.Shape, "RoundedRectangle", {
  42.                             width: 40,
  43.                             height: 40,
  44.                             fill: "#aecaea",
  45.                             stroke: null
  46.                         }),
  47.                         $(go.TextBlock, { //控制文字显示
  48.                             font: "bold 10pt Microsoft YaHei, Arial, sans-serif",
  49.                             stroke: "#5687b3",
  50.                             textAlign: "center",
  51.                             width: 40,
  52.                             height: 40,
  53.                             text: "坐标\n80,80"
  54.                         })), $(go.Panel, "Auto", {
  55.                             position: new go.Point(120, 120)
  56.                         },
  57.                         $(go.Shape, "RoundedRectangle", {
  58.                             width: 40,
  59.                             height: 40,
  60.                             fill: "#ffda92",
  61.                             stroke: null
  62.                         }),
  63.                         $(go.TextBlock, { //控制文字显示
  64.                             font: "bold 6pt Microsoft YaHei, Arial, sans-serif",
  65.                             stroke: "#5687b3",
  66.                             textAlign: "center",
  67.                             width: 40,
  68.                             height: 40,
  69.                             text: "120,120"
  70.                         })),
  71.                     $(go.TextBlock, { //控制文字显示
  72.                         font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
  73.                         stroke: "#5687b3",
  74.                         textAlign: "center",
  75.                         position: new go.Point(0, 130),
  76.                     }, new go.Binding("text").makeTwoWay())
  77.                 ) //go.Panel的括号
  78.             ) //go.Node的括号
  79.         );

image.png

Table布局

  1. myDiagram.nodeTemplateMap.add("Table布局",
  2.             $(go.Node,
  3.                 $(go.Panel, "Table", {
  4.                         background: "#F5F5F5"
  5.                     },
  6.                     $(go.TextBlock, "row 0\ncol 0", {
  7.                         row: 0,
  8.                         column: 0,
  9.                         margin: 2,
  10.                         background: "#ffda92"
  11.                     }),
  12.                     $(go.TextBlock, "row 0\ncol 1", {
  13.                         row: 0,
  14.                         column: 1,
  15.                         margin: 2,
  16.                         background: "#ffda92"
  17.                     }),
  18.                     $(go.TextBlock, "row 1\ncol 0", {
  19.                         row: 1,
  20.                         column: 0,
  21.                         margin: 2,
  22.                         background: "#ffda92"
  23.                     }),
  24.                     $(go.TextBlock, "row 1\ncol 2", {
  25.                         row: 1,
  26.                         column: 2,
  27.                         margin: 2,
  28.                         background: "#ffda92"
  29.                     }),
  30.                     $(go.TextBlock, { //控制文字显示
  31.                         row: 2,
  32.                         column: 0,
  33.                         margin: 2,
  34.                         columnSpan: 3,
  35.                         font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
  36.                         stroke: "#5687b3",
  37.                         textAlign: "center",
  38.                     }, new go.Binding("text").makeTwoWay())
  39.                 ) //go.Panel的括号
  40.             ));

image.png