一种图形化编程构建UI组合数据的方法及终端与流程

一种图形化编程构建ui组合数据的方法及终端
技术领域
1.本发明涉及图形编程领域，尤其涉及一种图形化编程构建ui组合数据的方法及终端。


背景技术：

2.现有的图形编程较成熟的软件是scratch和blockly，其能够通过直接操纵图形“积木”完成编程，根据用户拖拽出的积木搭建形式生成对应的代码，但其都是html语言组织的ui形状，无法应用于c#中，也无法在unity开发中使用。


技术实现要素：

3.本发明所要解决的技术问题是：提供一种图形化编程构建ui组合数据的方法及终端，实现在unity中进行图形化编程。
4.为了解决上述技术问题，本发明采用的一种技术方案为：
5.一种图形化编程构建ui组合数据的方法，包括步骤：
6.s1、绑定第一积木块及第一节点集，根据所述第一节点集中每一节点的节点类型生成每一所述节点所对应的ui元素，根据所述ui元素生成所述第一积木块对应的ui；
7.s2、接收将第二积木块拼接到第一积木块上的拼接指令；
8.s3、判断所述第一积木块及所述第二积木块是否匹配，若是，则拼接所述第一积木块的第一节点及所述第二积木块的第二节点并建立所述第一节点及所述第二节点之间的连接关系。
9.为了解决上述技术问题，本发明采用的另一种技术方案为：
10.一种图形化编程构建ui组合数据的终端，包括存储器、处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
11.s1、绑定第一积木块及第一节点集，根据所述第一节点集中每一节点的节点类型生成每一所述节点所对应的ui元素，根据所述ui元素生成所述第一积木块对应的ui；
12.s2、接收将第二积木块拼接到第一积木块上的拼接指令；
13.s3、判断所述第一积木块及所述第二积木块是否匹配，若是，则拼接所述第一积木块的第一节点及所述第二积木块的第二节点并建立所述第一节点及所述第二节点之间的连接关系。
14.本发明的有益效果在于：设置节点集作为积木块，根据节点集中每一节点的节点类型匹配对应的ui元素，完成对积木块的渲染，拼接积木块时，判断积木块是否匹配，若匹配则拼接第一积木块及第二积木块中的相应节点，实现了对ui数据的封装，通过设置节点集，能够在unity中实现图形化编程，简化了unity中的ui布局过程，并且各个积木块之间可以通过节点互相连接，大大提高了编程的灵活性。
附图说明
15.图1为本发明实施例的一种图形化编程构建ui组合数据的方法的步骤流程图；
16.图2为本发明实施例的一种图形化编程构建ui组合数据的终端的结构示意图；
17.图3为本发明实施例的一种积木块拼接完成示意图；
18.图4为本发明实施例的一种积木块结构及对应操作示意图；
19.图5为本发明实施例的一种积木块ui渲染步骤流程图；
20.图6为本发明实施例的各种节点类型所对应的ui示意图；
21.图7为本发明实施例的一种积木块拼接步骤流程图；
22.图8为本发明实施例的一种动态扩展ui生成的步骤流程图；
23.图9为本发明实施例的一种动态扩展ui前后效果示意图；
24.图10为本发明实施例的一种积木块所对应的节点集结构示意图；
25.图11为本发明实施例的一种ui渲染完成的积木块示意图；
26.图12为本发明实施例的积木块连接ui示意图；
27.标号说明：
28.1、一种图形化编程构建ui组合数据的终端；2、处理器；3、存储器。
具体实施方式
29.为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
30.请参照图1及图3至图11，一种图形化编程构建ui组合数据的方法，包括步骤：
31.s1、绑定第一积木块及第一节点集，根据所述第一节点集中每一节点的节点类型生成每一所述节点所对应的ui元素，根据所述ui元素生成所述第一积木块对应的ui；
32.s2、接收将第二积木块拼接到第一积木块上的拼接指令；
33.s3、判断所述第一积木块及所述第二积木块是否匹配，若是，则拼接所述第一积木块的第一节点及所述第二积木块的第二节点并建立所述第一节点及所述第二节点之间的连接关系。
34.从上述描述可知，本发明的有益效果在于：设置节点集作为积木块，根据节点集中每一节点的节点类型匹配对应的ui元素，完成对积木块的渲染，拼接积木块时，判断积木块是否匹配，若匹配则拼接第一积木块及第二积木块中的相应节点，实现了对ui数据的封装，通过设置节点集，能够在unity中实现图形化编程，简化了unity中的ui布局过程，并且各个积木块之间可以通过节点互相连接，大大提高了编程的灵活性。
35.进一步的，所述s1具体为：
36.根据所述第一积木块的功能选择对应的节点类型生成所述第一节点集，绑定所述第一积木块及所述第一节点集，所述第一节点集以关联树结构存储；
37.从所述关联树的第一根节点开始逐一获取所述节点类型，按顺序生成所述节点类型所对应的ui元素，按照顺序拼接所述ui元素，生成所述第一积木块对应的ui。
38.由上述描述可知，根据积木块的功能选择对应的节点类型生成节点集，并根据积木块功能之间的关系将节点集以关联树结构存储，从关联树的根节点开始逐一获取节点类型及其对应的ui元素，拼接ui元素获取ui，实现根据积木块所设定的功能自动生成相应ui。
39.进一步的，所述s2中所述拼接指令还包括所述第一积木块的位置及所述第二积木块的位置；
40.所述s3具体为：
41.s31、判断所述第一积木块的位置及所述第二积木块的位置是否对应；
42.s32、若是，则判断所述第一积木块中是否存在拼接节点；
43.s33、若是，则判断所述第二积木块所对应的第二节点集中的第二根节点是否与所述拼接节点匹配，若是，则执行s34；否则，判断所述第二积木块所对应的第二节点集中的第二根节点是否与所述第一积木块所对应的第一节点集中的第一根节点匹配，若是，则执行s35；
44.s34、拼接所述拼接节点及所述第二根节点并建立所述拼接节点及所述第二根节点之间的连接关系；
45.s35、拼接所述第一根节点及所述第二根节点并建立所述第一根节点及所述第二根节点之间的连接关系。
46.由上述描述可知，拼接第一积木块与第二积木块时，判断二者位置是否对应、第一积木块是否有拼接节点、若有拼接节点则拼接节点与第二积木块的根节点是否匹配、若无拼接节点则第一积木块的根节点作为拼接节点，判断第一积木块的根节点与第二积木块的根节点是否匹配，从多个方面保证最终拼接完成的积木块的功能之间能够逻辑自洽。
47.进一步的，所述节点类型包括事件类型、执行类型、显示类型及布尔类型。
48.由上述描述可知，节点类型囊括大部分功能，能够适应通常情况下构造积木块的需要。
49.进一步的，所述ui元素包括图形ui、事件ui、执行ui、下层关联ui、文本ui、下拉框ui、按钮ui及终止形状结构ui。
50.由上述描述可知，将ui元素细化，方便根据具体情况准确选择对应的ui元素。
51.请参照图2，一种图形化编程构建ui组合数据的终端，包括存储器、处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
52.s1、绑定第一积木块及第一节点集，根据所述第一节点集中每一节点的节点类型生成每一所述节点所对应的ui元素，根据所述ui元素生成所述第一积木块对应的ui；
53.s2、接收将第二积木块拼接到第一积木块上的拼接指令；
54.s3、判断所述第一积木块及所述第二积木块是否匹配，若是，则拼接所述第一积木块的第一节点及所述第二积木块的第二节点并建立所述第一节点及所述第二节点之间的连接关系。
55.本发明的有益效果在于：设置节点集作为积木块，根据节点集中每一节点的节点类型匹配对应的ui元素，完成对积木块的渲染，拼接积木块时，判断积木块是否匹配，若匹配则拼接第一积木块及第二积木块中的相应节点，实现了对ui数据的封装，通过设置节点集，能够在unity中实现图形化编程，简化了unity中的ui布局过程，并且各个积木块之间可以通过节点互相连接，大大提高了编程的灵活性。
56.进一步的，所述s1具体为：
57.根据所述第一积木块的功能选择对应的节点类型生成所述第一节点集，绑定所述
第一积木块及所述第一节点集，所述第一节点集以关联树结构存储；
58.从所述关联树的第一根节点开始逐一获取所述节点类型，按顺序生成所述节点类型所对应的ui元素，按照顺序拼接所述ui元素，生成所述第一积木块对应的ui。
59.由上述描述可知，根据积木块的功能选择对应的节点类型生成节点集，并根据积木块功能之间的关系将节点集以关联树结构存储，从关联树的根节点开始逐一获取节点类型及其对应的ui元素，拼接ui元素获取ui，实现根据积木块所设定的功能自动生成相应ui。
60.进一步的，所述s2中所述拼接指令还包括所述第一积木块的位置及所述第二积木块的位置；
61.所述s3具体为：
62.s31、判断所述第一积木块的位置及所述第二积木块的位置是否对应；
63.s32、若是，则判断所述第一积木块中是否存在拼接节点；
64.s33、若是，则判断所述第二积木块所对应的第二节点集中的第二根节点是否与所述拼接节点匹配，若是，则执行s34；否则，判断所述第二积木块所对应的第二节点集中的第二根节点是否与所述第一积木块所对应的第一节点集中的第一根节点匹配，若是，则执行s35；
65.s34、拼接所述拼接节点及所述第二根节点并建立所述拼接节点及所述第二根节点之间的连接关系；
66.s35、拼接所述第一根节点及所述第二根节点并建立所述第一根节点及所述第二根节点之间的连接关系。
67.由上述描述可知，拼接第一积木块与第二积木块时，判断二者位置是否对应、第一积木块是否有拼接节点、若有拼接节点则拼接节点与第二积木块的根节点是否匹配、若无拼接节点则第一积木块的根节点作为拼接节点，判断第一积木块的根节点与第二积木块的根节点是否匹配，从多个方面保证最终拼接完成的积木块的功能之间能够逻辑自洽。
68.进一步的，所述节点类型包括事件类型、执行类型、显示类型及布尔类型。
69.由上述描述可知，节点类型囊括大部分功能，能够适应通常情况下构造积木块的需要。
70.进一步的，所述ui元素包括图形ui、事件ui、执行ui、下层关联ui、文本ui、下拉框ui、按钮ui及终止形状结构ui。
71.由上述描述可知，将ui元素细化，方便根据具体情况准确选择对应的ui元素。
72.请参照图1及图3至图7，本发明的实施例一为：
73.一种图形化编程构建ui组合数据的方法，特别适用于unity平台中实现图形化编程，包括步骤：
74.s1、请参照图5，绑定第一积木块及第一节点集，根据所述第一节点集中每一节点的节点类型生成每一所述节点所对应的ui元素，根据所述ui元素生成所述第一积木块对应的ui；
75.具体为：
76.根据所述第一积木块的功能选择对应的节点类型生成所述第一节点集，绑定所述第一积木块及所述第一节点集，所述第一节点集以关联树结构存储；
77.从所述关联树的第一根节点开始逐一获取所述节点类型，按顺序生成所述节点类
型所对应的ui元素，按照顺序拼接所述ui元素，生成所述第一积木块对应的ui；具体的，根据ui形状描述数据生成所述节点类型所对应的ui元素，ui形状描述数据包括ui元素及输入值，输入值包括ui元素对应的提示文字及输入框，输入框包括文本输入框和数值输入框；
78.节点类型包括事件类型、执行类型、显示类型及布尔类型；ui元素包括图形ui、事件ui、执行ui、下层关联ui、插值ui、文本ui、下拉框ui、按钮ui、变量引用ui及终止形状结构ui，请参照图6左侧，关联树根节点的类型决定该节点的背景ui类型，如图6从上至下依次为事件类型对应的事件ui、执行类型对应的执行ui、显示类型对应的文本ui及布尔类型对应的下拉框ui，根据输入值进一步渲染如图6中事件类型输入值中的提示文字为“当被点击”，输入框为空；执行类型输入值中的提示文字为“发送广播”，输入框为文本输入框；请参照图12，ui形状描述数据还包括积木块连接类型，如积木块为向下连接，则匹配图12左所示的向下关联ui，若积木块为插值连接，则匹配图12右所示的插值ui；
79.请参照图6右侧，为各类背景ui示意；当积木关联数据的首数据类型为：事件void func(){}，背景图显示事件ui(左列第一个)；当积木关联数据的首数据类型为执行方法dosomething()，背景显示为执行ui(左列第二个)；其中，逻辑块如if逻辑循环等也是将执行ui作为第一排的背景图；当积木关联数据端额首数据类型为bool类型，背景图显示为布尔ui(右列第三个)；处上述首数据类型外，其它首数据类型都是显示为通用ui(右列第二个)；
80.若关联树不仅包含根节点，则进入多排图形的显示过程：其中，除根节点外关联树其余节点的默认背景为子节点默认ui；如果子节点配置首数据是标识return返回属性的，则背景显示成返回ui(左列第四个)；
81.其中，图形ui包括圆形ui、菱形ui及图片ui；文本ui包括静态文本ui及动态文本ui；下拉框ui包括下来组合框ui及动态下拉框ui；按钮ui包括点击按钮ui及按钮列表ui；
82.请参照图7，两块积木块的拼接过程为：
83.s2、接收将第二积木块拼接到第一积木块上的拼接指令，拼接指令包括第一积木块的位置及第二积木块的位置；
84.s3、判断所述第一积木块及所述第二积木块是否匹配，若是，则拼接所述第一积木块的第一节点及所述第二积木块的第二节点并建立所述第一节点及所述第二节点之间的连接关系；
85.具体为：
86.s31、判断所述第一积木块的位置及所述第二积木块的位置是否对应；
87.s32、若是，则判断所述第一积木块中是否存在拼接节点，具体的，预先在第一积木块中设置插值表，存储第一积木块中的拼接节点路径，判断差值表是否为空，若否，则第一积木块中存在拼接节点，其中差值表存储具体数据插入关系，与积木块中拼接节点对应；
88.其中，拼接节点属性包括名字name和层标识layer，如多个不同拼接节点对应同一方法的不同参数，他们的名字name相同，但层标识layer不同，第一个参数的layer为0，第一个参数的layer为1，以此类推；
89.在一种可选的实施方式中，层标识layer为大于等于0的整数；
90.s33、若是，则判断所述第二积木块所对应的第二节点集中的第二根节点是否与所述拼接节点匹配，若是，则执行s34；否则，判断所述第二积木块所对应的第二节点集中的第
二根节点是否与所述第一积木块所对应的第一节点集中的第一根节点匹配，若是，则执行s35；
91.具体的，判断拼接节点是否匹配包括：
92.s331、ui形状判断，如该位置表述的是一个圆形放置区域，则不能放入其他形状；
93.s332、底层数据逻辑判断，获取第一积木块放置区域的实际拼接节点(可通过插值表获取)获取该节点连接的包含属性(在生成积木时，每个积木会自动生成一个配置属性如bool、数字、字符串等)，判断第二积木块的配置属性是否与节点连接的包含属性对应，若对应则可放入；
94.s34、拼接所述拼接节点及所述第二根节点并建立所述拼接节点及所述第二根节点之间的连接关系及第一积木块和第二积木块之间的父子连接关系，具体的，将第二根节点的路径与第一积木块的插值表中相应拼接节点建立映射关系；若此时用第四积木块替换第二积木块位置，则直接更新映射关系；
95.s35、拼接所述第一根节点及所述第二根节点并建立所述第一根节点及所述第二根节点之间的连接关系及第一积木块和第二积木块之间的父子连接关系，具体的，将第二根节点的路径与第一根节点的路径对应存入第一积木块的插值表中；
96.s4、根据第一积木块及第二积木块的组合关系结合第一节点集及第二节点集生成对应代码。
97.请参照图8及图9，本发明的实施例二为：
98.一种图形化编程构建ui组合数据的方法，其与实施例一的不同之处在于，可在特定的两块积木之间拼接积木，具体为：
99.在已拼接的第一积木块及第二积木块之间拼接第三积木块：
100.a1、分开第一积木块与第二积木块，具体的，判断第一积木块与第二积木块的父子连接关系，读取父积木块中的插值表，删去其中存储的子积木块节点集中的节点路径，在本实施例中，第一积木块即为父积木块，第二积木块即为子积木块；
101.即积木在断开连接时，可以通过连接关系反向断开数据组合；
102.a2、分别判断第一积木块及第二积木块与第三积木块是否匹配，若都匹配，则拼接所述第一积木块的第一节点及所述第三积木块的第三节点并建立所述第一节点及所述第三节点之间的连接关系，拼接所述第三积木块的第三节点及所述第二积木块的第二节点并建立所述第三节点及所述第二节点之间的连接关系，具体实施方式同实施例中s3；
103.s4、根据拼接后的第一积木块、第二积木块及第三积木块，以及其对应的节点集，生成对应的代码；
104.请参照图8及图9，第一积木块上提示文字为“如果那么”，第二积木块上提示文字为“否则”，第三积木块上提示文字为“否则如果”，将第三积木块插入第一积木块及第二积木块之间。
105.请参照图10及图11，本发明的实施例三为：
106.将上述的一种图形化编程构建ui组合数据的方法中生成积木块的方法应用于实际场景中：
107.请参照图10，为目标积木节点集结构示意图；根据目标积木块的功能：按下键盘，执行后续事件，选择对应的节点类型事件类型节点、if逻辑类型节点、布尔类型节点及有回
调执行方法节点，生成目标节点集；设置节点中的具体值，设置if逻辑类型节点中的判断分支及对应的执行内容，布尔类型节点中的判定条件及判定类型，有回调执行方法节点中的参数；具体的，设置布尔类型节点中的第一判定条件为有回调执行方法的返回值，判定类型为相等，第二判定条件为固定值true，设置有回调执行方法节点中第一参数为固定值按下，第二参数为输入的按键；则该积木块实现：有回调执行方法节点获取输入的按键作为第二参数，返回第一参数固定值按下及第二参数输入的按键，布尔判定节点接收第一参数及第二参数作为第一判定条件“按下输入的按键”，根据预设判定类型相等及第二判定条件true，判断“按下输入的按键”是否为true，若为true，则执行if逻辑节点中相应判断分支对应的执行内容；
108.绑定目标积木块及目标节点集，所述第一节点集以关联树结构事件类型节点
→
if逻辑类型节点
→
布尔类型节点
→
有回调执行方法节点存储；
109.获取根节点的节点类型为事件类型，则获取事件类型对应的事件ui作为积木块的背景ui，对应提示文字为“当按下键”无输入框；if逻辑类型节点对应向下关联ui，无对应提示文字及输入框；布尔判定类型节点对应下拉框ui，对应提示文字为下拉框中的选项如“空格”；按照顺序拼接所述ui元素，生成所述第一积木块对应的ui；
110.更新目标积木块中的插值表，存储if逻辑类型节点的路径。
111.请参照图2，本发明的实施例四为：
112.一种图形化编程构建ui组合数据的终端1，包括处理器2、存储器3及存储在存储器3上并可在所述处理器2上运行的计算机程序，所述处理器2执行所述计算机程序时实现实施例一、实施例二或实施例三中的各个步骤。
113.综上所述，本发明提供了一种一种图形化编程构建ui组合数据的方法及终端，通过在untiy中搭建积木块的结构，根据积木块的功能自行选择节点类型构建积木块，预先设置节点类型所对应的ui，按照节点类型存储时的关联树结构对ui进行拼接，渲染出积木块所对应的ui；在拼接积木块时，除了两个积木块ui之间的结合，还能够将两个积木块所对应的节点集进行关联，实现底层数据的结合，并且能够根据拼接后的积木块生成对应的代码，简化了编程的过程，大大提高了编程的灵活性。
114.以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。