UI界面的处理方法、装置及电子设备与流程

本技术涉及游戏，尤其是涉及一种ui界面的处理方法、装置及电子设备。

背景技术：

1、ui界面的产出流程一般是根据界面效果图，设计输出多个散图资源，然后把散图资源在ui编辑器中拼接起来，而拼接过程一般是人工拼接，比如，手动设置ui散图的位置、缩放、旋转和透明度的属性，这样拼接出来的ui界面往往会和界面效果图有较大差异，且整个拼接过程消耗时间长，存在效率低误差大的问题。

技术实现思路

1、本技术的目的在于提供一种ui界面的处理方法、装置及电子设备，通过在渲染环境中对比初始目标ui界面和界面效果图，能够自动进行初始目标ui界面中的呈现效果参数调整，以使初始目标ui界面在渲染环境中所呈现的效果与界面效果图所指示的目标呈现效果相匹配，以降低目标ui界面与界面效果图的差异，提高ui界面制作效率。

2、第一方面，本技术实施例提供一种ui界面的处理方法，方法包括：确定待生成的目标ui界面，目标ui界面包括多个ui组件；确定针对多个ui组件制作的多个界面散图和针对目标ui界面制作的界面效果图，其中，每一界面散图用于呈现一ui组件，界面效果图用于指示生成后的目标ui界面的目标呈现效果；拼接多个界面散图以生成一初始目标ui界面；在渲染环境中比对界面效果图和初始目标ui界面，并对初始目标ui界面的呈现效果参数进行调整，以使初始目标ui界面在渲染环境中所呈现的效果与界面效果图所指示的目标呈现效果相匹配。

3、进一步地，上述呈现效果参数至少包括以下之一：色值、缩放值、旋转值、透明度；在渲染环境中比对界面效果图和初始目标ui界面，并对初始目标ui界面的呈现效果参数进行调整，包括：在渲染环境中比对界面效果图和初始目标ui界面，确定待调整的第一界面散图，及第一界面散图对应的待调整呈现效果参数对应的修正值；根据第一界面散图的待调整呈现效果参数对应的修正值，对第一界面散图进行参数调整。

4、进一步地，上述呈现效果参数包括：位置参数；在渲染环境中比对界面效果图和初始目标ui界面，并对初始目标ui界面的呈现效果参数进行调整，还包括：在渲染环境中比对界面效果图和初始目标ui界面，确定初始目标ui界面中待调整的第二界面散图；根据界面效果图，确定第二界面散图在初始目标ui界面中的最佳放置位置；控制第二界面散图移动至最佳放置位置。

5、进一步地，上述根据界面效果图，确定第二界面散图在初始目标ui界面中的最佳放置位置的步骤，包括：获取界面效果图对应的第一图像像素数据；获取第二界面散图在多个可选位置处的ui界面分别对应的第二图像像素数据；基于第一图像像素数据和多个第二图像像素数据，确定第二界面散图在初始目标ui界面中的最佳放置位置。

6、进一步地，上述获取第二界面散图在多个可选位置处的ui界面分别对应的第二图像像素数据的步骤，包括：获取第二界面散图的起始位置；根据起始位置确定第二界面散图对应的检测范围；基于检测范围，确定第二界面散图对应的多个可选位置；针对每个可选位置，获取第二界面散图在可选位置处的ui界面对应的第二图像像素数据。

7、进一步地，上述起始位置以第二界面散图中心位置坐标进行表征；根据起始位置确定第二界面散图对应的检测范围的步骤，包括：以第二界面散图中心位置坐标为中心，以预设距离为边长确定的方形区域，作为第二界面散图对应的检测范围；或者，以第二界面散图中心位置坐标为圆心，以预设距离为半径确定的圆形区域，作为第二界面散图对应的检测范围。

8、进一步地，上述基于检测范围，确定第二界面散图对应的多个可选位置的步骤，包括：应用第二界面散图中心位置坐标，遍历检测范围内的每个像素位置，确定第二界面散图对应的多个可选位置。

