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

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

Ngui的目標：在此基礎上開發(fā)GUI應用程序可擁有開發(fā)WEB應用般簡單與速度同時兼顧Native應用程序的性能與體驗。

開源跨平臺移動項目Ngui【簡介】

開源跨平臺移動項目Ngui【入門】

開源跨平臺移動項目Ngui【視圖與布局系統(tǒng)】

開源跨平臺移動項目Ngui【Action動作系統(tǒng)】

開源跨平臺移動項目Ngui【CSS樣式表規(guī)則及用法】

Ngui API 文檔

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

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

下面是ngui現(xiàn)在提供的所有[View]繼承關系圖：
注：帶*號的為抽象類型或協(xié)議沒有構造函數(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]

看到這個繼承關系大家是不是覺得有點復雜了，其實這要與瀏覽器比那真是小巫見大巫，當然那并不是我想要的，這一切都是為了效率。當然為了效率在功能上肯定是要做裁剪的，魚和熊掌不可兼得。

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

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

非布局視圖（非[Layout]）

布局視圖（[Layout]）

顧名思義非布局視圖就是那種不帶布局功能的視圖，就是你把它的位置固定后，它是不會再受到任何其它視圖元素有影響，除非你再次更改它的位置translate屬性。這種是最快的，因為不需要進行布局計算。

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

[Sprite]

[Label]

關于這兩個視圖的具體API接口說明請大家查閱文檔，但在這里特別要說明的是transform，也就是矩陣變換。

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

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

x

y

scaleX

scaleY

rotateZ

skewX

skewY

你可以通過matrix屬性得到這個矩陣但它是只讀的，只能通過x與y這個方式對它進行設置。

調(diào)用final_matrix()函數(shù)得到的是父視圖的final_matrix與當前視圖的matrix乘積。對這就是這個視圖在屏幕是的真實位置，確切的講是這個[View].origin在屏幕上的確切位置，因為嚴謹?shù)恼f一張圖片或一個矩形在屏幕上是由4個點組成的一個面。

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

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

[Div]

[Hybrid]

[Span]

從API文檔上看見[Div]只有一個屬性contentAlign, 那么這里重點講述就是這個屬性，因為它是與瀏覽器完全不相同有的地方，至于基礎類型[Box]大家可以參與API文檔會有詳細說明，注意padding這個屬性在ngui里是沒有的，因為這個導致系統(tǒng)復雜性上升，但以后要不要加待定。

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

left

right

top

bottom

這其實很好理解 ：

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

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

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

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

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

left

right

center

left_reverse

right_reverse

center_reverse

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

如：對Ngui進行顛倒排版會變成這樣

[Span]并沒有顯示實體，也就是說它并不會在屏幕上顯示任何可見的東西，它的存在只為是為了設置嵌套的[TextNode]視圖屬性，因為以[TextLayout]上的屬性都能被它的子[TextLayout]所繼承，這也是ngui中唯具有繼承性質(zhì)屬性的視圖。

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

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

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

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

[Root]一個應用程序只能是唯一的也是必須的

最后為大家寫一段代碼實際運行一下

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

new App().start(
    
        

            
            

        
        
            Hello 
            
                Ngui!
            
        
        
            Hello Ngui!
        
    
)

下面是iphone6的運行效果：

下面是Google nexus6的運行效果：

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

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