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

Ngui简介

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

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

视图View

在上一篇中我已经为大家讲了Ngui入门,今天我就来介绍ngui的核心部分(视图与布局)。

Viewgui核心部件派生为Notification。 用它来描述屏幕上所有可见的元素,它是所有视图的基础类型它也是事件的响应者,这些事件由硬件以及操作系统触发。详细的API文档讲大家去这里查阅。

下面是ngui现在提供的所有View继承关系图: 注:带*号的为抽象类型或协议没有构造函数

看到这个继承关系大家是不是觉得有点复杂了,其实这要与浏览器比那真是小巫见大巫,当然那并不是我想要的,这一切都是为了效率。当然为了效率在功能上肯定是要做裁剪的,鱼和熊掌不可兼得。

有这么多视图它到底能为我们做什么呢?

视图在广义功能上划分有两类:

非布局视图

顾名思义非布局视图就是那种不带布局功能的视图,就是你把它的位置固定后,它是不会再受到任何其它视图元素有影响,除非你再次更改它的位置translate属性。这种是最快的,因为不需要进行布局计算。

现在ngui提供的非布局视图有两个:

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

矩阵变换是GUI绘图系统里的一个重要概念,transform用一个Matrix来描述绘图元素点线或面在屏幕上的实际位置与形状,这个矩阵通常由一组3x34x4向量组成,3x3为2d矩阵4x4为3d矩阵,在View上使用的是一个裁剪过的3x2的2d矩阵所它暂时不支持3d中的z轴,以后的版本中可以会所变化。

View中的transform属性并没有直接暴露而是换成了一组属性:

  • x
  • y
  • scaleX
  • scaleY
  • rotateZ
  • skewX
  • skewY

你可以通过matrix属性得到这个矩阵但它是只读的,只能通过xy这个方式对它进行设置。

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

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

布局视图

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

Div

从API文档上看见Div只有一个属性contentAlign, 那么这里重点讲述就是这个属性,因为它是与浏览器完全不相同有的地方,至于基础类型Box大家可以参与API文档会有详细说明,注意padding这个属性在ngui里是没有的,因为这个导致系统复杂性上升,但以后要不要加待定。

nguiDiv并没有自己单独的浮动方式这个属性。但Div能设置它的contentAlign对它的内容对齐方式做出更改,这个属性可选的值有4个,默认为left左对齐

  • left
  • right
  • top
  • bottom

这其实很好理解 :

  • leftright为水平布局,内容对齐方式从左到右或从右到左排列,溢出往下换行。
  • topbottom为垂直布局,内容对齐方式从上到下或从下到上排列,溢出往右换列。

需要注意的是它的内容必须为Box类型否则这个属性并不会对它产生任何的效果,如果它内部出现了SpanTextNode那么SpanTextNode的出现不会对Div的内容布局造成任何影响,因为Div会忽略非Box内容的排版处理,同理一个BoxDiv出现在非排版布局视图内部那它的位置与使用非布局视图没有区别。

Hybrid

Div一样它也只有一个属性textAlign但它可以对任何Layout内容做排版处理这当然也包括SpanTextNode

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中唯具有继承性质属性的视图。
  • TextNodeSpan的子类型,但它有实体它也是个叶子视图,也就是它不能再存在子视图。
  • Text继承于HybridTextNode一样也是叶子视图不能存在子视图

Indep

独立的Div,相当于html-css中的绝对定位,它存在于DivHybrid内部时,会进行独立排版,不会影响其它兄弟视图的排版位置。

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的运行效果:

就说到这里吧,已经累的不行了,下一篇为大家讲动作系统。

谢谢大家,未完待续~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小古哥的博客园

关于面试的一些问题合集

一、css方面 1、盒子模型在IE上有何不同? 盒模型分为:W3C标准盒模型和IE盒模型 W3C 盒子模型的范围包括 margin、border、padding...

2596
来自专栏向治洪

Android硬件加速介绍与实现

概述 在手机客户端尤其是Android应用的开发过程中,我们经常会接触到“硬件加速”这个词。由于操作系统对底层软硬件封装非常完善,上层软件开发者往往对硬件加速的...

1996
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

2437
来自专栏web编程技术分享

js学习: 自定义类库 - miniQuery 2.0

2777
来自专栏华章科技

纯干货:手把手教你用Python做数据可视化(附代码)

导读:制作提供信息的可视化(有时称为绘图)是数据分析中的最重要任务之一。可视化可能是探索过程的一部分,例如,帮助识别异常值或所需的数据转换,或者为建模提供一些想...

2022
来自专栏向治洪

Android硬件加速介绍与实现

概述 在手机客户端尤其是Android应用的开发过程中,我们经常会接触到“硬件加速”这个词。由于操作系统对底层软硬件封装非常完善,上层软件开发者往往对硬件加速的...

2558
来自专栏计算机视觉

Python中plt.plot图像保存有白边,CV2.polyline,fillpoly的参数问题,图像保存颜色发生异常

Python中,如果你遇到了PIL图像保存有白边,CV2.polyline,fillpoly,参数问题,图像保存颜色发生异常这几个问题,这篇文章就能够解决你的疑...

1472
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

1352
来自专栏美团技术团队

Android硬件加速原理与实现简介

在手机客户端尤其是Android应用的开发过程中,我们经常会接触到“硬件加速”这个词。由于操作系统对底层软硬件封装非常完善,上层软件开发者往往对硬件加速的底层原...

3835
来自专栏AI研习社

Python Matplotlib 绘图使用指南 (附代码)

大多数人不会花大量时间去学 matplotlib 库,仍然可以实现绘图需求,因为已经有人在 stackoverflow、github 等开源平台上提供了绝大多数...

772

扫码关注云+社区