9、进一步地，上述获取所述第二界面散图在所述可选位置处的ui界面对应的第二图像像素数据的步骤，包括：创建渲染纹理；遍历所述第二界面散图在所述可选位置处的ui界面中的所有散图，将所有散图按位置渲染至所述渲染纹理中；从所述渲染完成的渲染纹理中获取所述第二界面散图在所述可选位置处的ui界面对应的第二图像像素数据。

10、进一步地，上述基于第一图像像素数据和多个第二图像像素数据，确定第二界面散图在初始目标ui界面中的最佳放置位置的步骤，包括：针对每个第二图像像素数据，统计第一图像像素数据和第二图像像素数据间的像素差异数量；将最小像素差异数量对应的可选位置确定为第二界面散图在初始目标ui界面中的最佳放置位置。

11、进一步地，在对初始目标ui界面的呈现效果参数进行调整之后，还包括：实时获取当前ui界面对应的第三图像像素数据及界面效果图对应的第一图像像素数据；根据第三图像像素数据和第一图像像素数据，生成ui界面差异图；显示ui界面差异图。

12、进一步地，上述根据第三图像像素数据和第一图像像素数据，生成ui界面差异图的步骤，包括：根据第三图像像素数据和第一图像像素数据，检测当前ui界面和界面效果图中的差异像素位置；将当前ui界面中的差异像素位置对应的像素值设置为指定像素值，得到ui界面差异图。

13、进一步地，上述根据第三图像像素数据和第一图像像素数据，检测当前ui界面和界面效果图中的差异像素位置的步骤，包括：遍历当前ui界面和界面效果图中的每个相同像素位置；针对每个相同像素位置，判断相同像素位置分别对应于第三图像像素数据和第一图像像素数据中的数据是否一致；如果否，将当前ui界面中的相同像素位置确定为差异像素位置。

14、第二方面，本技术还提供一种ui界面的处理装置，装置包括：ui界面确定模块，用于确定待生成的目标ui界面，目标ui界面包括多个ui组件；散图和效果图确定模块，用于确定针对多个ui组件制作的多个界面散图和针对目标ui界面制作的界面效果图，其中，每一界面散图用于呈现一ui组件，界面效果图用于指示生成后的目标ui界面的目标呈现效果；初始界面生成模块，用于拼接多个界面散图以生成一初始目标ui界面；效果调整模块，用于在渲染环境中比对界面效果图和初始目标ui界面，并对初始目标ui界面的呈现效果参数进行调整，以使初始目标ui界面在渲染环境中所呈现的效果与界面效果图所指示的目标呈现效果相匹配。

15、第三方面，本技术实施例还提供一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的计算机可执行指令，处理器执行计算机可执行指令以实现上述第一方面所述的方法。

16、第四方面，本技术实施例还提供一种计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，计算机可执行指令在被处理器调用和执行时，计算机可执行指令促使处理器实现上述第一方面所述的方法。

17、本技术实施例提供的ui界面的处理方法、装置及电子设备中，首先确定待生成的包括多个ui组件的目标ui界面；然后确定针对多个ui组件制作的多个界面散图和针对目标ui界面制作的界面效果图，其中，每一界面散图用于呈现一ui组件，界面效果图用于指示生成后的目标ui界面的目标呈现效果；拼接多个界面散图以生成一初始目标ui界面；最后在渲染环境中比对界面效果图和初始目标ui界面，并对初始目标ui界面的呈现效果参数进行调整，以使得到的目标ui界面在渲染环境中所呈现的效果与界面效果图所指示的目标呈现效果相匹配。该方案中，通过在渲染环境中对比初始目标ui界面和界面效果图，能够自动进行初始目标ui界面中的呈现效果参数调整，以使得到的目标ui界面在渲染环境中所呈现的效果与界面效果图所指示的目标呈现效果相匹配，以降低目标ui界面与界面效果图的差异，提高ui界面制作效率。