摘要：現(xiàn)在提供的非布局視圖有兩個(gè)關(guān)于這兩個(gè)視圖的具體接口說(shuō)明請(qǐng)大家查閱文檔，但在這里特別要說(shuō)明的是，也就是矩陣變換。

這是一個(gè)GUI的排版顯示引擎和跨平臺(tái)的GUI應(yīng)用程序開(kāi)發(fā)框架，基于NodeJS/OpenGL，這也是第一個(gè)在移動(dòng)端Android/iOS融合NodeJS的前端GUI項(xiàng)目，至此JavaScript成為了真正意義上前后端通吃的語(yǔ)言。

Ngui的目標(biāo)：在此基礎(chǔ)上開(kāi)發(fā)GUI應(yīng)用程序可擁有開(kāi)發(fā)WEB應(yīng)用般簡(jiǎn)單與速度同時(shí)兼顧Native應(yīng)用程序的性能與體驗(yàn)。

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【簡(jiǎn)介】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【入門(mén)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【視圖與布局系統(tǒng)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【Action動(dòng)作系統(tǒng)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【CSS樣式表規(guī)則及用法】

Ngui API 文檔

在上一篇中我已經(jīng)為大家講了Ngui入門(mén)，今天我就來(lái)介紹ngui的核心部分（視圖與布局）。

[View]為gui核心部件派生為[Notification]。
用它來(lái)描述屏幕上所有可見(jiàn)的元素,它是所有視圖的基礎(chǔ)類型它也是事件的響應(yīng)者，這些事件由硬件以及操作系統(tǒng)觸發(fā)。詳細(xì)的API文檔講大家去這里查閱。

下面是ngui現(xiàn)在提供的所有[View]繼承關(guān)系圖：
注：帶*號(hào)的為抽象類型或協(xié)議沒(méi)有構(gòu)造函數(shù)

[TextFont]*

[TextLayout]*

[BasicScroll]*

[View]

[Layout]*

[Box]*

[Div]

[Shadow]

[Indep]

[LimitIndep]

[Limit]

[Image]

[Video]

[SelectPanel]

[Scroll]<[BasicScroll]>

[Root]

[Hybrid]<[TextLayout]>

[Button]

[Text]

[Input]

[Textarea]<[BasicScroll]>

[Span]<[TextLayout]>

[TextNode]

[Sprite]

[Label]

看到這個(gè)繼承關(guān)系大家是不是覺(jué)得有點(diǎn)復(fù)雜了，其實(shí)這要與瀏覽器比那真是小巫見(jiàn)大巫，當(dāng)然那并不是我想要的，這一切都是為了效率。當(dāng)然為了效率在功能上肯定是要做裁剪的，魚(yú)和熊掌不可兼得。

有這么多視圖它到底能為我們做什么呢？

視圖在廣義功能上劃分有兩類：

非布局視圖（非[Layout]）

布局視圖（[Layout]）

顧名思義非布局視圖就是那種不帶布局功能的視圖，就是你把它的位置固定后，它是不會(huì)再受到任何其它視圖元素有影響，除非你再次更改它的位置translate屬性。這種是最快的，因?yàn)椴恍枰M(jìn)行布局計(jì)算。

現(xiàn)在ngui提供的非布局視圖有兩個(gè)：

[Sprite]

[Label]

關(guān)于這兩個(gè)視圖的具體API接口說(shuō)明請(qǐng)大家查閱文檔，但在這里特別要說(shuō)明的是transform，也就是矩陣變換。

矩陣變換是GUI繪圖系統(tǒng)里的一個(gè)重要概念，transform用一個(gè)Matrix來(lái)描述繪圖元素點(diǎn)線或面在屏幕上的實(shí)際位置與形狀，這個(gè)矩陣通常由一組3x3或4x4向量組成，3x3為2d矩陣4x4為3d矩陣，在[View]上使用的是一個(gè)裁剪過(guò)的3x2的2d矩陣所它暫時(shí)不支持3d中的z軸，以后的版本中可以會(huì)所變化。

[View]中的transform屬性并沒(méi)有直接暴露而是換成了一組屬性:

x

y

scaleX

scaleY

rotateZ

skewX

skewY

你可以通過(guò)matrix屬性得到這個(gè)矩陣但它是只讀的，只能通過(guò)x與y這個(gè)方式對(duì)它進(jìn)行設(shè)置。

調(diào)用final_matrix()函數(shù)得到的是父視圖的final_matrix與當(dāng)前視圖的matrix乘積。對(duì)這就是這個(gè)視圖在屏幕是的真實(shí)位置，確切的講是這個(gè)[View].origin在屏幕上的確切位置，因?yàn)閲?yán)謹(jǐn)?shù)恼f(shuō)一張圖片或一個(gè)矩形在屏幕上是由4個(gè)點(diǎn)組成的一個(gè)面。

