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

PrototypeZ 發布于2019-08-19 18:26 / 3811人閱讀

摘要：雖然只有一個面板，也有許多不同類型的面板，每個都有其自己的目的是如何安排的元素。這些都是存在的各種面板組成位置面板最簡單的一種面板是。每個元素獲得其正常大小，無論其默認大小或指定或等價的和。垂直面板面板的所有面板元件的排列垂直從上到下。

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

GPU云服務器云服務器寶塔面板與云服務器面板腳本選項面板主機面板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79603.html

GoJS 繪圖 (六) ：橫向面板（panel）

摘要：橫向面板屬性和縱向面板基本相同只是排列順序不同默認對齊和拉伸垂直和水平兩個面板的支持的和屬性。這是一種便捷的方式使您不必設置每個元件的或橫向面板屬性和縱向面板基本相同只是排列順序不同 diagram.add(G( go.Part, go.Panel.Horizontal, { position: new go.Point(500, 0), ...

Hancock_Xu 2019-08-19 18:26 評論0 收藏0
GoJS 繪圖 (七) ：表面板（tablePanel）

摘要：表板中的每個對象被放入由的值索引的和。面板會看行和列的所有在面板中的對象，以確定該表應多少行和列。一行一列一行二列二行一列二行三列請注意，并非表中的每一個列需要有一個存在。屬性指定的寬度和或高度是否應該承擔全部由面板給它的空間。表板中的每個對象被放入由的值索引的GraphObject.row和GraphObject.column。面板會看行和列的所有在面板中的對象，以確定該表應多少行...

sushi 2019-08-21 10:51 評論0 收藏0
GoJS 繪圖 (四) ：構建節點與GraphObjects

摘要：你可以構建一個節點或其類型的代碼。以下將討論基本類型，你可以用它來建立一個節點對象。這些頁面通過明確創建和添加節點和鏈路建立的示意圖。一個非常簡單的節點由一個與構成。雖然以這種方式構建的節點將工作變得更加復雜的代碼將變得更加難以閱讀和維護。你可以構建一個節點或其類型的JavaScript代碼。以下將討論基本類型，你可以用它來建立一個節點對象。這些頁面通過明確創建和添加節點和鏈路建立的...

jokester 2019-08-19 18:25 評論0 收藏0
GoJS入門筆記（1）

摘要：能干什么，廢話不多說，進傳送門看看。在中，我們可以在中設置控件與控件之間的關系有點不同使用方法使用第六步樣式通過設置連接線的樣式沒有箭頭連接線樣式箭頭樣式運行結果 GoJS能干什么，廢話不多說，進傳送門看看。傳送門第一步：Hello World! // 如果用了jQuery等其他庫或框架，這里$會...

tylin 2019-08-23 14:08 評論0 收藏0