GoJS 繪圖 (七) ：表面板（tablePanel）

sushi 發布于2019-08-21 10:51 / 2514人閱讀

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

表板中的每個對象被放入由的值索引的GraphObject.row和GraphObject.column。面板會看行和列的所有在面板中的對象，以確定該表應多少行和列。

diagram.add(g(
    go.Part,
    go.Panel.Table,
    g(
        go.TextBlock,
        {
            text: "一行一列",
            row: 0,
            column: 0,
            margin: 2,
            background: "#493"
        }
    ),
    g(
        go.TextBlock,
        {
            text: "一行二列",
            row: 0,
            column: 1,
            margin: 2,
            background: "#493"
        }
    ),
    g(
        go.TextBlock,
        {
            text: "二行一列",
            row: 1,
            column: 0,
            margin: 2,
            background: "#493"
        }
    ),
    g(
        go.TextBlock,
        {
            text: "二行三列",
            row: 1,
            column: 2,
            margin: 2,
            background: "#493"
        }
    )
));

請注意，并非表中的每一個“列”需要有一個GraphObject存在。
如果在一個“列”中有多個對象，他們可能會彼此重疊。

diagram.add(g(
    go.Part,
    "Table",
    {
        background: "#ffffd"
    },
    g(
        go.TextBlock,
        {
            text: "這里的文字會重疊",
            row: 0,
            column: 0
        }
    ),
    g(
        go.TextBlock,
        {
            text: "疊重會字文的里這",
            row: 0,
            column: 0
        }
    )
));

排列和對齊

一個面板中GraphObject的大小由許多因素決定的。GraphObject.stretch屬性指定的寬度和/或高度是否應該承擔全部由面板給它的空間。當的寬度和高度不拉伸以填充在給定的空間，GraphObject.alignment其中如果它比可用空間小的對象放置屬性控制。一個也可拉伸寬度，同時豎直對準。

在行對齊

diagram.add(g(
    go.Part,
    g(
        go.Panel,
        "Table",
        {
            defaultAlignment: go.Spot.Left
        },
        g(
            go.RowColumnDefinition,
            {
                column: 0,
                width: 200
            }
        ),
        g(
            go.RowColumnDefinition,
            {
                column:1,
                width: 15,
            }
        ),
        g(
            go.Panel,
            "Auto",
            {
                row: 0,
                column: 0,
                alignment: go.Spot.Left
            },
            g(
                go.Shape,
                "RoundedRectangle",
                {
                    fill: "#493"
                }
            ),
            g(
                go.TextBlock,
                "auot panel"
            )
        ),
        g(
            go.TextBlock,
            {
                text: "alignment: left",
                row: 0,
                column:2
            }
        ),
        g(
            go.Panel,
            "Auto",
            {
                row: 1,
                column: 0,
                alignment: go.Spot.Center
            },
            g(
                go.Shape,
                "RoundedRectangle",
                {
                    fill: "#493"
                }
            ),
            g(
                go.TextBlock,
                "auto panel"
            )
        ),
        g(
            go.TextBlock,
            {
                text: "alignment: center",
                row:1,
                column: 2
            }
        ),
        g(
            go.Panel,
            "Auto",
            {
                row:2,
                column: 0,
                alignment: go.Spot.Right
            },
            g(
                go.Shape,
                "RoundedRectangle",
                {
                    fill: "#493"
                }
            ),
            g(
                go.TextBlock,
                "auto panel"
            )
        ),
        g(
            go.TextBlock,
            {
                text: "alignment: right",
                row: 2,
                column: 2
            }
        )
    )
));

在列對齊

和行對齊一樣，這里不重復寫了。

跨越行或列

下面是一個包括跨列和行跨越一個例子。

diagram.add(g(
    go.Part,
    g(
        go.Panel,
        "Table",
        g(
            go.TextBlock,
            {
                text: "頂標題",
                row: 0,
                column: 0,
                columnSpan: 3,
                stretch: go.GraphObject.Horizontal,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "側標題",
                row: 1,
                column: 0,
                rowSpan:2,
                margin: 2,
                stretch: go.GraphObject.Vertical,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "一行一列",
                row: 1,
                column: 1,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "一行兩列",
                row: 1,
                column: 2,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "二行一列",
                row: 2,
                column: 1,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "二行三列",
                row: 2,
                column: 3,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "結尾",
                row: 3,
                column: 2,
                columnSpan: 2,
                margin: 2,
                background: "#394"
            }
        )
    )
));

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

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

利用vue制作在線涂鴉板

摘要：撤銷清空等操作撤銷前進清空清空前后數據恢復到默認數據地址查看代碼效果展示 showImg(https://segmentfault.com/img/bVHJXf?w=1550&h=846); Canvas API簡介調用方法 getImageData() 返回ImageData對象，該對象為畫布上指定的矩形復制像素數據 putImageData() 把圖像數據（從指定的 Imag...

nemo 2019-08-20 13:29 評論0 收藏0
GoJS 繪圖 (一) ：入門

摘要：是一個庫，讓你輕松創建現代瀏覽器的交互圖。支持圖形化的模板和圖形對象屬性數據模型的數據綁定。許多預定義的工具和命令執行，大部分的圖表所需要的標準的行為。外觀和行為的定制是大多設置屬性的問題。 GoJS是一個JavaScript庫，讓你輕松創建現代Web瀏覽器的交互圖。 GoJS支持圖形化的模板和圖形對象屬性數據模型的數據綁定。你只需要保存和恢復模型，包括持有任何性質的應用需求，簡單的J...

X_AirDu 2019-08-19 18:23 評論0 收藏0
GoJS 繪圖 (四) ：構建節點與GraphObjects

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

jokester 2019-08-19 18:25 評論0 收藏0
GoJS 繪圖 (十) ：鏈接（完結）

摘要：非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因為這是在節點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點。可以很容易地建立方向，只需添加一個形狀并設置其屬性。目前也就只能先寫這么多吧入門的話問題不大了非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因為這是在節點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點。 diag...

Rocko 2019-08-22 10:33 評論0 收藏0
GoJS 繪圖 (八) ：模型和模版

摘要：下面是這樣做的一種方式使用模型和模板事實上，圖已經為節點和鏈接非常簡單的默認模板。該特定節點的數據已投入對象的數組。因此，我們需要替換節點模版。數據綁定數據綁定是一種聲明聲明一個對象的屬性值應該用于設置另一個對象的屬性值。使用模版構視圖讓我們嘗試建立兩個節點，將它們與一個鏈接連接。下面是這樣做的一種方式： var node1 = g( go.Node, Auto, ...

Hanks10100 2019-08-21 10:52 評論0 收藏0