CN111309321A

CN111309321A - 一种基于数据驱动的可定制化gui系统

Info

Publication number: CN111309321A
Application number: CN201911102686.4A
Authority: CN
Inventors: 刘泳; 冯道柱
Original assignee: Guangzhou Yinhan Technology Co ltd
Current assignee: Guangzhou Yinhan Technology Co ltd
Priority date: 2019-11-12
Filing date: 2019-11-12
Publication date: 2020-06-19

Abstract

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

Description

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

技术领域

本发明涉及计算机图形学、网络游戏、实时可视化UI交互技术领域，特别是涉及一种基于数据驱动的可定制化GUI系统。

背景技术

图形化界面(Graphic User Interface，以下简称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＝Qix cos(ai),ai表示对应的每个相对顶点Qi信息在坐标系中沿x 轴方向的夹角，Qix sin(ai)表示对应的每个相对顶点Qi信息在坐标系中沿x 轴方向的投影长度，分别为a1、a2、a3，因此，可能的第一顶点Q(Qx，Qy) 中，实时x轴顶点为Qx＝(Q1x+Q2x+Q3x)/3；获取每个相对顶点信息的y轴方向参量Qiy＝Qix sin(ai),ai表示对应的每个相对顶点Qi信息在坐标系中沿y轴方向的夹角，Qix sin(ai)表示对应的每个相对顶点Qi信息在坐标系中沿y轴方向的投影长度；分别为a1、a2、a3，因此，实时y轴顶点为Qy＝(Q1y+ Q2y+Q3y)/3。

与现有技术相比本发明提供的基于数据驱动的可定制化GUI系统具有以下优点：1.通过事件和数据绑定，将设计师和程序员的分工完全拆分出来。即设计师只需要关注美学和用户体验层面的设计；程序员只需要关注业务逻辑，不需要写很多复杂的界面逻辑相关的代码。换句话说，UI界面是基于数据驱动的界面，数据驱动占主体，UI界面占辅助。这部分将在第四部分详细叙述。

2.在界面的设计阶段，设计师所设计出的效果图就是最终产品的展示结果，中间不存在二次加工的过程。这部分的主要目的是让设计师的水平完全发挥出来，而不是受限于逻辑等其他方面的制约。这个概念也是新一代游戏引擎所崇尚的概念，例如UE的蓝图系统，完全反映游戏制作人的想法，而不受限于“需求文档->程序开发->回归测试”的流程限制。

3.高效的反馈和测试流程。软件或者游戏的重点是游戏玩法的逻辑，而不是UI界面所表达的逻辑(UI界面的逻辑是指逻辑数据的重新组织与更新显示，事件的绑定和处理)。需要做大做到游戏逻辑就是界面逻辑，测试游戏逻辑就测试界面逻辑。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例基于数据驱动的GUI流程和职责划分功能框图；

图2为本发明实施例基于数据驱动的GUI的数据绑定的功能框图；

图3为本发明实施例控件样式的一种实现方式实施例的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参阅图1所示，其为本发明实施例提供的基于数据驱动的可定制化GUI 系统的示意图，该系统包括：

具体而言，设计师负责界面布局的编辑，程序负责数据的绑定和业务逻辑的编写，二者都可以同时针对同一界面进行操作而避免冲突的情况，当后期进行优化调整的时候，使得二者都有“并行”的操作空间。测试作为检测的最后一环，则需要编写一定量的测试脚本，将版本常规测试的人力投放缩减到一定的比例。同时作为测试业务就是测试UI的系统，可以更全面的监控代码质量。

图2为数据的绑定方式示意图。业务数据，即数据源，通过绑定对象，与实际控件显示时所需要的数据建立起一一对应的联系，使用转换器和校验器来完成：转换器，其将业务数据转换成控件可以理解的数据格式；校验器则是用来检查，是否为控件提供了符合格式的数据或数据转换器。

需要注意的是，对于业务层来说，数据的改变时需要触发界面的刷新，通过事件的方式来进行触发逻辑的实现，将触发事件封装在业务数据改变底层。控件数据也有对应的样式，而样式中所展现表达的数据也依然来自于业务数据。

图3是样式的一种实现方式，在该方式下，一是为设计师提供一种控件自定义外观的可能，有点类似子布局，但是以更加轻量的结构来进行实现；其二是为了对应用这种样式的控件进行全局的操作和替换，比如按钮的文本颜色从黄色改为蓝色，在后期大量界面存在的情况下，如果有样式的存在，只需要修改样式，而无需一一替换处理。

下面描述一下样式的基本结构，通常所说的控件实际上是由更小的子控件构成的，子控件的类型有图片渲染控件、文本渲染控件、平铺渲染控件、遮挡渲染控件等，利用,子控件组成丰富的各种控件，再由控件组成更大的布局。子控件则作为渲染对象的产生单位，图中为RenderItem对象，再将RenderItem 对象送去渲染队列进行绘制。子控件的数据来源方式是其父控件，而父控件的数据是来源于业务逻辑的数据绑定，换句话说，数据驱动的GUI系统是有操作子控件表现的能力的，只是这些都封装在底层完成。

对本发明实施例而言，首先，绑定机制，以实现数据驱动UI，包括事件的绑定和数据的绑定。要解释这个机制，需要先回顾一下界面相关的程序组成。程序的本质是数据加算法。数据会在存储、逻辑、界面三个层次流通，所以站在数据的角度上来看，这三个层次都很重要。但是算法就分布不均了，对于一个三层结构的程序来说，算法的分布如下：

A.数据库内部。

B.读取和写会数据。

C.业务逻辑。

D.数据展示。

E.界面与逻辑之间的交互。

AB两个部分的算法一般都非常稳定，不会轻易改动，复用性也很高；C 处理与需求相关的，最复杂，变动也最大，程序的主要工作就是集中在这里； DE两层负责GUI与逻辑的交互，也占有了一定的算法。

显然C是核心，也是开发的重中之重，所以程序应该把精力放在C，然而DE两个部分经常成为麻烦的来源，首先，DE与C的逻辑关系密切，一不小心就把写在逻辑层的算法写进这两部分(这是引入MVC、MVP等设计模式的一个原因，然无法根本解决问题)；其次，以界面消息或者事件的方式与逻辑层进行沟通，一旦出现消息触发数据在多处展示的时候，就会出现复杂的同步代码；最后，D和E两部分会占去一大部分精力。

问题的根源在于逻辑层与界面层的地位存在相互切换的情况：当实现需求的时候，逻辑层占有中心地位；而到了实现UI交互的时候界面层有占用中心地位。需要做的就是让程序员的思维永远的固定在逻辑层，而通过数据或事件绑定的方式来驱动界面的更新和事件的处理，即基于数据驱动的UI。

引擎中提供的机制是：

1.数据的变化会直接产生界面展示的变化，而不需要写额外的界面刷新逻辑，程序员的思维始终停留在业务逻辑层的数据处理上。

2.数据的变化会触发事件：数据的改变往往有两张途径，一是服务器下发的数据，二是界面操作或者游戏逻辑本身修改数据逻辑。可以一定程度上统一这两种方式。

其次，一体化的开发流程，提供了一种编辑流程，从原始图片生产，到 UI布局的制作由设计师来完成，专精集中在设计美学和用户体验上；程序负责将自己的数据和需要相应的事件绑定到对应的UI控件上，专精集中在逻辑业务的编写上；测试负责对上述流程进行测试，而测试的集中点则是针对业务逻辑的测试。

需要为设计师提供一套强大的编辑器，从图片的生成，到布局界面的展示，包括在实际游戏运行过程中的预览，都可以完全的展示，同时还要集成UI的动画等功能，方便设计师在任何一个过程中发现自己实际的问题。

针对美术设计师，还需要提出“样式这个概念”，可以将实际的控件拆分为两个部分：行为部分和样式部分。以按钮为例，所谓行为部分是指，按钮可以点击，并且可以记录当前鼠标或者手势的状态(正常状态、按下状态等)。所谓样式部分是指按钮的呈现方式，如由底图和文本组成，也可以实现为其他形式。对于各个项目来说，行为部分往往固定，而样式部分就各不相同，往往一款产品中的元素具有相似的风格。抽离样式可以为后期批量替换风格带来一种快速的可能。

最后，测试体系。在一般的游戏测试中，测试的重心放在UI点击操作上，往往需要人力成本的投入，点击已经开发好的GUI界面，查看其对应的表现是否正确，且每个比较重要的版本都要反复的进行测试，这在人工投放上将是一块不小的支出；而业务逻辑的正确性测试则需要通过UI的操作反馈出来，以黑盒的方式验证是否正确。为了避免重复性的点击操作，一些比较大型的公司开始研发自动化UI测试脚本工具，如网易的AirTest等，可以通过远程的方式连接到终端，获取界面布局或模拟点击的方式，来触发相应时间，从而通过编写测试脚本的方式，实现人工的解放。

在基于数据驱动的GUI系统中，通过编写测试脚本的方式将更加的可行，实际上是把以UI点击事件的测试，转变成为业务逻辑数据正确性的测试。换句话说，只要业务逻辑的正确性有了保证，界面的正确性也会同时得到保证，这也体现了以数据为根本的设计思想。那么数据的测试，则更加可以利用脚本的方式来进行处理，针对自己想测试的数据做单元测试用例的编写。

具体而言，本发明实施例，图形信息与程序员的编码信息对应，每个图形均通过对应的代码进行对应，每个图形定点数设定数据-图像矩阵f，每个顶点对应的数据编码、编号、顶点位置均能够建立，以使得图形与程序编码能过一一对应。

本实施例的设计师模块，在图形处理过程中，预先创建两张N*N的纹理，一般来说N＝1024或2048，在实际运行时，把UI设计师设计出的原始图片，动态的映射到这两张运行时纹理上，动态的迭入迭出；所有的UI再进行绘制的时候，均通过这该两张纹理来进行绘制。上述过程采用动态图集技术，将传统工艺中的图集去除的基础，传统工艺中的图集，也可以称之为离线图集，本实施例中，采用动态图集，可对应的称谓运行时图集。

在该过程中，具体过程为：

将美术设计师的若干散图片，通过矩形填充算法填充到运行时纹理；本实施例的矩形填充算法为，图形结构为一颗三叉树，树节点如下：

图形结构为一颗三叉树，树节点如下：

节点信息

{

已经占用的区域

可用区域1(节点信息)

可用区域2(节点信息)

可用区域3(节点信息)

}

在上述过程中，运行时图集需要美术做好原始图集的切分，采用九宫格划分方式，运行时图集就容纳更多的图片，通过监控需要同时绘制散图片是否将运行时图集填满并溢出，如果出现这种情况，则需要检查散图片是否做好正确的划分，并重复该过程，重新切分图片。

在映射过程中，与原有的正方形图形同步，将图片的顶点预生成，这样就减少了这个图片的绘制面积，如果该图片包含有大量像素的空白区域，那么该算法带来的效益将更加客观，在UI中，往往使用大量的图标、Logo等不规则图片，在实际中得到很好的应用，可以看到，处理以增加少部分VS阶段的处理开销，换取了大量PS阶段的减少。

具体而言，在映射过程中，需要对图片进行定位，在图形识别以及顶点定位过程中，往往产生顶点扭曲或偏移，产生图形错误，不能够准确定位，因此，在若干个区域内先后插入图形点，图形点与填充的图形组合插入，通过在同一区域内的三个图形点，确定基准顶点，则相应的图形码以此为基准进行排列，在同一区域内设定Z个区域段，在Z各区域段内设定三个图形点。图形点也可设置为移动式的，所述顶点确定模块根据每个顶点信息进行设定，设定每个区域段大小的灰度值E，通过将不同灰度值与相应的顶点Q对应，实时获取的图像图谱灰度值信息为E，预设顶点Q0对应的图像图谱灰度值信息为E0，将实际灰度值E与预设灰度值E0进行比较，获得实际顶点Qi。

在本实施例中，设定对应的灰度值与顶点值按照预设的正相关关系进行确定，基于该算法得出对应的一组相对顶点信息；在确定获取每个定位点的顶点信息时，首先获取满足图像图谱灰度值信息为E0最接近的第一顶点Q1、第二顶点Q2、第三顶点Q3，通过该三个顶点获取可能的第一顶点Q(Qx，Qy)，在获取实时顶点信息时，获取每个相对顶点信息的x轴方向参量QiX＝Qix cos (ai),ai表示对应的每个相对顶点Qi信息在坐标系中沿x轴方向的夹角，Qix sin(ai)表示对应的每个相对顶点Qi信息在坐标系中沿x轴方向的投影长度，分别为a1、a2、a3，因此，可能的第一顶点Q(Qx，Qy)中，实时x轴顶点为Qx＝(Q1x+Q2x+Q3x)/3。获取每个相对顶点信息的y轴方向参量Qiy＝Qix sin(ai),ai表示对应的每个相对顶点Qi信息在坐标系中沿y轴方向的夹角， Qix sin(ai)表示对应的每个相对顶点Qi信息在坐标系中沿y轴方向的投影长度；分别为a1、a2、a3，因此，实时y轴顶点为Qy＝(Q1y+Q2y+Q3y)/3。因此，可能的第一定位顶点Q(Qx，Qy)信息能够确定，也即能够确定潜在定位点的顶点。

本实施例通过上述计算方法获取基于每个区域段的图像灰度与顶点对应关系，获取i个可能顶点点，i表示序号，根据实际真实图像单元的数量而定，每个顶点点的坐标表达为Qi(Qix，Qiy)。本实施例中，定位点的数量设置为三个，数量过少，产生定位误差，数量过多，图形重复比较，图形定位验证时间大大延长。因此，需对i个顶点进行选择，确定最优三个顶点，所述顶点确定模块设定其中一基础顶点函数N，根据预先顶点的图形整理而得，将当前顶点函数信息与所述基础顶点函数的图形信息进行对比,

其中，

表示顶点函数信息与所述基础顶点函数的图形信息进行对比值，M_i表示第i基础图形库的图形量，也即选择的对应的顶点信息的数量，N_j表示某现有顶点的图形信息的顶点函数，U_ij表基础顶点函数图形信息与第i基础图形库的相关度，i表示基础顶点函数的编号，d表示修复系数，d的取值为 0.997；|A|表示顶点函数A的修复值，由于在运算过程中，产生图形转换，将人才函数A的修复值作为考虑因素。在本实施例中，还包括顶点修复模块，其确定基本顶点修复函数A0(L0，v0，W0)，当前顶点函数信息的顶点修复函数A(L，v，W)；顶点函数A的修复值：

|A|＝(L/L0+v/v0+W/W0)/4

其中，L表示表示的当前原始图形块顶点长度，L0表示预设的原始图形块顶点长度，v表示真实图像的平均灰度值，v0表示真实图像的预设灰度值， W表示真实顶点的分割区域数量，W0表示预设的真实顶点的分割区域数量。本实施例通过对原始图形、真实顶点的特性进行一定程度的修复，使得顶点选择更加准确。

本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种基于数据驱动的可定制化GUI系统，其特征在于，包括：

设计师模块，其内生成GUI的图形，包括图片资源导入模块，用以对分割后的图片进行导入，界面布局生成模块，其通过对分割后的各个图片按照预先的顶点位置进行重新布局生成GUI界面，还包括动画加入及预览模块，在所述界面布局生成模块内加入动画并实施预览；

程序员模块，其通过与所述设计师模块的各个分割后的图片进行一一对应，将数据与对应的界面元素进行关联；业务逻辑模块，其进行业务逻辑的开发，其内存储各个对应的数据逻辑，并进行加载；

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

转换器，其将业务数据转换成控件可以理解的数据格式；

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

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

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

6.根据权利要求5所述的基于数据驱动的可定制化GUI系统，其特征在于，所述设计师模块的图形处理过程为：

图形结构为一颗三叉树，树节点如下：

节点信息

{

已经占用的区域

可用区域1(节点信息)

可用区域2(节点信息)

可用区域3(节点信息)

}

在向大纹理去查找可用的纹理区域时，需要查找叶子节点，即可用区域1、2、3，如果找到，那么填充该节点的占用区域信息，同时将该节点划分为已占用区域和可用区域，递归实现为一颗三叉树，完成纹理内容的填充；在已占用的区域内，重新划分已占用区域，可用区域1、2、3，依次类推。

7.根据权利要求6所述的基于数据驱动的可定制化GUI系统，其特征在于，在上述过程中，运行时图集需要美术做好原始图集的切分，采用九宫格划分方式，运行时图集就容纳更多的图片，通过监控需要同时绘制散图片是否将运行时图集填满并溢出，如果出现这种情况，则需要检查散图片是否做好正确的划分，并重复该过程，重新切分图片。

8.根据权利要求7所述的基于数据驱动的可定制化GUI系统，其特征在于，在映射过程中，需要对图片进行定位，在图形识别以及顶点定位过程中，往往产生顶点扭曲或偏移，产生图形错误，不能够准确定位，因此，在若干个区域内先后插入图形点，图形点与填充的图形组合插入，通过在同一区域内的三个图形点，确定基准顶点，则相应的图形码以此为基准进行排列，在同一区域内设定Z个区域段，在Z各区域段内设定三个图形点；图形点设置为移动式的，所述顶点确定模块根据每个顶点信息进行设定，设定每个区域段大小的灰度值E，通过将不同灰度值与相应的顶点Q对应，实时获取的图像图谱灰度值信息为E，预设顶点Q0对应的图像图谱灰度值信息为E0，将实际灰度值E与预设灰度值E0进行比较，获得实际顶点Qi。

9.根据权利要求7所述的基于数据驱动的可定制化GUI系统，其特征在于，设定对应的灰度值与顶点值按照预设的正相关关系进行确定，基于该算法得出对应的一组相对顶点信息；在确定获取每个定位点的顶点信息时，首先获取满足图像图谱灰度值信息为E0最接近的第一顶点Q1、第二顶点Q2、第三顶点Q3，通过该三个顶点获取可能的第一顶点Q(Qx，Qy)。

10.根据权利要求9所述的基于数据驱动的可定制化GUI系统，其特征在于，在获取实时顶点信息时，获取每个相对顶点信息的x轴方向参量QiX＝Qix cos(ai),ai表示对应的每个相对顶点Qi信息在坐标系中沿x轴方向的夹角，Qix sin(ai)表示对应的每个相对顶点Qi信息在坐标系中沿x轴方向的投影长度，分别为a1、a2、a3，因此，可能的第一顶点Q(Qx，Qy)中，实时x轴顶点为Qx＝(Q1x+Q2x+Q3x)/3；获取每个相对顶点信息的y轴方向参量Qiy＝Qixsin(ai),ai表示对应的每个相对顶点Qi信息在坐标系中沿y轴方向的夹角，Qix sin(ai)表示对应的每个相对顶点Qi信息在坐标系中沿y轴方向的投影长度；分别为a1、a2、a3，因此，实时y轴顶点为Qy＝(Q1y+Q2y+Q3y)/3。