注意：
頻繁的交替設(shè)置transform與調(diào)用matrix/finalMatrix會(huì)帶來(lái)不必要的性能消耗，ngui的渲染邏輯是在渲染畫(huà)面前不對(duì)任何視圖屬性設(shè)置做額外的計(jì)算只做存儲(chǔ)并該標(biāo)記屬性的改變，等待準(zhǔn)備渲染前才做統(tǒng)一的計(jì)算。當(dāng)一個(gè)視圖的transform改變時(shí)如果這時(shí)你要獲取matrix與finalMatrix那么直接返回matrix或finalMatrix那一定是不正確的，幸好系統(tǒng)會(huì)做檢測(cè)當(dāng)發(fā)生了改變你要強(qiáng)取些值會(huì)提前對(duì)這些值做運(yùn)算，返回一個(gè)正確的值給你，但如果你頻繁的設(shè)置與獲取，那就會(huì)頻繁的做些運(yùn)算。并且這只僅限于非布局視圖，在布局視圖上這樣做并不會(huì)返回正確的值參見(jiàn)[Trap in Layout]

布局視圖按可放置內(nèi)容劃分有三類：

[Div]

[Hybrid]

[Span]

從API文檔上看見(jiàn)[Div]只有一個(gè)屬性contentAlign, 那么這里重點(diǎn)講述就是這個(gè)屬性，因?yàn)樗桥c瀏覽器完全不相同有的地方，至于基礎(chǔ)類型[Box]大家可以參與API文檔會(huì)有詳細(xì)說(shuō)明，注意padding這個(gè)屬性在ngui里是沒(méi)有的，因?yàn)檫@個(gè)導(dǎo)致系統(tǒng)復(fù)雜性上升，但以后要不要加待定。

在ngui中[Div]并沒(méi)有自己多帶帶的浮動(dòng)方式這個(gè)屬性。但[Div]能設(shè)置它的contentAlign對(duì)它的內(nèi)容對(duì)齊方式做出更改，這個(gè)屬性可選的值有4個(gè)，默認(rèn)為left左對(duì)齊

left

right

top

bottom

這其實(shí)很好理解 ：

left與right為水平布局，內(nèi)容對(duì)齊方式從左到右或從右到左排列，溢出往下?lián)Q行。

top與bottom為垂直布局，內(nèi)容對(duì)齊方式從上到下或從下到上排列，溢出往右換列。

需要注意的是它的內(nèi)容必須為[Box]類型否則這個(gè)屬性并不會(huì)對(duì)它產(chǎn)生任何的效果，如果它內(nèi)部出現(xiàn)了[Span]或[TextNode]那么[Span]與[TextNode]的出現(xiàn)不會(huì)對(duì)[Div]的內(nèi)容布局造成任何影響，因?yàn)閇Div]會(huì)忽略非[Box]內(nèi)容的排版處理，同理一個(gè)[Box]或[Div]出現(xiàn)在非排版布局視圖內(nèi)部那它的位置與使用非布局視圖沒(méi)有區(qū)別。

與[Div]一樣它也只有一個(gè)屬性textAlign但它可以對(duì)任何[Layout]內(nèi)容做排版處理這當(dāng)然也包括[Span]與[TextNode]。

與[Div]的區(qū)別[Hybrid]的內(nèi)容方式的不同，[Hybrid]把它的所有內(nèi)容都當(dāng)成文本進(jìn)行處理。它的可選有6個(gè)，默認(rèn)為left

left

right

center

left_reverse

right_reverse

center_reverse

left right center 很好理解
left_reverse right_reverse center_reverse 是在對(duì)齊的基礎(chǔ)上將內(nèi)容顛倒排列，

如：對(duì)Ngui進(jìn)行顛倒排版會(huì)變成這樣

[Span]并沒(méi)有顯示實(shí)體，也就是說(shuō)它并不會(huì)在屏幕上顯示任何可見(jiàn)的東西，它的存在只為是為了設(shè)置嵌套的[TextNode]視圖屬性，因?yàn)橐訹TextLayout]上的屬性都能被它的子[TextLayout]所繼承，這也是ngui中唯具有繼承性質(zhì)屬性的視圖。

[TextNode]為[Span]的子類型，但它有實(shí)體它也是個(gè)葉子視圖，也就是它不能再存在子視圖。

[Text]繼承于[Hybrid]與[TextNode]一樣也是葉子視圖不能存在子視圖

獨(dú)立的[Div]，相當(dāng)于html-css中的絕對(duì)定位，它存在于[Div]與[Hybrid]內(nèi)部時(shí)，會(huì)進(jìn)行獨(dú)立排版，不會(huì)影響其它兄弟視圖的排版位置。

限制的盒子，minWidth, maxWidth，minHeight，maxHeight，這些屬性能限制盒子的尺寸，這與html中的限制很相似。

[Root]一個(gè)應(yīng)用程序只能是唯一的也是必須的

最后為大家寫(xiě)一段代碼實(shí)際運(yùn)行一下

import { 
    GUIApplication: App, Root,
    Div, 
    Indep,
    Hybrid, 
    Span,
    TextNode,
} from "ngui"

new App().start(
    
        

            
            

        
        
            Hello 
            
                Ngui!
            
        
        
            Hello Ngui!
        
    
)

下面是iphone6的運(yùn)行效果：

下面是Google nexus6的運(yùn)行效果：

就說(shuō)到這里吧，已經(jīng)累的不行了，下一篇為大家講動(dòng)作系統(tǒng)。

謝謝大家，未完待續(xù)~