一种UI图形生成方法、系统、装置及计算机存储介质与流程

一种ui图形生成方法、系统、装置及计算机存储介质
技术领域
1.本技术涉及数据处理领域，尤其涉及一种ui图形生成方法、系统、装置及计算机存储介质。


背景技术：

2.随着编程技术的不断发展，用户界面(user interface，ui)在编程过程中得到了广泛的应用，ui图形的设计也越来越重要。
3.在编程过程中，常常会需要用到各种各样的ui图形，比如：用于与用户进行交互的按键图标。现有技术提供的方案中，为了能够方便使用，往往将各种各样的图标集成在一张图片中，当需要使用其中的某一个图标时，使用图像裁剪工具对所需要的使用的图标进行裁剪，裁剪后用户可能还需要对图标进行反复调整，过程较为繁琐，因此这种方法处理效率非常低。


技术实现要素：

4.为了解决上述技术问题，本技术提供了一种ui图形生成方法、系统、装置及计算机存储介质，用于提高ui图形生成效率。
5.本技术第一方面提供了一种ui图形生成方法，所述方法包括：
6.获取ui素材图形，所述ui素材图形中包含有至少一个ui图形；
7.获取用户的操作指示，所述操作指示为用户从所述ui素材图形中选择目标ui素材的指示；
8.根据所述操作指示从所述ui素材图形中确定局部素材图形；
9.根据预设的分割规则对所述局部素材图形进行分割，以得到若干张子图形；
10.从所述若干张子图形中确定目标子图形；
11.对所述目标子图形进行调整得到所述目标ui图形。
12.可选的，所述ui素材图形被均匀划分为若干个区域，所述若干个区域中的任意一个区域均配置有定位坐标，所述定位坐标用于表示所述ui图形在所述ui素材图形中的位置；所述根据所述操作指示从所述ui素材图形中确定局部素材图形包括：
13.根据所述操作指示确定定位坐标，
14.根据所述定位坐标确定局部素材图形。
15.可选的，当所述分割规则为网格分割时，在所述根据预设的分割规则对所述局部素材图形进行分割，以得到若干张子图形之前，所述方法还包括：
16.确定所述网格分割的网格规格，所述网格规格包括网格数量、网格宽度以及网格长度。
17.可选的，当所述网格数量达到九时，所述根据预设的分割规则对所述局部素材图形进行分割，以得到若干张子图形包括：
18.以均分宫格的方式对所述局部素材图形进行分割，得到数量与所述网格数量一致
的子图形；
19.所述从所述若干张子图形中确定目标子图形包括：
20.将所述若干张子图形中除分别位于所述局部素材图形的四个角的四张子图形外的五张子图形确定为目标子图形。
21.可选的，所述从所述若干张子图形中确定目标子图形包括：
22.将所述若干张子图形中非空白的子图形确定为目标子图形。
23.可选的，所述从所述若干张子图形中确定目标子图形包括：
24.将所述若干张子图形中位于最中间区域的子图形确定为目标子图形。
25.可选的，所述分割规则为边缘分割方式，所述根据预设的分割规则对所述局部素材图形进行分割，以得到若干张子图形包括：
26.确定所述局部素材图形中确定所述ui图形的图形边缘；
27.沿着所述图形边缘对所述局部素材图形进行分割，得到两张子图形；
28.所述从所述若干张子图形中确定目标子图形包括：
29.将所述两张子图形中位于所述图形边缘内部的子图形确定为目标子图形。
30.可选的，所述调整至少包括按比例放缩、旋转以及镜像中的一种。
31.本技术第二方面提供了一种ui图形生成系统，所述系统包括：
32.第一获取单元，用于获取ui素材图形，所述ui素材图形中包含有至少一个ui图形；
33.第二获取单元，用于获取用户的操作指示，所述操作指示为用户从所述ui素材图形中选择目标ui图形的指示；
34.第一确定单元，用于根据所述操作指示从所述ui素材图形中确定局部素材图形；
35.分割单元，用于根据预设的分割规则对所述局部素材图形进行分割，以得到若干张子图形；
36.第二确定单元，用于从所述若干张子图形中确定目标子图形；
37.调整单元，用于对所述目标子图形进行调整得到所述目标ui图形。
38.本技术第三方面提供了一种ui图形生成装置，所述装置包括：
39.处理器、存储器、输入输出单元以及总线；
40.所述处理器与所述存储器、所述输入输出单元以及所述总线相连；
41.所述存储器保存有程序，所述处理器调用所述程序以执行第一方面以及第一方面中任一项可选的所述方法。
42.本技术第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质上保存有程序，所述程序在计算机上执行时执行第一方面以及第一方面中任一项可选的所述方法。
43.从以上技术方案可以看出，本技术具有以下优点：
44.本技术提供的ui图形生成方法中，用户可以在ui素材图形中选择一个所需要使用的目标ui图形，终端自动确定局部素材图形并通过预设分割规则对该局部素材图形进行分割得到若干张子图形，然后确定目标子图形，对目标子图形进行一定的调整进而得到目标ui图形。本技术提供的方法中，终端自动对局部素材图形进行分割以及调整，使得用户可以通过操作指示来直接获得所需要的目标ui图形，生成ui图形的效率更高，用户无需再使用裁剪工具来处理，极大程度的提高了ui图形制作效率。
附图说明
45.为了更清楚地说明本技术中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
46.图1为本技术提供的ui图形生成方法一个实施例流程示意图；
47.图2为本技术提供的ui图形生成方法另一个实施例流程示意图；
48.图3为本技术提供的ui图形生成方法另一个实施例流程示意图；
49.图4为本技术提供的ui图形生成系统一个实施例结构示意图；
50.图5为本技术提供的ui图形生成装置一个实施例结构示意图。
具体实施方式
51.在编程过程中，常常会需要用到各种各样的ui图形，比如：用于与用户进行交互的按键图标。现有技术提供的方案中，为了能够方便使用，往往将各种各样的图标集成在一张图片中，当需要使用其中的某一个图标时，使用图像裁剪工具对所需要的使用的图标进行裁剪，裁剪后用户可能还需要对图标进行反复调整，过程较为繁琐，因此这种方法处理效率非常低。
52.基于此，本技术提供了一种ui图形生成方法，用于提高ui图形生成效率。
53.需要说明的是，本技术提供的ui图形生成方法，可以应用于终端也可以应用于系统，还可以应用于服务器上，例如终端可以是智能手机或电脑、平板电脑、智能电视、智能手表、便携计算机终端也可以是台式计算机等固定终端。为方便阐述，本技术中以终端为执行主体进行举例说明。
54.请参阅图1，图1为本技术提供的ui图形生成方法一个实施例流程示意图，该ui图形生成方法包括：
55.101、获取ui素材图形，ui素材图形中包含有至少一个ui图形；
56.在实际应用中，为了方便使用，往往会将多个ui图形集成在一张ui素材图形中，这张ui素材图形一般是像素图形，例如jpg格式的，因此，在实际使用时，需要对其中的ui图形进行提取。
57.102、获取用户的操作指示，操作指示为用户从ui素材图形中选择目标ui素材的指示；
58.用户可以通过操作指示，例如通过对其中的某个ui素材进行点击，以选择所需要使用的ui素材。
59.103、根据操作指示从ui素材图形中确定局部素材图形；
60.终端根据用户的操作指示在该ui素材图形中确定局部素材图形，在实际应用中，多个ui素材被排布在该ui素材图形中，ui素材图形被划分为多个均匀的区域，每一个ui图形都被放置于该区域中，在需要使用时，确定用户所点击的位置位于哪一个区域中，终端即确定该ui素材所在的区域，即确定该局部素材图形，进而对该局部素材图形进行进一步处理。
61.在另一种可能的实现方式中，ui素材图形中的每一个区域还可以配置有定位坐标，该定位坐标用于表示该区域在该ui素材图形中的位置，终端还可以根据操作指示来确
定定位坐标，即该操作指示为用户向终端输入定位坐标的指示，进而终端根据定位坐标来确定该局部素材图形，通过该方法可以对该ui素材图形进行参数化，终端可以直接通过坐标参数来选择其中的局部素材图形。
62.104、根据预设的分割规则对局部素材图形进行分割，以得到若干张子图形；
63.局部素材图形中包含有所需要使用的ui图形，并且，每一个区域中往往还会有一些空白区域，因此终端需要对这些空白的区域进行去除，因此，终端通过预设分割规则将该局部素材图形进行分割得到若干张子图形，将空白区域的子图形去除并保留包含ui内容的子图形。预设分割规则可以是通过网格分割也可以是通过边缘分割，具体请参阅图2以及图3对应的实施例。
64.105、从若干张子图形中确定目标子图形；
65.终端从若干张子图形中确定目标子图形，目标子图形即指包含有ui图形内容的子图形，使得最终得到较为完整的ui图形。
66.106、对目标子图形进行调整得到目标ui图形。
67.终端在确定目标子图形后，对该目标子图形进行一定的调整，该调整包括但不限于按比例放缩、旋转以及镜像，当目标子图形中包含有多个子图形时，还可以对不同的子图形进行不同的或者不同程度的调整。
68.本技术提供的ui图形生成方法中，用户可以在ui素材图形中选择一个所需要使用的目标ui图形，终端自动确定局部素材图形并通过预设分割规则对该局部素材图形进行分割得到若干张子图形，然后确定目标子图形，对目标子图形进行一定的调整进而得到目标ui图形。本技术提供的方法中，终端自动对局部素材图形进行分割以及调整，使得用户可以通过操作指示来直接获得所需要的目标ui图形，生成ui图形的效率更高，用户无需再使用裁剪工具来处理，极大程度的提高了ui图形制作效率。
69.在实际应用中，终端需要对局部素材图形进行分割，具体的，分割方式有两种，一种是通过网格分割的方式进行分割，另一种是通过边缘分割的方式进行分割，下面将结合附图进行详细说明。
70.1、网格分割
71.请参阅图2，图2为本技术中提供的ui图形生成方法的一个实施例流程示意图，该ui图形生成方法包括：
72.201、获取ui素材图形，ui素材图形中包含有至少一个ui图形；
73.202、获取用户的操作指示，操作指示为用户从ui素材图形中选择目标ui素材的指示；
74.203、根据操作指示从ui素材图形中确定局部素材图形；
75.本技术中步骤201至步骤203与前述实施例中步骤101至步骤103类似，此处不再赘述。
76.204、确定网格分割的网格规格，网格规格包括网格数量、网格宽度以及网格长度；
77.在实际应用中，当ui素材图形中包含的各个ui图形大小较均匀，排列整齐时，可以使用网格分割的方式进行分割，在使用网格分割时，需要确定网格的规格，网格规格包括网格数量、网格宽度以及网格长度，当所使用的网格数量越多时，意味着所切割得到的子图片越多，所得到的ui图形更精细。
78.205、以均分宫格的方式对局部素材图形进行分割，得到数量与网格数量一致的子图形；
79.在对局部素材图形进行分割时，使用均分宫格的方式来进行分割，均分宫格指按照一定数量相同大小的宫格，例如9宫格、16宫格等，得到一定数量的子图形。
80.206、从若干张子图形中确定目标子图形；
81.在得到一定数量子图形后，需要从其中确定目标子图形，具体的，当网格数量达到九时，可以去除分别位于该局部素材图形四个角的子图形，保留中间的图形，将中间的子图形确定为目标子图形。
82.在另一种可能的实现方式中，还可以是终端识别各个子图形，去除空白的子图形，空白的子图形即不包含有该ui图形像素的子图形，将剩余的非空白的子图形确定为目标子图形，在处理一些像素区别明显的ui图形时，通过该方式可以很好的去除图形中的空白区域。
83.在另一种可能的实现方式中，还可以是终端将位于最终见区域的子图形确定为目标子图形，当ui图形较小时，利用奇数的网格数量的方式进行分割，可以将该ui图形保留在最中间的子图形中，因此，终端将位于最中间的子图形确定为目标子图形。
84.207、对目标子图形进行调整得到目标ui图形。
85.终端对目标子图形进行一定的调整，该调整包括但不限于按比例放缩、旋转以及镜像，当目标子图形中包含有多个子图形时，还可以对不同的子图形进行不同的或者不同程度的调整。
86.上述实施例对网格分割的方式进行了阐述，下面将结合附图对本技术中的边缘分割的方式进行阐述。
87.2、边缘分割
88.请参阅图3，图3为本技术中提供的ui图形生成方法一个实施例流程示意图，该ui图形生成方法包括：
89.301、获取ui素材图形，ui素材图形中包含有至少一个ui图形；
90.302、获取用户的操作指示，操作指示为用户从ui素材图形中选择目标ui素材的指示；
91.303、根据操作指示从ui素材图形中确定局部素材图形；
92.本技术中步骤301至步骤303与前述实施例中步骤101至步骤103类似，此处不再赘述。
93.304、确定局部素材图形中确定ui图形的图形边缘；
94.在实际应用中，当局部素材图形中ui图形的边缘较为明显时，可以使用边缘切割的方式进行切割，终端首先确定所需要分割的ui图形的边缘，即将该ui图形的边缘勾勒出分割路径，进而可以根据该分割路径进行分割。本技术提供的方法可以很好的提取一些边缘明显的ui图形。
95.305、沿着图形边缘对局部素材图形进行分割，得到两张子图形；
96.终端沿着该ui图形的边缘对该局部素材图形进行分割，得到两张子图形，一张为位于边缘内部的ui图形，一张为位于外部的空白图形。
97.306、将两张子图形中位于图形边缘内部的子图形确定为目标子图形；
98.终端将位于边缘内部的子图形确定为目标子图形。
99.307、对目标子图形进行调整得到目标ui图形。
100.终端对目标子图形进行一定的调整，该调整包括但不限于按比例放缩、旋转以及镜像，当目标子图形中包含有多个子图形时，还可以对不同的子图形进行不同的或者不同程度的调整。
101.上述实施例对本技术中ui图形生成方法进行了阐述，下面将结合附图对本技术中的ui图形生成系统、装置及计算机存储介质进行阐述。
102.请参阅图4，图4为本技术中提供的ui图形生成系统的一个实施例结构示意图，该ui图形生成系统包括：
103.第一获取单元401，用于获取ui素材图形，ui素材图形中包含有至少一个ui图形；
104.第二获取单元402，用于获取用户的操作指示，操作指示为用户从ui素材图形中选择目标ui图形的指示；
105.第一确定单元403，用于根据操作指示从ui素材图形中确定局部素材图形；
106.分割单元404，用于根据预设的分割规则对局部素材图形进行分割，以得到若干张子图形；
107.第二确定单元405，用于从若干张子图形中确定目标子图形；
108.调整单元406，用于对目标子图形进行调整得到目标ui图形。
109.可选的，第一确定单元403具体用于：
110.根据操作指示确定定位坐标，
111.根据定位坐标确定局部素材图形。
112.可选的，该ui图形生成系统还包括：第三确定单元407，该第三确定单元407具体用于：
113.确定网格分割的网格规格，网格规格包括网格数量、网格宽度以及网格长度。
114.可选的，分割单元404具体用于：
115.以均分宫格的方式对局部素材图形进行分割，得到数量与网格数量一致的子图形；
116.第二确定单元405具体用于：
117.将若干张子图形中除分别位于局部素材图形的四个角的四张子图形外的五张子图形确定为目标子图形。
118.可选的，第二确定单元405具体用于：
119.将若干张子图形中非空白的子图形确定为目标子图形。
120.可选的，第二确定单元405具体用于：
121.将若干张子图形中位于最中间区域的子图形确定为目标子图形。
122.可选的，分割单元404具体用于：
123.确定局部素材图形中确定ui图形的图形边缘；
124.沿着图形边缘对局部素材图形进行分割，得到两张子图形；
125.第二确定单元405具体用于：
126.将两张子图形中位于图形边缘内部的子图形确定为目标子图形。
127.可选的，所述调整至少包括按比例放缩、旋转以及镜像中的一种。
128.本技术还提供了一种ui图形生成装置，包括：
129.处理器501、存储器502、输入输出单元503、总线504；
130.处理器501与存储器502、输入输出单元503以及总线504相连；
131.存储器502保存有程序，处理器501调用程序以执行如上任一ui图形生成方法。
132.本技术还涉及一种计算机可读存储介质，计算机可读存储介质上保存有程序，其特征在于，当程序在计算机上运行时，使得计算机执行如上任一ui图形生成方法。
133.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
134.在本技术所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
135.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
136.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
137.所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。