一种基于数据驱动的可定制化GUI系统技术方案

本发明专利技术公开一种基于数据驱动的可定制化GUI系统，设计师模块，其内生成GUI的图形，包括图片资源导入模块，用以对分割后的图片进行导入，界面布局生成模块，其通过对分割后的各个图片按照预先的顶点位置进行重新布局生成GUI界面，还包括动画加入及预览模块，在所述界面布局生成模块内加入动画并实施预览。程序员模块，其通过与所述设计师模块的各个分割后的图片进行一一对应，将数据与对应的界面元素进行关联；业务逻辑模块，其进行业务逻辑的开发，其内存储各个对应的数据逻辑，并进行加载。测试模块，其通过运行将设计师模块与程序员模块运行，完整的反馈界面信息，实时的调整界面的属性并得到反馈，其通过自动化脚本做通用性测试。

A customizable GUI system based on data drive

【技术实现步骤摘要】
一种基于数据驱动的可定制化GUI系统
本专利技术涉及计算机图形学、网络游戏、实时可视化UI交互
，特别是涉及一种基于数据驱动的可定制化GUI系统。
技术介绍
图形化界面(GraphicUserInterface，以下简称GUI)在人们的生活中起到了至关重要的作用，从windows时代开始，大量的图形化操作就涌入了人们的视野并逐步渗透到人们生活的方方面面，而实时而又丰富的表现带给人们很好的用于体验，对于使用在游戏中的用户界面，则是一款游戏不可缺少的组成的部分。自人类社会分工就在不断的进行着。社会分工的意义在于使从事固定工作的人群更加专业化，并通过合作的形式提高生产效率。这种分工不仅仅存在于行业之间，也存在于行业内部，游戏开发中最典型的分工合作就是设计师和程序员之间的协作，以制作GUI界面为例：1.需求分析之后，程序员对照需求设计一个用户界面的草图，然后把精力主要放在功能的实现上。2.与此同时，设计师们对照需求，考虑用户的体验，使用专门的设计工具(如PhotoShop)设计出优美而实用的UI。3.最后，程序员按照设计师的效果图，使用编程语言实现游戏功能的UI.在实际的过程，即使是优秀的设计师和优秀的程序协同合作，花费在沟通和最终整合上的精力也是巨大的，经常出现的问题有：1.设计师的设计跟不上程序逻辑的变化。2.程序员未能完全实现设计师提供的效果图。3.效果图与程序功能不能完全匹配。4.从效果图到软件的UI转化耗费了很多时间。5.最后的测试，尤其是针对UI界面逻辑的测试和反馈调整浪费了巨大的时间这些并不是谁对谁错的问题——只要存在分工，合作的成本就必不可少。上述问题的关键点在于程序员和设计师之间的工作是“串行”的，缺少必要的接口和流程，以打通各处关节提高效率，导致的结果是效率的下降，设计师和程序员都无法专注于自己的专业本身，而需要了解彼此之间的情况。
技术实现思路
本专利技术的目的是提供一种基于数据驱动的可定制化GUI系统，以解决上述问题。为实现上述目的，本专利技术提供了一种基于数据驱动的可定制化GUI系统，包括：包括：设计师模块，其内生成GUI的图形，包括图片资源导入模块，用以对分割后的图片进行导入，界面布局生成模块，其通过对分割后的各个图片按照预先的顶点位置进行重新布局生成GUI界面，还包括动画加入及预览模块，在所述界面布局生成模块内加入动画并实施预览。程序员模块，其通过与所述设计师模块的各个分割后的图片进行一一对应，将数据与对应的界面元素进行关联；业务逻辑模块，其进行业务逻辑的开发，其内存储各个对应的数据逻辑，并进行加载。测试模块，其通过运行将设计师模块与程序员模块运行，完整的反馈界面信息，实时的调整界面的属性并得到反馈，其通过自动化脚本做通用性测试。进一步地，所述设计师模块和程序员模块之间的数据传输还包括：转换器，其将业务数据转换成控件可以理解的数据格式；校验器则是用来检查，是否为控件提供了符合格式的数据或数据转换器。进一步地，所述设计师模块和程序员模块之间的数据传输还包括：控件，其通过子控件构成，子控件的类型有图片渲染控件、文本渲染控件、平铺渲染控件、遮挡渲染控件利用子控件组成丰富的各种控件，再由控件组成更大的布局；所述子控件则作为渲染对象的产生单位，其为RenderItem对象，再将RenderItem对象送去渲染队列进行绘制；子控件的数据来源方式是其父控件，而父控件的数据是来源于业务逻辑的数据绑定。进一步地，所述设计师模块和程序员模块之间的数据传输还包括：绑定模块，以实现数据驱动UI，包括事件绑定模块和数据绑定模块。进一步地，所述设计师模块，在图形处理过程中，预先创建两张N*N的纹理，一般来说N＝1024或2048，在实际运行时，把UI设计师设计出的原始图片，动态的映射到这两张运行时纹理上，动态的迭入迭出。进一步地，所述设计师模块的图形处理过程为：将美术设计师的若干散图片，通过矩形填充算法填充到运行时纹理；图形结构为一颗三叉树，树节点如下：节点信息{已经占用的区域可用区域1(节点信息)可用区域2(节点信息)可用区域3(节点信息)}在向大纹理去查找可用的纹理区域时，需要查找叶子节点，即可用区域1、2、3，如果找到，那么填充该节点的占用区域信息，同时将该节点划分为已占用区域和可用区域，递归实现为一颗三叉树，完成纹理内容的填充；在已占用的区域内，重新划分已占用区域，可用区域1、2、3，依次类推。进一步地，在上述过程中，运行时图集需要美术做好原始图集的切分，采用九宫格划分方式，运行时图集就容纳更多的图片，通过监控需要同时绘制散图片是否将运行时图集填满并溢出，如果出现这种情况，则需要检查散图片是否做好正确的划分，并重复该过程，重新切分图片。进一步地，在映射过程中，需要对图片进行定位，在图形识别以及顶点定位过程中，往往产生顶点扭曲或偏移，产生图形错误，不能够准确定位，因此，在若干个区域内先后插入图形点，图形点与填充的图形组合插入，通过在同一区域内的三个图形点，确定基准顶点，则相应的图形码以此为基准进行排列，在同一区域内设定Z个区域段，在Z各区域段内设定三个图形点；图形点设置为移动式的，所述顶点确定模块根据每个顶点信息进行设定，设定每个区域段大小的灰度值E，通过将不同灰度值与相应的顶点Q对应，实时获取的图像图谱灰度值信息为E，预设顶点Q0对应的图像图谱灰度值信息为E0，将实际灰度值E与预设灰度值E0进行比较，获得实际顶点Qi。进一步地，设定对应的灰度值与顶点值按照预设的正相关关系进行确定，基于该算法得出对应的一组相对顶点信息；在确定获取每个定位点的顶点信息时，首先获取满足图像图谱灰度值信息为E0最接近的第一顶点Q1、第二顶点Q2、第三顶点Q3，通过该三个顶点获取可能的第一顶点Q(Qx，Qy)。进一步地，在获取实时顶点信息时，获取每个相对顶点信息的x轴方向参量QiX＝Qixcos(ai),ai表示对应的每个相对顶点Qi信息在坐标系中沿x轴方向的夹角，Qixsin(ai)表示对应的每个相对顶点Qi信息在坐标系中沿x轴方向的投影长度，分别为a1、a2、a3，因此，可能的第一顶点Q(Qx，Qy)中，实时x轴顶点为Qx＝(Q1x+Q2x+Q3x)/3；获取每个相对顶点信息的y轴方向参量Qiy＝Qixsin(ai),ai表示对应的每个相对顶点Qi信息在坐标系中沿y轴方向的夹角，Qixsin(ai)表示对应的每个相对顶点Qi信息在坐标系中沿y轴方向的投影长度；分别为a1、a2、a3，因此，实时y轴顶点为Qy＝(Q1y+Q2y+Q3y)/3。与现有技术相比本专利技术提供的基于数据驱动的可定制化GUI系统具有以下优点：1.通过事件和数据绑定，将设计师和程序员的分工完全拆分出来。即设计师只需要关注美学和用户体验层面的设计；程序员只需要关注业务逻辑，不需要写很多复杂的本文档来自技高网...

