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

Hancock_Xu 發布于2019-08-19 18:26 / 976人閱讀

摘要：橫向面板屬性和縱向面板基本相同只是排列順序不同默認對齊和拉伸垂直和水平兩個面板的支持的和屬性。這是一種便捷的方式使您不必設置每個元件的或

橫向面板

屬性和縱向面板基本相同只是排列順序不同

diagram.add(G(
    go.Part,
    go.Panel.Horizontal,
    {
        position: new go.Point(500, 0),
        background: "#ffffd",
        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
        }
    )
));

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

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

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

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

PrototypeZ 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 繪圖 (二) ：TextBlocks

摘要：使用類來顯示文本字體和顏色大小和文本的外觀風格被指定。為了換行的情況發生，屬性不能為無，必須有一些限制寬窄文本塊默認文本塊不換行剪裁文本塊換行文本塊清理邊距對齊方式屬性指定的尺寸內繪制文字點排列方式。注驗證稍后完善。使用TextBlocks類來顯示文本. 字體和顏色大小和文本的外觀風格被指定TextBlock.font。值可以是任何CSS字體符串。文本顏色使用TextBlock.s...

岳光 2019-08-19 18:24 評論0 收藏0
GoJS入門筆記（1）

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

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