GoJS 繪圖 (五) ：定位面板與垂直面板（Panel）

Panel是負責任的大小和位置的全部元素。每一個面板創建本身的座標系。一個面板的元件的繪製順序表示創建這些元素的Z軸排序。
雖然只有一個面板，也有許多不一樣類型的面板，每一個都有其本身的目的是如何安排的元素。當你創建一個面板，你一般會指定其Panel.type做爲構造函數參數。這些都是存在的各類面板組成：

• Panel.Position

• Panel.Vertical

• Panel.Horizo​​ntal

• 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)
        }
    )