跨平台开源项目Ngui【视图与布局系统】
来源:互联网 发布:mac地址查询 编辑:程序博客网 时间:2024/06/07 03:02
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>
- Input
- Div
- Span<TextLayout>
- TextNode
- Box*
- Sprite
- Label
- Layout*
看到这个继承关系大家是不是觉得有点复杂了,其实这要与浏览器比那真是小巫见大巫,当然那并不是我想要的,这一切都是为了效率。当然为了效率在功能上肯定是要做裁剪的,鱼和熊掌不可兼得。
有这么多视图它到底能为我们做什么呢?
视图在广义功能上划分有两类:
- 非布局视图(非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
进行颠倒排版会变成这样
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
的运行效果:
就说到这里吧,已经累的不行了,下一篇为大家讲动作系统。
谢谢大家,未完待续~
- 跨平台开源项目Ngui【视图与布局系统】
- 跨平台开源项目Ngui【动作系统Action】
- 跨平台开源项目Ngui【入门】
- 跨平台开源项目Ngui【简介】
- 跨平台开源项目Ngui【基准性能测试报告】
- 跨平台开源项目Ngui【样式表(CSS)规则及用法】
- 开源项目之Android ViewBadger(自定义的视图布局)
- NGUI与粒子系统
- [Shader]NGUI与粒子系统
- 跨平台开源项目
- EPM解决方案系统---项目管理工具与项目管理平台
- 开源项目:C/S聊天系统平台 jchatting
- Android:视图与布局优化
- NGUI与粒子系统的遮挡问题
- PORTAL视图与项目视图【图解】
- 项目与工作流平台
- NGUI 代码布局工具
- OCUI界面设计:滚动视图与表格视图嵌套布局
- 121. Best Time to Buy and Sell Stock(第十一周)
- 1198 渊子赛马(贪心算法)
- C通用的字符串函数(_t)
- 实时获取微信聊天消息记录
- 创建你的第一个ThreeJs场景
- 跨平台开源项目Ngui【视图与布局系统】
- 网络流学习笔记(1)
- 第九次作业
- java反射回顾<二>
- hdu S-Nim (sg 函数模板题)
- 虚拟机的底层运作原理
- HDU 2087:剪花布条(KMP入门)
- hihocoder1579
- eclipse中c++开发中添加包含路径和库路径的操作