GoJS 绘图 (六) ：横向面板（panel）

横向面板

属性和纵向面板基本相同只是排列顺序不同

diagram.add(G(
    go.Part,
    go.Panel.Horizontal,
    {
        position: new go.Point(500, 0),
        background: '#ddd',
        height: 150
    },
    G(
        go.Shape,
        {
            width: 30,
            height: 50,
            fill: '#394',
            alignment: go.Spot.Top //center bottom
        }
    ),
    G(
        go.Shape,
        {
            width: 30,
            height: 100,
            fill: '#394'
        }
    )
));

默认对齐和拉伸

垂直和水平两个面板的支持的Panel.defaultAlignment和Panel.defaultStretch属性。这是一种便捷的方式使您不必设置每个元件的GraphObject.alignment或GraphObject.stretch

diagram.add(G(
    go.Part,
    'Horizontal',
    {
        background: '#ccc',
        height: 90,
        defaultAlignment: go.Spot.Bottom
    },
    G(
        go.Shape,
        {
            width: 30,
            margin: 3,
            fill: '#394',
            height: 60
        }
    ),
    G(
        go.Shape,
        {
            width: 30,
            margin: 3,
            fill: '#394',
            height: 20
        }
    ),
    G(
        go.Shape,
        {
            width: 30,
            margin: 3,
            fill: '#394',
            height: 40
        }
    ),
    G(
        go.Shape,
        {
            width: 30,
            margin: 3,
            fill: '#394',
            stretch: go.GraphObject.Fill
        }
    )
));