【技术保护点】
1.一种基于数据驱动的可定制化GUI系统，其特征在于，包括：/n设计师模块，其内生成GUI的图形，包括图片资源导入模块，用以对分割后的图片进行导入，界面布局生成模块，其通过对分割后的各个图片按照预先的顶点位置进行重新布局生成GUI界面，还包括动画加入及预览模块，在所述界面布局生成模块内加入动画并实施预览；/n程序员模块，其通过与所述设计师模块的各个分割后的图片进行一一对应，将数据与对应的界面元素进行关联；业务逻辑模块，其进行业务逻辑的开发，其内存储各个对应的数据逻辑，并进行加载；/n测试模块，其通过运行将设计师模块与程序员模块运行，完整的反馈界面信息，实时的调整界面的属性并得到反馈，其通过自动化脚本做通用性测试。/n

【技术特征摘要】
1.一种基于数据驱动的可定制化GUI系统，其特征在于，包括：
设计师模块，其内生成GUI的图形，包括图片资源导入模块，用以对分割后的图片进行导入，界面布局生成模块，其通过对分割后的各个图片按照预先的顶点位置进行重新布局生成GUI界面，还包括动画加入及预览模块，在所述界面布局生成模块内加入动画并实施预览；
程序员模块，其通过与所述设计师模块的各个分割后的图片进行一一对应，将数据与对应的界面元素进行关联；业务逻辑模块，其进行业务逻辑的开发，其内存储各个对应的数据逻辑，并进行加载；
测试模块，其通过运行将设计师模块与程序员模块运行，完整的反馈界面信息，实时的调整界面的属性并得到反馈，其通过自动化脚本做通用性测试。


