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

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

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

橫向面板

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

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)對(duì)齊和拉伸

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

GPU云服務(wù)器云服務(wù)器 GoJS panel ubuntu panel java panel

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/79616.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

tylin 2019-08-23 14:08 評(píng)論0 收藏0