Ngui简介这是一个GUI排版显示引擎，也是一个跨平台的GUI应用开发框架，基于NodeJS/OpenGL，也是Android/iOS第一款集成了NodeJS的前端GUI项目，JavaScript成为了前后端兼顾的真正语言。Ngui的目标：在此基础上开发GUI应用程序，既能兼顾Native应用程序的性能和体验，又能拥有开发WEB应用程序的简单和速度。开源跨平台移动项目Ngui【介绍】开源跨平台移动项目Ngui【入门】开源跨平台移动项目Ngui【视图和布局系统】开源跨平台移动项目Ngui【Action动作系统】开源跨平台手机项目Ngui【CSS样式Table规则及使用】NguiAPI文档视图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]看到这个继承关系是不是觉得有点复杂，其实真的是和浏览器比较Littleisnothing，当然这不是我想要的，一切都是为了效率。当然，为了效率，必须在功能上量体裁衣，不能兼得。这么多的view，到底能为我们做什么呢？视图在广义的功能上分为两种：非布局视图（non-[Layout]）布局视图（[Layout]）非布局视图，顾名思义，非布局视图就是没有布局功能的那种视图，也就是说，你固定它的position之后，它不会受到任何其他视图元素的影响，除非你再次改变它的positiontranslate属性。这是最快的，因为不需要布局计算。现在ngui提供了两个非布局视图：[Sprite][Label]这两个视图的具体API接口说明可以参考文档，不过这里要特别说明的是transform，即矩阵变换.矩阵变换是GUI绘图系统中的一个重要概念。Transform使用一个Matrix来描述绘图元素点线或面在屏幕上的实际位置和形状。该矩阵通常由一组3x3或4x4向量组成。3x3是2d矩阵4x4是3d矩阵，[View]上用的是裁剪后的3x22d矩阵，所以暂时不支持3d中的z轴，以后版本可能会改变.[View]中的transform属性并没有直接暴露出来而是换成了一组属性：xyscaleXscaleYrotateZskewXskewY可以通过matrix属性得到这个矩阵但是它是只读的，只能通过x和y来设置。调用final_matrix()函数得到父视图的final_matrix和当前视图的矩阵的乘积。是的，这是这个视图在屏幕上的真实位置。准确的说就是[View].origin在屏幕上的准确位置，因为严格来说一张图片或者一个矩形在屏幕上是由4个点组成的。面条。注意：频繁交替设置transform和调用matrix/finalMatrix会带来不??必要的性能消耗。ngui的渲染逻辑不是在渲染屏幕前对任何view属性设置做额外的计算，而是存储和改变mark属性，然后等待。统一计算在渲染之前完成。当view的transform发生变化时，此时如果要获取matrix和finalMatrix，直接返回matrix或者finalMatrix肯定是不对的。幸运的是，系统会检测到什么时候有变化，如果你想强制一些值，你会提前对这些值进行计算，给你返回一个正确的值，但是如果你频繁设置和获取，你会频繁地做一些计算。而且这仅限于非布局视图，在布局视图上这样做不会返回正确的值。参见[TrapinLayout]LayoutViewsLayoutviews按可放置的内容分为三类：[Div][Hybrid][Span]Div从API文档可以看出[Div]只有一个属性contentAlign，所以重点这里是关于这个属性的，因为它和浏览器是完全不同的。至于基本类型【Box】，可以参看API文档。会有详细的说明。注意，在ngui中是没有padding属性的，因为这会增加系统的复杂度，但是以后会不会加入，待定。ngui中的[div]没有单独的浮动方法。但是[Div]可以设置它的contentAlign来改变它的内容对齐方式。这个属性有4个可选值，默认是left,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个选项，默认是leftleftrightcenterleft_reverseright_reversecenter_reverseleftrightcenter很好理解，left_reverseright_reversecenter_reverse是在对齐的基础上把内容倒过来排列的，例如：Ngui的反向排版会变成这样也就是说，它不会在屏幕上显示任何可见的内容。它的存在只是为了设置嵌套的[TextNode]视图属性，因为[TextLayout]上的属性可以被其子[TextLayout]继承，这是ngui中唯一具有继承属性的视图。[TextNode]是[Span]的子类型，但是它有一个entity，同时也是一个叶视图，也就是说，它不能再有子视图了。[Text]继承自[Hybrid]，[TextNode]也是叶子视图，不能有子视图Indep独立[Div]，相当于html-css中的绝对定位。当存在于[Div]和[Hybrid]内部时，会独立排版，不会影响其他兄弟view的排版位置。Limit，IndepLimit限制框，minWidth，maxWidth，minHeight，maxHeight，这些属性可以限制框的大小，和html中的limit很像。Root[Root]一个应用程序只能是唯一和必要的Examples最后写一段代码给大家实际运行import{GUIApplication:App,Root,Div,Indep,Hybrid,Span,TextNode,}from'ngui'newApp().start(
