开源跨平台移动项目Ngui【视图与布局系统】

Ngui简介

这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架，基于NodeJS/OpenGL，这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目，至此JavaScript成为了真正意义上先后端通吃的语言。

Ngui的目标：在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。

• 开源跨平台移动项目Ngui【简介】
• 开源跨平台移动项目Ngui【入门】
• 开源跨平台移动项目Ngui【视图与布局系统】
• 开源跨平台移动项目Ngui【Action动做系统】
• 开源跨平台移动项目Ngui【CSS样式表规则及用法】
• Ngui API 文档

视图View

在上一篇中我已经为你们讲了Ngui入门，今天我就来介绍ngui的核心部分（视图与布局）。

[View]为gui核心部件派生为[Notification]。
用它来描述屏幕上全部可见的元素,它是全部视图的基础类型它也是事件的响应者，这些事件由硬件以及操做系统触发。详细的API文档讲你们去这里查阅。

下面是ngui如今提供的全部[View]继承关系图：
注：带*号的为抽象类型或协议没有构造函数

• [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属性。这种是最快的，由于不须要进行布局计算。

如今ngui提供的非布局视图有两个：

• [Sprite]
• [Label]

关于这两个视图的具体API接口说明请你们查阅文档，但在这里特别要说明的是transform，也就是矩阵变换。

矩阵变换是GUI绘图系统里的一个重要概念，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这个方式对它进行设置。

调用final_matrix()函数获得的是父视图的final_matrix与当前视图的matrix乘积。对这就是这个视图在屏幕是的真实位置，确切的讲是这个[View].origin在屏幕上的确切位置，由于严谨的说一张图片或一个矩形在屏幕上是由4个点组成的一个面。

注意：
频繁的交替设置transform与调用matrix/finalMatrix会带来没必要要的性能消耗，ngui的渲染逻辑是在渲染画面前不对任何视图属性设置作额外的计算只作存储并该标记属性的改变，等待准备渲染前才作统一的计算。当一个视图的transform改变时若是这时你要获取matrix与finalMatrix那么直接返回matrix或finalMatrix那必定是不正确的，幸亏系统会作检测当发生了改变你要强取些值会提早对这些值作运算，返回一个正确的值给你，但若是你频繁的设置与获取，那就会频繁的作些运算。而且这只仅限于非布局视图，在布局视图上这样作并不会返回正确的值参见[Trap in Layout]

布局视图

布局视图按可放置内容划分有三类：

• [Div]
• [Hybrid]
• [Span]

Div

从API文档上看见[Div]只有一个属性contentAlign, 那么这里重点讲述就是这个属性，由于它是与浏览器彻底不相同有的地方，至于基础类型[Box]你们能够参与API文档会有详细说明，注意padding这个属性在ngui里是没有的，由于这个致使系统复杂性上升，但之后要不要加待定。

在ngui中[Div]并无本身单独的浮动方式这个属性。但[Div]能设置它的contentAlign对它的内容对齐方式作出更改，这个属性可选的值有4个，默认为left左对齐

• left
• right
• top
• bottom

这其实很好理解 ：

• left与right为水平布局，内容对齐方式从左到右或从右到左排列，溢出往下换行。
• top与bottom为垂直布局，内容对齐方式从上到下或从下到上排列，溢出往右换列。

须要注意的是它的内容必须为[Box]类型不然这个属性并不会对它产生任何的效果，若是它内部出现了[Span]或[TextNode]那么[Span]与[TextNode]的出现不会对[Div]的内容布局形成任何影响，由于[Div]会忽略非[Box]内容的排版处理，同理一个[Box]或[Div]出如今非排版布局视图内部那它的位置与使用非布局视图没有区别。

Hybrid

与[Div]同样它也只有一个属性textAlign但它能够对任何[Layout]内容作排版处理这固然也包括[Span]与[TextNode]。

与[Div]的区别[Hybrid]的内容方式的不一样，[Hybrid]把它的全部内容都当成文本进行处理。它的可选有6个，默认为left

• left
• right
• center
• left_reverse
• right_reverse
• center_reverse

left right center 很好理解
left_reverse right_reverse center_reverse 是在对齐的基础上将内容颠倒排列，

如：对Ngui进行颠倒排版会变成这样

left_reverse	center_reverse	right_reverse
SJodacovA	SJodacovA	SJodacovA

Span，TextNode，Text

• [Span]并无显示实体，也就是说它并不会在屏幕上显示任何可见的东西，它的存在只为是为了设置嵌套的[TextNode]视图属性，由于以[TextLayout]上的属性都能被它的子[TextLayout]所继承，这也是ngui中惟具备继承性质属性的视图。
• [TextNode]为[Span]的子类型，但它有实体它也是个叶子视图，也就是它不能再存在子视图。
• [Text]继承于[Hybrid]与[TextNode]同样也是叶子视图不能存在子视图

Indep

独立的[Div]，至关于html-css中的绝对定位，它存在于[Div]与[Hybrid]内部时，会进行独立排版，不会影响其它兄弟视图的排版位置。

Limit，IndepLimit

限制的盒子，minWidth, maxWidth，minHeight，maxHeight，这些属性能限制盒子的尺寸，这与html中的限制很类似。

Root

[Root]一个应用程序只能是惟一的也是必须的

Examples

最后为你们写一段代码实际运行一下

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

new App().start(
    <Root>
        <Div margin=20 width="full" height=100
         backgroundColor="#f00">
            <Indep width=50 height=50 
            backgroundColor="#f0f" 
            alignX="center"
            alignY="center" />
            <Div width=50 height="50" 
            backgroundColor="#00f" />
        </Div>
        <Hybrid margin=20 width="full" height=100 
        backgroundColor="#f00" textColor="#ff0" 
        textBackgroundColor="#00f6">
            Hello 
            <TextNode textColor="#000">
                Ngui!
            </TextNode>
        </Hybrid>
        <Hybrid margin=20 width="full" height=100 
        backgroundColor="#f00" 
        textAlign="center_reverse">
            Hello Ngui!
        </Hybrid>
    </Root>
)

下面是iphone6的运行效果：

下面是Google nexus6的运行效果：

---

就说到这里吧，已经累的不行了，下一篇为你们讲动做系统。

谢谢你们，未完待续~