CN111309300A - 代码生成方法、装置、计算机系统及可读存储介质 - Google Patents
代码生成方法、装置、计算机系统及可读存储介质 Download PDFInfo
- Publication number
- CN111309300A CN111309300A CN202010050415.5A CN202010050415A CN111309300A CN 111309300 A CN111309300 A CN 111309300A CN 202010050415 A CN202010050415 A CN 202010050415A CN 111309300 A CN111309300 A CN 111309300A
- Authority
- CN
- China
- Prior art keywords
- code
- image
- entrance
- functional area
- inlet
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 43
- 230000006870 function Effects 0.000 claims description 47
- 238000004590 computer program Methods 0.000 claims description 12
- 230000000694 effects Effects 0.000 abstract description 8
- 238000012827 research and development Methods 0.000 abstract description 2
- 238000013461 design Methods 0.000 description 6
- 238000004422 calculation algorithm Methods 0.000 description 4
- 238000011161 development Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/447—Target code generation
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了代码生成方法、装置、计算机系统及可读存储介质，应用于研发管理领域，包括以下步骤：接收终端发送的样本图片，识别样本图片中的功能区和背景色值，并获得包括功能区的位置及其功能相对高度的功能区信息；识别功能区中入口图像的轮廓以获得包括入口图像的数量及其位置的入口属性信息；根据入口图像的轮廓从样本图片中裁切并获取入口图像及其入口尺寸信息；根据背景色值和功能区信息生成基础代码，根据入口属性信息划分基础代码中的功能区并生成布局代码，根据入口尺寸信息将入口图像插入布局代码以生成样本代码，将样本代码发送至终端。本发明实现了自动采集图片信息并自动生成代码的效果，消除了当前自动生成UI代码方案的局限性。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种代码生成方法、装置、计算机系统及可读存储介质。
背景技术
自动化生成用户操作界面代码，是一种提高系统及程序开发的效率，缩短开发的时间，减少系统开发中用户操作界面代码的重复投入工作量的方法，当前业内的自动化生成UI代码的方案，通常是从sketch或photoshop等界面设计软件的设计文件中读取设计内容并将其转化成UI代码，或从设计软件生成的html或者xml文件的中读取到特定的标签并将其转化成UI代码；
由于当前业内所采用的方案需要获取到设计文件或特定标签，才可自动生成特定的UI代码，而一旦用户接收到的文件无法获得其设计文件或特定标签(如，图片，截图或照片)时，上述方案将无法根据该文件自动生成UI代码，给自动生成UI代码操作带来了极大的局限性。
发明内容
本发明的目的是提供一种代码生成方法、装置、计算机系统及可读存储介质，用于解决现有技术存在的对于无法获得其设计文件或特定标签的文件，无法自动生成UI代码的问题。
为实现上述目的，本发明提供一种代码生成方法，包括以下步骤：
接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度是指功能区相比于样本图片的高度；
识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；
根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；
根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。
上述方案中，所述识别所述样本图片中的功能区并获得包括所述功能区的位置及其功能相对高度的功能区信息包括：
识别所述样本图片中的入口像素和背景像素，提取所述背景像素的色值并将其设为背景色值；其中，所述入口像素是构成入口图像的像素点，背景像素是构成样本图片的背景的像素点；
根据所述入口像素和背景像素识别所述样本图片中的功能区；所述功能区是指样本图片中包括入口图像的区域；
获取所述功能区的功能相对高度和位置并将其设为功能区信息。
上述方案中，所述识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息包括：
识别所述功能区内首位像素和末位像素，并根据所述首位像素和末位像素获得连续入口像素集；其中，所述连续入口像素集是指连续出现且未被背景像素在功能区的行方向或列方向中断的入口像素集合；
获取所述连续入口像素集的轮廓像素，并根据所述轮廓像素识别所述入口图像的轮廓；其中，所述轮廓像素是指位于连续入口像素集边界的像素点；
根据所述入口图像的轮廓获得所述入口图像的中心点，提取所述中心点的坐标并将其设为入口图像的位置，计算所述功能区中中心点的数量并将该数量设为入口图像的数量，汇总所述入口图像的数量及其位置以获得入口属性信息。
上述方案中，所述根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息包括：
通过裁切模块根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像；
将所述功能区的功能相对高度设为所述入口图像的入口尺寸信息。
上述方案中，所述根据所述背景色值和功能区信息生成基础代码包括：
通过代码生成模块新建背景代码并对所述背景代码赋以背景色值；
通过代码生成模块根据所述功能区信息在所述背景代码中插入功能区以生成基础代码。
上述方案中，所述根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码包括：
提取所述入口属性信息中入口图像的数量，根据该数量划分所述基础代码中的功能区使其形成至少一个子区域；
获取所述子区域的中间点，根据所述入口属性信息中各入口图像的位置，调节子区域的尺寸使所述中间点与入口图像的位置一致并生成布局代码。
上述方案中，所述根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码包括：
提取所述入口尺寸信息以调整所述入口图像的尺寸；
将调整后的入口图像插入所述子区域以生成样本代码。
为实现上述目的，本发明还提供一种代码生成装置，包括：
第一识别模块，用于接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度为功能区的高度相比于样本图像的整体高度的比值；
第二识别模块，用于识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；
图像裁切模块，用于根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；
代码生成模块，用于根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。
为实现上述目的，本发明还提供一种计算机系统，其包括多个计算机设备，各计算机设备包括存储器.处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述多个计算机设备的处理器执行所述计算机程序时共同实现上述代码生成方法的步骤。
为实现上述目的，本发明还提供一种计算机可读存储介质，其包括多个存储介质，各存储介质上存储有计算机程序，所述多个存储介质存储的所述计算机程序被处理器执行时共同实现上述代码生成方法的步骤。
本发明提供的代码生成方法、装置、计算机系统及可读存储介质，通过实现自动采集图片信息，并根据采集的信息自动生成用于描述页面信息的代码的技术效果，不仅消除了当前业界自动生成UI代码方案的局限性，提高了页面代码的获取效率，还保证了页面代码相比于原图片的还原度，因此，无论接收到的图片是否包括设计信息或特定标签，本申请均可通过该图片自动生成用于描述该图片的UI代码，极大的扩展了自动生成UI代码的适用范围，为页面开发人员的工作提供了极大的便利。
附图说明
图1示意性示出了根据本申请实施例一的代码生成方法的环境应用示意图。
图2为本发明代码生成方法实施例一的流程图；
图3为本发明代码生成方法实施例一S1中识别样本图片获得功能区信息的流程图；
图4为本发明代码生成方法实施例一S2中识别功能区获得入口属性信息的具体流程图；
图5为本发明代码生成方法实施例一中S3中从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息的具体流程图；
图6为本发明代码生成方法实施例一S4中生成基础代码的具体流程图；
图7为本发明代码生成方法实施例一S4中生成布局代码的具体流程图；
图8为本发明代码生成方法实施例一S4中生成样本代码的具体流程图；
图9为本发明代码生成装置实施例二的程序模块示意图；
图10为本发明计算机系统实施例三中计算机设备的硬件结构示意图。
附图标记：
1、代码生成装置 2、区块链数据库 3、证明用户端 4、客户端5、计算机设备 11、第一识别模块 12、第二识别模块 13、图像裁切模块 14、代码生成模块 51、存储器 52、处理器
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明提供的代码生成方法、装置、计算机系统及可读存储介质，适用于计算机领域，为提供一种基于第一识别模块、第二识别模块、图像裁切模块和代码生成模块的代码生成方法。本发明识别所述样本图片中的功能区和背景色值获得功能区信息，识别所述功能区中入口图像的轮廓并将其裁切下来后储存所述入口图像及其入口尺寸信息，以及识别并获得入口属性信息，实现自动采集图片信息的技术效果；通过背景色值和功能区信息生成的基础代码，通过根据所述入口属性信息划分所述基础代码中的功能区所生成的布局代码，通过根据所述入口尺寸信息将所述入口图像插入所述布局代码所生成的样本代码，并将其发送至终端。
首先对本申请中所涉及的概念进行解释：
样本图片，是指本申请所提供的代码生成方法所接收到的图片，该图片可为jpg格式，gif格式，JPEG格式等。
入口图像，是指样本图片中包括专门的用途、功能或意义的标识。
代码，是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。
图1示意性示出了根据本申请实施例一的代码生成方法的环境应用示意图。
在示例性的实施例中，算法自动测试方法运行在服务器2中，服务器2通过网络3与多个终端4连接，接收终端4发送的样本图片，识别所述样本图片中的功能区和背景色值获得功能区信息，识别所述功能区中入口图像的轮廓并将其裁切下来后储存所述入口图像及其入口尺寸信息，以及识别并获得入口属性信息，实现自动采集图片信息的技术效果；通过背景色值和功能区信息生成的基础代码，通过根据所述入口属性信息划分所述基础代码中的功能区所生成的布局代码，通过根据所述入口尺寸信息将所述入口图像插入所述布局代码所生成的样本代码，并将其发送至终端4。
服务器2可以通过一个或多个网络3提供服务，网络3可以包括各种网络设备，例如路由器，交换机，多路复用器，集线器，调制解调器，网桥，中继器，防火墙，代理设备和/或等等。网络3可以包括物理链路，例如同轴电缆链路，双绞线电缆链路，光纤链路，它们的组合和/或类似物。网络3可以包括无线链路，例如蜂窝链路，卫星链路，Wi-Fi链路和/或类似物。终端4可以包括各种终端设备，例如，手机、数据库服务器、台式计算机、笔记本计算机、网络数据库和/或等等。
服务器2可以由单个或多个计算机设备(如，服务器)组成。该单个或多个计算设备可以包括虚拟化计算实例。虚拟化计算实例可以包括虚拟机，诸如计算机系统的仿真，操作系统，服务器等。计算设备可以基于定义用于仿真的特定软件(例如，操作系统，专用应用程序，服务器)的虚拟映像和/或其他数据来加载虚拟机。随着对不同类型的处理服务的需求改变，可以在一个或多个计算设备上加载和/或终止不同的虚拟机。可以实现管理程序以管理同一计算设备上的不同虚拟机的使用。
实施例一
请参阅图2，一种代码生成方法，包括：
S1：接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度为功能区的高度相比于样本图像的整体高度的比值；
S2：识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；
S3：根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；
S4：根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。
其中，所述基础代码是用于表达样本图片中背景颜色和功能区位置的计算机代码，所述布局代码是指基于基础代码还用于表达样本图片中功能区的划分的计算机代码，样本代码是指基于布局代码还用于表达所述功能区中入口图像的位置即尺寸的计算机代码。
本实施例提供的代码生成方法通过接收终端发送的样本图片并识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，例如，获得的背景色值可为背景像素的颜色值，也可为背景颜色的灰度值，用户可根据需要自行设定；获得的功能区的位置可为功能区在样本图像中的行数区间，也可为功能区在样本图片中的坐标范围，获得的功能区的功能相对高度为功能区的高度相比于样本图像的整体高度的比值，用户可根据需要自行设定；通过识别所述功能区中入口图像的轮廓并将其从样本图片切下来获得入口图像后储存；获得包括所述入口图像的数量及其位置的入口属性信息；通过获取所述入口图像及其入口尺寸信息，例如，可将所述入口尺寸信息设为描述所述入口图像的高度相对于样本图像的高度的尺寸比；因此，基于上述步骤并根据所述背景色值和功能区信息所生成的基础代码，其背景色值与原样本图像中的背景颜色一致，且所述基础代码中的功能区与样本图像中包括入口图像的位置一致，高度还原了对样本图像的背景及其功能区；基于上述步骤并根据所述入口属性信息划分所述基础代码中的功能区所生成的布局代码，实现了对功能区的准确划分，为入口图像能够更加快速精准的插入功能区中提供了前提条件；由于布局代码所描述的页面高度与样本图像的高度不一定是一致的，因此基于上述步骤并根据所述入口尺寸信息将所述入口图像插入所述布局代码所生成的样本代码并将其发送至所述终端，不仅实现了入口图像精准快速插入布局代码中，并且因根据入口尺寸信息和布局代码所描述的页面信息，如页面高度，对入口图像进行调节并将其插入布局代码以生成样本代码，使得样本代码所描述的页面与样本图像包括高度一致性。
综上，本申请实现了自动从图片中采集信息，根据该信息自动生成用于描述页面信息的代码的技术效果，不仅消除了当前业界自动生成UI代码方案的局限性，提高了页面代码的获取效率，还保证了页面代码相比于原图片的还原度，因此，无论接收到的图片是否包括设计信息或特定标签，本申请均可通过该图片自动生成用于描述该图片的UI代码，极大的扩展了自动生成UI代码的适用范围，为页面开发人员的工作提供了极大的便利。
本实施例提供的代码生成方法可以由客户端计算机设备(比如，智能手机，个人计算机等)执行，也可以由服务端计算机设备(如服务器)执行；本申请不做限定。
需要说明的是，所述基础代码、布局代码和样本代码，可为基于Android系统的layout xml布局文件代码和Java组件代码的文件所制成的UI代码，也可为基于iOS系统的xil布局文件代码和Object-C组件代码文件所制成的UI代码，或为基于H5系统的css布局文件和Html标签代码文件所制成的UI代码；UI代码是指用于控制显示界面的元素和人际交互逻辑的代码，所述UI即User Interface，是指人机交互界面，通常是指手机、App、Web页面的界面。
在一个优选的实施例中，请参阅图3，所述S1中的识别所述样本图片中的功能区并获得包括所述功能区的位置及其功能相对高度的功能区信息包括：
S101：识别所述样本图片中的入口像素和背景像素，提取所述背景像素的色值并将其设为背景色值；其中，所述入口像素是构成入口图像的像素点，背景像素是构成样本图片的背景的像素点。
示例性地，获取所述样本图片中所有像素及其色值，将样本图片的中出现频率最高的色值或样本图片的周边像素中出现频率最高的色值设为背景色值；逐行识别所述样本图片中各像素的色值，其中，对于每一行的像素采用从左到右的方向逐个识别。可选的，也可采用采用从左到右的方向逐个识别每一行的像素。
若识别到像素的色值为所述背景色值，则将该像素判定为背景像素；若识别到像素的色值不为所述背景色值，则将该像素判定为入口像素。
需要说明的是，所述色值是指像素的颜色值，其通常是指像素的RGB分量，其中，RGB色彩模式是工业界的一种颜色标准，是一种通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各种颜色的技术方法。对于背景像素可为某一颜色值，也可为某一颜色值区间，以消除本申请所述的代码生成方法在对包括渐变色背景的样本图片进行识别时，出现识别错误或精度较差的情况。
S102：根据所述入口像素和背景像素识别所述样本图片中的功能区；所述功能区是指样本图片中包括入口图像的区域。
示例性地，通过所述识别模块从样本图片的首行像素开始逐行识别样本图片的像素；所述识别模块将首次出现入口像素的行记录为功能首行，根据所述功能首行持续逐行识别所述样本图片的像素直至其所在行不包括入口像素，所述识别模块将该所在行的上一行，即最后出现入口像素的行记录为功能尾行，通过所述识别模块将所述功能首行和功能尾行之间的区域设为功能区；根据所述功能区初始化所述识别模块，利用所述识别模块从所述功能区的功能尾行的次行开始逐行识别样本图片中的像素并执行上述步骤，直至识别至所述样本图片的尾行时停止识别。
按照上述方法识别出所述样本图片中的所有功能区。
需要说明的是，识别模块是通过计算机语言所编写的一种用于识别图片中的像素及其位置和色值的计算机程序，因识别模块的功能及原理属于本领域技术人员的公知常识，而本申请所要解决的技术问题是如何根据识别到的像素的色值，判断入口像素和背景像素，以及根据入口像素和背景像素判断样本图片中的功能区；因此，关于识别模块的编写及运行原理，本申请不做赘述。
S103：获取所述功能区的功能相对高度和位置并将其设为功能区信息。
示例性地，通过高度模块获得所述样本图片中所有像素的行数并将其设为总行数，通过高度模块获得所述功能区中所有像素的行数并将其设为功能行数，将所述功能行数与总行数相除获得用于表达功能区相比于样本图片高度的功能相对高度；通过高度模块获得样本图片中首行像素与所述功能区的首行像素之间像素的行数，并将其设为上功能行数；将所述上功能行数与所述样本图片的总行数相除，获得用于表达功能区首行距样本图片首行的高度相比于样本图片高度的距首行相对高度；通过高度模块获得样本图片中尾行像素与所述功能区的尾行像素之间像素的行数，并将其设为下功能行数；将所述下功能行数与与所述样本图片的总行数相除，获得用于表达功能区尾行距样本图片尾行的高度相比于样本图片高度的距尾行相对高度；将距首行相对高度和距尾行相对高度设为所述功能区的位置。
例如，设每一像素点在行方向和列方向分别占优一个单位的空间，如(1,1)，且功能区的范围为坐标点(20,0)至坐标点(50，100)之间所圈定的矩形区域，样本图片的范围为坐标点(0,0)至坐标点(100,100)之间所圈定的矩形区域，则功能区的行为20—50行，每一行中的像素分别为0—100；因此，根据上述步骤将获得总行数为100，功能行数为50-20＝30，上功能行数为100-50＝50，下功能行数为30-0＝30；将功能行数与总行数相除获得功能相对高度，即：3/10；将上功能行数与总行数相除获得距首行相对高度，即：1/2；将下功能行数与总行数相除获得距尾行相对高度，即：3/10。
需要说明的是，高度模块是基于计算机语言所设计的一种用于计算样本图片中像素的行数的计算机程序，本申请所解决的技术问题是如何获得功能区的位置和功能相对高度，而非如何编写计算像素行数的高度模块，又由于该模块对于本领域技术人员来说属于公知常识，因此，在本申请中不做赘述。
在一个优选的实施例中，请参阅图4，所述S2中的识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息包括：
S201：识别所述功能区内首位像素和末位像素，并根据所述首位像素和末位像素获得连续入口像素集；其中，所述连续入口像素集是指连续出现且未被背景像素在功能区的行方向或列方向中断的入口像素集合。
本步骤中的所述连续出现是指，任一入口像素在功能区的行方向或列方向上均包括与其相邻的入口像素。
在示例性的实施例中，逐行识别所述功能区内各行像素的色值，以获得所述各行的首位像素和末位像素；其中，所述首位像素为所述入口图像处于该行首位的入口像素，所述末位像素为所述入口图像处于该行末位的入口像素。从所述功能区内行的首位开始依次判定该行中各像素分别为入口像素或背景像素，直至所述行的末位结束，其中，所述行的首位为该行中最左侧的像素点；示例性地，通过识别所述行中像素的色值，并判断该色值是否为背景色值，若是，则判定该像素为背景像素，若否则判定该像素为入口像素。依次提取所述功能区内行中相邻的两个像素，若在所述相邻的两个像素中，位于前一位的像素为背景像素，位于后一位的像素为入口像素，则将所述位于后一位的像素设为首位像素；若在所述相邻的两个像素中，位于前一位的像素为入口像素，位于后一位的像素为背景像素，则将所述位于前一位的像素设为末位像素。
进一步地，将功能区内位于同一行的首位像素与紧随其后的末位像素设为相互匹配的首位像素和末位像素；将相互匹配的首位像素和末位像素之间的入口像素设为连续入口像素队列，并通过编号对其进行标注，例如，第一队列，第二队列等等。按照编号汇总所述功能区内各行的连续入口像素队列，以形成所述连续入口像素集。例如，汇总功能区第1行、第2行……第n行标注有第一队列的连续入口像素队列，以获得所述连续入口像素集。
S202：获取所述连续入口像素集的轮廓像素，并根据所述轮廓像素识别所述入口图像的轮廓；其中，所述轮廓像素是指位于连续入口像素集边界的像素点。
在示例性的实施例中，提取所述连续入口像素集中位于边界的入口像素，并将该入口像素设为轮廓像素；依次识别所述轮廓像素的坐标并对其进行连线以获得入口图像的轮廓。
S203：根据所述入口图像的轮廓获得所述入口图像的中心点，提取所述中心点的坐标并将其设为入口图像的位置，计算所述功能区中中心点的数量并将该数量设为入口图像的数量，汇总所述入口图像的数量及其位置以获得入口属性信息。
示例性地，通过计算几何算法计算所述入口图像的轮廓，以在所述轮廓内识别其几何中心，将该几何中心所对应的像素点设为中心点，将该中心点的坐标设为入口图像的位置；当功能区中所有的入口图像的轮廓及其中心点均识别完成时，计算该功能区中中心点的数量，并将该数量设为入口图像的数量；汇总所述功能区中入口图像的数量及其位置以获得入口属性信息。
于本实施例中，所述中心点的坐标是指中心点在功能区中的相对位置，所述中心点的横坐标为该中心点距所述功能区的首列的距离与所述功能区的总列数的比值，所述中心点的纵坐标为该中心点距所述功能区的首行的距离与所述功能区的总行数的比值。
例如，设每一像素点在行方向和列方向分别占优一个单位的空间，如(1,1)，且功能区的范围为坐标点(20,0)至坐标点(50，100)之间所圈定的矩形区域，则功能区的行为20—50行，每一行中的像素分别为0—100；
若所述中心点的在样本图像中实际坐标为(35,20),那么，所述中心点的横坐标为(20-0)/100＝1/5，(50-35)/(50-20)＝1/2；因此，所述中心点的坐标，即所述入口图像的位置为(1/5，1/2)。
需要说明的是，计算几何算法是通过计算机语言所编写的一种用于对几何图形进行计算的计算机程序，例如，可基于以下函数进行编程以获得用于计算入口图像的轮廓中心的计算几何算法：
其中，x是指入口图像的轮廓上坐标点的横坐标，y是指入口图像的轮廓上坐标点的纵坐标，i是指入口图像的轮廓上坐标的编号，n是指入口图像的轮廓上坐标的数量。
在一个优选的实施例中，请参阅图5，所述S3中根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息包括：
S301：通过裁切模块根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像。
需要说明的是，所述裁切模块为一种用于从样本图像上裁切下入口图像的计算机软件，可为JPEGCrops(图片裁剪软件)，或快速裁剪工具等本领域技术人员的常用技术手段，而本申请所要解决的技术问题是从样本图片中裁切入口图像并将其储存，用于为样本代码提供图像支持，因此关于裁切模块的运行原理，本申请不做赘述。
S302：将所述功能区的功能相对高度设为所述入口图像的入口尺寸信息。
其中，所述入口尺寸信息为用于描述所述入口图像的高度相对于样本图像的高度的尺寸比；由于将功能相对高度设为入口尺寸信息，使得在生成代码时，能够使入口图像与功能区的高度能够相互匹配。
在一个优选的实施例中，请参阅图6，所述S4中根据所述背景色值和功能区信息生成基础代码包括：
S401：通过代码生成模块新建背景代码并对所述背景代码赋以背景色值。
示例性地，通过代码生成模块用于描述页面信息的背景代码，在背景代码赋以背景色值，使所述背景代码所描述的页面信息的颜色为背景色值所表达的颜色。因此，用户可快速根据样本图片的背景颜色，生成包括该背景颜色的的背景代码，为功能区的划分提供了基础，提高了代码生成效率。
S402：通过代码生成模块根据所述功能区信息在所述背景代码中插入功能区以生成基础代码；
示例性地，通过代码生成模块根据所述功能区信息的位置在背景代码中插入功能区，并通过代码生成模块根据功能区信息的功能相对高度调整背景代码中功能区的高度。具体的，获取背景代码的页面高度并将其与功能相对高度相乘以获得调节高度，根据所述调节高度调整背景代码中功能区的高度以获得基础代码；因此，实现了通过在背景代码中布置与样本图片中入口图像位置匹配的功能区的技术效果，为在基础代码中布置入口图像提供了基础，提高了代码生成效率。
在一个优选的实施例中，请参阅图7，所述S4中的根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码包括：
S411：提取所述入口属性信息中入口图像的数量，根据该数量划分所述基础代码中的功能区使其形成至少一个子区域。
示例性地，通过代码生成模块根据所述入口属性信息中的数量，对基础代码中的功能区进行划分。例如，当入口属性信息中的数量为4，则表达在该功能区中包括4个入口图像，因此将功能区平均划分为4个子区域。通过这种方式为插入入口图像提供了便利，提高了入口图像插入功能区的速度和效率。
S412：获取所述子区域的中间点，根据所述入口属性信息中各入口图像的位置，调节子区域的尺寸使所述中间点与入口图像的位置一致并生成布局代码。
示例性地，获取各子区域的中间点，其中所述中间点是指位于子区域中心位置的坐标；提取所述入口属性信息中各入口图像的位置，根据所述入口图像的位置和所述基础代码中的功能区高度获得入口中心横坐标，根据所述入口图像的位置和所述基础代码中的功能区总列数获得入口中心纵坐标，汇总入口横坐标和入口纵坐标获得入口中心坐标；按照这种方式依次获得各入口图像的入口中心坐标。例如，各所述入口图像的位置依次为(1/5，1/2)、(2/5，1/2)、(3/5，1/2)、(4/5，1/2)，基础代码中的功能区高度为60，所述功能区的总列数为200，那么将获得(40,30)、(80,30)、(120,30)、(160,30)。根据各入口图像的所述入口中心坐标调节各子区域，使各子区域的中间点均位于各入口中心坐标上；因此，通过调节子区域的尺寸实现了快速获得能够与入口图像匹配的功能区的技术效果。
在一个优选的实施例中，请参阅图8，所述S4中的根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码包括：
S421：提取所述入口尺寸信息以调整所述入口图像的尺寸。
示例性地，获取背景代码的页面高度并将其与所述入口尺寸信息中所述的尺寸比相乘，获得所述入口图像的调整高度，根据所述调整高度调节所述入口图像的调整宽度，根据所述调整高度和调整宽度调整所述入口图像的尺寸；其中，本申请所述的代码生成方法约束所述入口图像的高宽比，以实现通过调整高度以及高宽比即可获得调整宽度的效果，因此，入口图像在插入不同尺寸的页面时，只需调整入口图像的高度即可根据高宽比调节入口图像的整体尺寸(包括调整高度和调整宽度)，避免了入口图像在调节时出现变形。
S422：将调整后的入口图像插入所述子区域以生成样本代码。
示例性地，提取所述调整后的入口图像的中心点，使并使其与所述子区域中的中间点匹配，将所述入口图像插入所述子区域中，使所述入口图像位于所述子区域正中位置，保证了入口图像的位置准确度。
实施例二
请参阅图9，本实施例的一种代码生成装置1，包括：
第一识别模块11，用于接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度为功能区的高度相比于样本图像的整体高度的比值；
第二识别模块12，用于识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；
图像裁切模块13，用于根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；
代码生成模块14，用于根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。
本技术方案基于研发管理的开发技术，通过识别所述样本图片中的功能区和背景色值获得功能区信息，识别所述功能区获得入口属性信息；根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码生成样本代码，形成用于开发辅助的开发辅助工具。
实施例三：
为实现上述目的，本发明还提供一种计算机系统，该计算机系统包括多个计算机设备5，实施例二的代码生成装置1的组成部分可分散于不同的计算机设备中，计算机设备可以是执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。本实施例的计算机设备至少包括但不限于：可通过系统总线相互通信连接的存储器51、处理器52，如图10所示。需要指出的是，图10仅示出了包括组件-的计算机设备，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
本实施例中，存储器51(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器51可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，存储器51也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器51还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，存储器51通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例一的代码生成装置的程序代码等。此外，存储器51还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器52在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器52通常用于控制计算机设备的总体操作。本实施例中，处理器52用于运行存储器51中存储的程序代码或者处理数据，例如运行代码生成装置，以实现实施例一的代码生成方法。
实施例四：
为实现上述目的，本发明还提供一种计算机可读存储系统，其包括多个存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器52执行时实现相应功能。本实施例的计算机可读存储介质用于存储代码生成装置，被处理器52执行时实现实施例一的代码生成方法。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种代码生成方法，其特征在于，包括以下步骤：
接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度为功能区的高度相比于样本图像的整体高度的比值；
识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；
根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；
根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。
2.根据权利要求1所述的代码生成方法，其特征在于，所述识别所述样本图片中的功能区并获得包括所述功能区的位置及其功能相对高度的功能区信息包括：
识别所述样本图片中的入口像素和背景像素，提取所述背景像素的色值并将其设为背景色值；其中，所述入口像素是构成入口图像的像素点，背景像素是构成样本图片的背景的像素点；
根据所述入口像素和背景像素识别所述样本图片中的功能区；所述功能区是指样本图片中包括入口图像的区域；
获取所述功能区的功能相对高度和位置并将其设为功能区信息。
3.根据权利要求1所述的代码生成方法，其特征在于，所述识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息包括：
识别所述功能区内首位像素和末位像素，并根据所述首位像素和末位像素获得连续入口像素集；其中，所述连续入口像素集是指连续出现且未被背景像素在功能区的行方向或列方向中断的入口像素集合；
获取所述连续入口像素集的轮廓像素，并根据所述轮廓像素识别所述入口图像的轮廓；其中，所述轮廓像素是指位于连续入口像素集边界的像素点；
根据所述入口图像的轮廓获得所述入口图像的中心点，提取所述中心点的坐标并将其设为入口图像的位置，计算所述功能区中中心点的数量并将该数量设为入口图像的数量，汇总所述入口图像的数量及其位置以获得入口属性信息。
4.根据权利要求1所述的代码生成方法，其特征在于，所述根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息包括：
通过裁切模块根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像；
将所述功能区的功能相对高度设为所述入口图像的入口尺寸信息。
5.根据权利要求1所述的代码生成方法，其特征在于，所述根据所述背景色值和功能区信息生成基础代码包括：
通过代码生成模块新建背景代码并对所述背景代码赋以背景色值；
通过代码生成模块根据所述功能区信息在所述背景代码中插入功能区以生成基础代码。
6.根据权利要求1所述的代码生成方法，其特征在于，所述根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码包括：
提取所述入口属性信息中入口图像的数量，根据该数量划分所述基础代码中的功能区使其形成至少一个子区域；
获取所述子区域的中间点，根据所述入口属性信息中各入口图像的位置，调节子区域的尺寸使所述中间点与入口图像的位置一致并生成布局代码。
7.根据权利要求6所述的代码生成方法，其特征在于，所述根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码包括：
提取所述入口尺寸信息以调整所述入口图像的尺寸；
将调整后的入口图像插入所述子区域以生成样本代码。
8.一种代码生成装置，其特征在于，包括：
第一识别模块，用于接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度为功能区的高度相比于样本图像的整体高度的比值；
第二识别模块，用于识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；
图像裁切模块，用于根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；
代码生成模块，用于根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。
9.一种计算机系统，其包括多个计算机设备，各计算机设备包括存储器.处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述多个计算机设备的处理器执行所述计算机程序时共同实现权利要求1至7任一项所述代码生成方法的步骤。
10.一种计算机可读存储介质，其包括多个存储介质，各存储介质上存储有计算机程序，其特征在于，所述多个存储介质存储的所述计算机程序被处理器执行时共同实现权利要求1至7任一项所述代码生成方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010050415.5A CN111309300A (zh) | 2020-01-17 | 2020-01-17 | 代码生成方法、装置、计算机系统及可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010050415.5A CN111309300A (zh) | 2020-01-17 | 2020-01-17 | 代码生成方法、装置、计算机系统及可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111309300A true CN111309300A (zh) | 2020-06-19 |
Family
ID=71145154
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010050415.5A Pending CN111309300A (zh) | 2020-01-17 | 2020-01-17 | 代码生成方法、装置、计算机系统及可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111309300A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113495726A (zh) * | 2021-06-25 | 2021-10-12 | 上海万物新生环保科技集团有限公司 | 一种生成雪碧图及其样式代码的方法及设备 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH10124289A (ja) * | 1996-06-27 | 1998-05-15 | Xerox Corp | バイナリデータエンコード方法 |
| CN109408058A (zh) * | 2018-10-31 | 2019-03-01 | 北京影谱科技股份有限公司 | 基于机器学习的前端辅助开发方法和装置 |
| CN109791730A (zh) * | 2016-09-28 | 2019-05-21 | 3M创新有限公司 | 具有静态数据和动态查找数据光学元素集的多维光学代码 |
| CN109783094A (zh) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | 前端页面生成方法、装置、计算机设备及存储介质 |
| WO2019156706A1 (en) * | 2018-02-12 | 2019-08-15 | Oracle International Corporation | Automated code generation |
-
2020
- 2020-01-17 CN CN202010050415.5A patent/CN111309300A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH10124289A (ja) * | 1996-06-27 | 1998-05-15 | Xerox Corp | バイナリデータエンコード方法 |
| CN109791730A (zh) * | 2016-09-28 | 2019-05-21 | 3M创新有限公司 | 具有静态数据和动态查找数据光学元素集的多维光学代码 |
| WO2019156706A1 (en) * | 2018-02-12 | 2019-08-15 | Oracle International Corporation | Automated code generation |
| CN109408058A (zh) * | 2018-10-31 | 2019-03-01 | 北京影谱科技股份有限公司 | 基于机器学习的前端辅助开发方法和装置 |
| CN109783094A (zh) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | 前端页面生成方法、装置、计算机设备及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 杨俊;赵林;: "基于多特征检测与支持向量回归的图像文本提取算法", 光学技术, no. 05, 15 September 2018 (2018-09-15) * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113495726A (zh) * | 2021-06-25 | 2021-10-12 | 上海万物新生环保科技集团有限公司 | 一种生成雪碧图及其样式代码的方法及设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109801347B (zh) | 一种可编辑图像模板的生成方法、装置、设备和介质 | |
| CN113609820B (zh) | 基于可扩展标记语言文件生成word文件的方法、装置及设备 | |
| CN110990010B (zh) | 一种软件界面代码的生成方法及装置 | |
| CN112416458A (zh) | 基于ReactNative的预加载方法、装置、计算机设备及存储介质 | |
| CN111159597A (zh) | 骨架屏的生成方法、系统、计算机设备及存储介质 | |
| CN111399831A (zh) | 页面的展示方法和装置、存储介质、电子装置 | |
| CN108897541B (zh) | 应用程序的视觉还原方法、装置、存储介质及终端 | |
| CN112417899A (zh) | 文字翻译方法、装置、计算机设备和存储介质 | |
| CN114417226A (zh) | 页面生成方法、显示方法、装置、电子设备和存储介质 | |
| CN114416056A (zh) | 页面生成方法、系统、计算机设备及可读存储介质 | |
| CN113407254B (zh) | 表单生成方法、装置、电子设备及存储介质 | |
| CN111309300A (zh) | 代码生成方法、装置、计算机系统及可读存储介质 | |
| CN112417826B (zh) | Pdf在线编辑方法、装置、电子设备和可读存储介质 | |
| EP4075381A1 (en) | Image processing method and system | |
| CN109783792A (zh) | 图文排版方法及装置 | |
| CN112395529B (zh) | 页面加载方法、装置、设备及存储介质 | |
| CN106776527B (zh) | 电子书数据的显示方法、装置及终端设备 | |
| CN110263310B (zh) | 数据图生成方法、装置及计算机可读存储介质 | |
| CN113655973B (zh) | 页面分割方法、装置、电子设备及存储介质 | |
| CN113297425B (zh) | 文档转换方法、装置、服务器及存储介质 | |
| CN107977451B (zh) | 在显示页面中添加动态内容的方法、装置和终端设备 | |
| CN114818627A (zh) | 一种表格信息抽取方法、装置、设备及介质 | |
| CN114386127A (zh) | 图文印刷处理方法、装置、计算机设备及存储介质 | |
| CN114428601A (zh) | 视觉稿检查方法及装置 | |
| CN111738166A (zh) | 目标轮廓圈定方法、装置、计算机系统及可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |