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

Hancock_Xu 發(fā)布于2019-08-19 18:26 / 1064人閱讀

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

橫向面板

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

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

默認(rèn)對齊和拉伸

垂直和水平兩個面板的支持的Panel.defaultAlignment和Panel.defaultStretch屬性。這是一種便捷的方式使您不必設(shè)置每個元件的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
        }
    )
));

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79616.html

相關(guān)文章

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

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

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

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

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

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

jokester 2019-08-19 18:25 評論0 收藏0
GoJS 繪圖 (二) ：TextBlocks

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

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

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

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