gojs-go.Panels(面板元素)

最新推荐文章于 2023-07-21 15:02:57 发布

加冰麋鹿的二狼

最新推荐文章于 2023-07-21 15:02:57 发布

阅读量3.2k

点赞数 3

分类专栏：前端 gojs常用API gojs 文章标签： gojs gojsapi Panels

本文链接：https://blog.csdn.net/qq_29287561/article/details/88038178

版权

gojs 同时被 3 个专栏收录

15 篇文章 3 订阅

订阅专栏

前端

11 篇文章 2 订阅

订阅专栏

gojs常用API

6 篇文章 1 订阅

订阅专栏

//官网例子更好
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的括号
					));