gojs-go.Panels(面板元素)

//官网例子更好
Auto布局 

myDiagram.nodeTemplateMap.add("Auto布局",
					$(go.Node,
						$(go.Panel, "Auto", {
								background: "#F5F5F5"
							},
							$(go.Shape, "RoundedRectangle", {
								width: 150,
								height: 150,
								fill: "#aecaea",
								stroke: null
							}),
							$(go.Shape, "RoundedRectangle", {
								width: 100,
								height: 100,
								fill: "#ffda92",
								stroke: null
							}),
							$(go.TextBlock, { //控制文字显示
								//alignment: go.Spot.TopLeft,
								font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
								stroke: "#5687b3",
								textAlign: "center",
							}, new go.Binding("text").makeTwoWay())
						) //go.Panel的括号
					) //go.Node的括号
				);

Vertical布局

myDiagram.nodeTemplateMap.add("Vertical布局",
					$(go.Node,
						$(go.Panel, go.Panel.Vertical, {
								background: "#F5F5F5"
							},
							$(go.Shape, "RoundedRectangle", {
								width: 150,
								height: 150,
								fill: "#aecaea",
								stroke: null
							}),
							$(go.Shape, "RoundedRectangle", {
								width: 100,
								height: 100,
								fill: "#ffda92",
								stroke: null
							}),
							$(go.TextBlock, { //控制文字显示
								font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
								stroke: "#5687b3",
								textAlign: "center",
							}, new go.Binding("text").makeTwoWay())
						) //go.Panel的括号
					) //go.Node的括号
				);

Horizontal布局

myDiagram.nodeTemplateMap.add("Horizontal布局",
					$(go.Node,
						$(go.Panel, "Horizontal", {
								background: "#F5F5F5"
							},
							$(go.Shape, "RoundedRectangle", {
								width: 150,
								height: 150,
								fill: "#aecaea",
								stroke: null
							}),
							$(go.Shape, "RoundedRectangle", {
								width: 100,
								height: 100,
								fill: "#ffda92",
								stroke: null
							}),
							$(go.TextBlock, { //控制文字显示
								font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
								stroke: "#5687b3",
								textAlign: "center",
							}, new go.Binding("text").makeTwoWay())
						) //go.Panel的括号
					) //go.Node的括号
				);

Spot布局

myDiagram.nodeTemplateMap.add("Spot布局",
					$(go.Node,
						$(go.Panel, "Spot", {
								background: "#F5F5F5"
							},
							$(go.Shape, "RoundedRectangle", {
								width: 150,
								height: 150,
								fill: "#aecaea",
								stroke: null
							}),
							$(go.TextBlock, { //控制文字显示
								font: "bold 10pt Microsoft YaHei, Arial, sans-serif",
								stroke: "#5687b3",
								width: 100,
								alignment: go.Spot.Center,
								text: "以蓝色为主块,其他块在蓝色块上的相对位置"
							}),
							$(go.Shape, "RoundedRectangle", {
								width: 100,
								height: 100,
								alignment: go.Spot.TopLeft,
								fill: "#ffda92",
								stroke: null
							}),
							$(go.TextBlock, { //控制文字显示
								font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
								stroke: "#5687b3",
								alignment: go.Spot.TopRight,
								textAlign: "center",
							}, new go.Binding("text").makeTwoWay())
						) //go.Panel的括号
					) //go.Node的括号
				);

Position布局

myDiagram.nodeTemplateMap.add("Position布局",
					$(go.Node,
						$(go.Panel, "Position", {
								background: "#F5F5F5"
							},
							$(go.Panel, "Auto", {
									position: new go.Point(0, 0)
								},
								$(go.Shape, "RoundedRectangle", {
									width: 40,
									height: 40,
									fill: "#aecaea",
									stroke: null
								}),
								$(go.TextBlock, { //控制文字显示
									font: "bold 10pt Microsoft YaHei, Arial, sans-serif",
									stroke: "#5687b3",
									textAlign: "center",
									width: 40,
									height: 40,
									text: "坐标\n0,0"
								})), $(go.Panel, "Auto", {
									position: new go.Point(40, 40)
								},
								$(go.Shape, "RoundedRectangle", {
									width: 40,
									height: 40,
									fill: "#ffda92",
									stroke: null
								}),
								$(go.TextBlock, { //控制文字显示
									font: "bold 10pt Microsoft YaHei, Arial, sans-serif",
									stroke: "#5687b3",
									textAlign: "center",
									width: 40,
									height: 40,
									text: "坐标\n40,40"
								})), $(go.Panel, "Auto", {
									position: new go.Point(80, 80)
								},
								$(go.Shape, "RoundedRectangle", {
									width: 40,
									height: 40,
									fill: "#aecaea",
									stroke: null
								}),
								$(go.TextBlock, { //控制文字显示
									font: "bold 10pt Microsoft YaHei, Arial, sans-serif",
									stroke: "#5687b3",
									textAlign: "center",
									width: 40,
									height: 40,
									text: "坐标\n80,80"
								})), $(go.Panel, "Auto", {
									position: new go.Point(120, 120)
								},
								$(go.Shape, "RoundedRectangle", {
									width: 40,
									height: 40,
									fill: "#ffda92",
									stroke: null
								}),
								$(go.TextBlock, { //控制文字显示
									font: "bold 6pt Microsoft YaHei, Arial, sans-serif",
									stroke: "#5687b3",
									textAlign: "center",
									width: 40,
									height: 40,
									text: "120,120"
								})),
							$(go.TextBlock, { //控制文字显示
								font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
								stroke: "#5687b3",
								textAlign: "center",
								position: new go.Point(0, 130),
							}, new go.Binding("text").makeTwoWay())
						) //go.Panel的括号
					) //go.Node的括号
				);

Table布局

myDiagram.nodeTemplateMap.add("Table布局",
					$(go.Node,
						$(go.Panel, "Table", {
								background: "#F5F5F5"
							},
							$(go.TextBlock, "row 0\ncol 0", {
								row: 0,
								column: 0,
								margin: 2,
								background: "#ffda92"
							}),
							$(go.TextBlock, "row 0\ncol 1", {
								row: 0,
								column: 1,
								margin: 2,
								background: "#ffda92"
							}),
							$(go.TextBlock, "row 1\ncol 0", {
								row: 1,
								column: 0,
								margin: 2,
								background: "#ffda92"
							}),
							$(go.TextBlock, "row 1\ncol 2", {
								row: 1,
								column: 2,
								margin: 2,
								background: "#ffda92"
							}),
							$(go.TextBlock, { //控制文字显示
								row: 2,
								column: 0,
								margin: 2,
								columnSpan: 3,
								font: "bold 16pt Microsoft YaHei, Arial, sans-serif",
								stroke: "#5687b3",
								textAlign: "center",
							}, new go.Binding("text").makeTwoWay())
						) //go.Panel的括号					) //go.Node的括号
					));

标签：Panels,40,height,width,stroke,go,gojs,Panel
来源： https://blog.csdn.net/qq_29287561/article/details/88038178