2.根据权利要求1所述的基于数据驱动的可定制化GUI系统，其特征在于，所述设计师模块和程序员模块之间的数据传输还包括：
转换器，其将业务数据转换成控件可以理解的数据格式；
校验器则是用来检查，是否为控件提供了符合格式的数据或数据转换器。


3.根据权利要求1所述的基于数据驱动的可定制化GUI系统，其特征在于，所述设计师模块和程序员模块之间的数据传输还包括：
控件，其通过子控件构成，子控件的类型有图片渲染控件、文本渲染控件、平铺渲染控件、遮挡渲染控件利用子控件组成丰富的各种控件，再由控件组成更大的布局；所述子控件则作为渲染对象的产生单位，其为RenderItem对象，再将RenderItem对象送去渲染队列进行绘制；子控件的数据来源方式是其父控件，而父控件的数据是来源于业务逻辑的数据绑定。


4.根据权利要求1所述的基于数据驱动的可定制化GUI系统，其特征在于，所述设计师模块和程序员模块之间的数据传输还包括：绑定模块，以实现数据驱动UI，包括事件绑定模块和数据绑定模块。


5.根据权利要求3所述的基于数据驱动的可定制化GUI系统，其特征在于，所述设计师模块，在图形处理过程中，预先创建两张N*N的纹理，一般来说N＝1024或2048，在实际运行时，把UI设计师设计出的原始图片，动态的映射到这两张运行时纹理上，动态的迭入迭出。


6.根据权利要求5所述的基于数据驱动的可定制化GUI系统，其特征在于，所述设计师模块的图形处理过程为：
将美术设计师的若干散图片，通过矩形填充算法填充到运行时纹理；
图形结构为一颗三叉树，树节点如下：
节点信息
{
已经占用的区域
可用区域1(节点信息)
可用区域2(节点信息)
可用区域3(节点信息)
}
在向大纹理去查找可用的纹理区域时，需要查找叶子节...

【专利技术属性】
技术研发人员：刘泳，冯道柱，
申请(专利权)人：广州银汉科技有限公司，
类型：发明
国别省市：广东;44