GoJS 绘图 (五) ：定位面板与垂直面板（Panel）
Panel是负责任的大小和位置的所有元素。每个面板建立自己的坐标系。一个面板的元件的绘制顺序表示建立这些元素的Z轴排序。
虽然只有一个面板，也有许多不同类型的面板，每个都有其自己的目的是如何安排的元素。当你建立一个面板，你通常会指定其Panel.type作为构造函数参数。这些都是存在的各种面板组成：
Panel.Position
Panel.Vertical
Panel.Horizontal
Panel.Auto
Panel.Spot
Panel.Table
Panel.Viewbox
Panel.Link
Panel.Grid
位置面板
最简单的一种面板是“Position”（Panel.Position）。每个元素获得其正常大小，无论其默认大小或指定GraphObject.desiredSize （或等价的GraphObject.width和GraphObject.height）。
每个元素的位置是由GraphObject.position属性指定。如果没有指定位置时，元件被定位在（0,0）。所有位置都是面板自己的坐标系中，而不是在文件范围的坐标系。位置可能包括负坐标。
面板的大小刚好足以容纳所有元素。如果你希望它是比大一点，可以设置Panel.padding属性。
diagram.add(G(
go.Part,
go.Panel.Position,
{
background: '# eee'
},
G(
go.TextBlock,
{
text: '0, 0',
background: '# 394'
}
),
G(
go.TextBlock,
{
text: '100, 100',
background: '# 394',
position: new go.Point(100, 100)
}
),
G(
go.TextBlock,
{
text: '0, 100',
background: '# 394',
position: new go.Point(0, 100)
}
),
G(
go.TextBlock,
{
text: '100, 000',
background: '# 394',
position: new go.Point(100, 0)
}
)
));
垂直面板
面板的所有面板元件的排列垂直从上到下。每个元件获得其正常高度和任其正常的宽度，或者拉伸时的面板的宽度。如果元素的GraphObject.stretch有任何垂直伸展的部分，它被忽略。
整个面板的宽度匹配最宽的对象。注意，在最后textBlock不设置GraphObject.width属性，使得GraphObject.stretch值是有效的。
diagram.add(G(
go.Part,
go.Panel.Vertical,
{
background: '# eee'
},
G(
go.TextBlock,
{
text: '左',
background: '# 394',
alignment: go.Spot.Left
}
),
G(
go.TextBlock,
{
text: '中',
background: '# 394',
alignment: go.Spot.Center
}
),
G(
go.TextBlock,
{
text: '右',
background: '# 394',
alignment: go.Spot.Right
}
),
G(
go.TextBlock,
{
text: '－－－－拉伸面板－－－－',
background: '# 394'
}
),
G(
go.TextBlock,
{
text: '扩展背景',
background: '# 394',
alignment: go.Spot.Right,
stretch: go.GraphObject.Fill
}
)
));
因为没有指定面板的宽度，其宽度是最宽的元件的宽度。可以通过MAXSIZE来限制。
G( go.TextBlock, { text: '扩展背景', background: '# 394', alignment: go.Spot.Right, stretch: go.GraphObject.Fill, MAXSIZE: new go.Size(100, NAN) })关键字：JavaScript, panel, textblock, text
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
