一种代码的生成方法及装置与流程

计算;推算;计数设备的制造及其应用技术1.本发明涉及领域计算机技术领域，尤其涉及一种代码的生成方法及装置。背景技术：2.设计稿自动生成代码(design to code，d2c)是低代码(low code)的一个重要分支，d2c是指根据设计稿自动生成前端ui代码，甚至生成部分后端代码，可以提高前端开发人员的开发效率。3.现在自动生成代码领域，由于设计师只对设计稿的视觉效果负责，没有关注元素及其组织关系，因而设计稿中可能存在重叠关系，当存在重叠关系的设计稿在进行代码生成时，会产生代码的绝对定位，造成代码结构混乱，由此极大地限制前端ui的自适应能力，造成所生成代码的可用性低。技术实现要素：4.有鉴于此，本发明提供了一种代码的生成方法及装置，用以实现代码的自动生成，保证代码的高可用性。5.其技术方案如下：6.一种代码的生成方法，包括：7.获取资源层次数据，所述资源层次数据包括多个元素以及各个元素的坐标数据；8.根据所述资源层次数据确定所述各个元素之间的重叠关系；9.根据所述重叠关系确定所述各个元素的布局方式，并基于所述布局方式生成代码。10.优选的，所述根据所述资源层次数据确定所述各个元素之间的重叠关系，包括：11.基于预设的元素相交判断函数和元素包含判断函数，根据所述各个元素的坐标数据确定各个元素之间的位置关系，所述位置关系包括：非重叠关系和重叠关系；12.当所述位置关系为重叠关系时，根据各个元素的元素面积和元素类型确定各个元素的重叠关系类型，所述各个元素的元素面积是根据各个元素的坐标数据确定的，所述重叠关系类型包括：必要重叠关系和非必要重叠关系。13.优选的，所述根据所述重叠关系确定各个元素的布局方式，并基于所述布局方式生成代码，包括：14.当所述重叠关系类型为必要重叠关系时，确定所述各个元素中存在所述必要重叠关系所对应的多个必要重叠元素；15.根据所述必要重叠元素的坐标数据、元素面积和元素类型确定所述必要重叠元素的布局方式，所述必要重叠元素的布局方式包括绝对定位布局方式和静态布局方式；16.基于所述必要重叠元素的布局方式生成所述代码。17.优选的，所述根据所述重叠关系确定各个元素的布局方式，并基于所述布局方式生成代码，包括：18.当所述位置关系为非必要重叠关系，确定所述各个元素中存在所述非必要重叠关系所对应的多个非必要重叠元素；19.根据所述非必要重叠元素的坐标数据、元素面积和元素类型确定所述非必要重叠元素的布局方式，所述非必要重叠元素的布局方式包括横向静态布局方式和纵向静态布局方式；20.基于所述非必要重叠元素的布局方式，确定所述非必要重叠元素在布局画框算法中的虚拟坐标，所述虚拟坐标用于实现所述多个非必要重叠元素之间互相隔离；21.基于所述非必要重叠元素的布局方式生成所述非必要重叠元素的代码。22.优选的，所述方法还包括：23.设置flex样式判定允许负值，并设置单元素布局允许负边距；24.设置布局画框算法为允许负边距布局方式。25.本技术另一方面还提供了一种代码的生成装置，包括：26.获取模块，获取资源层次数据，所述资源层次数据包括多个元素以及各个元素的坐标数据；27.重叠关系确定模块，用于根据所述资源层次数据确定所述各个元素之间的重叠关系；28.代码生成模块，用于根据所述重叠关系确定所述各个元素的布局方式，并基于所述布局方式生成代码。29.优选的，所述重叠关系确定模块，具体包括：30.位置关系判断子模块，用于基于预设的元素相交判断函数和元素包含判断函数，根据所述各个元素的坐标数据确定各个元素之间的位置关系，所述位置关系包括：非重叠关系和重叠关系；31.重叠关系确定子模块，用于当所述位置关系为重叠关系时，根据各个元素的元素面积和元素类型确定各个元素的重叠关系类型，所述各个元素的元素面积是根据各个元素的坐标数据确定的，所述重叠关系类型包括：必要重叠关系和非必要重叠关系。32.优选的，所述代码生成模块，具体包括：33.必要重叠元素确定子模块，用于当所述重叠关系类型为必要重叠关系时，确定所述各个元素中存在所述必要重叠关系所对应的多个必要重叠元素；34.布局方式确定子模块，用于根据所述必要重叠元素的坐标数据、元素面积和元素类型确定所述必要重叠元素的布局方式，所述必要重叠元素的布局方式包括绝对定位布局方式和静态布局方式；35.代码生成子模块，用于基于所述必要重叠元素的布局方式生成所述代码。36.优选的，所述代码生成模块，具体包括：37.非必要重叠元素确定子模块，用于当所述位置关系为非必要重叠关系，确定所述各个元素中存在所述非必要重叠关系所对应的多个非必要重叠元素；38.布局方式确定子模块，用于根据所述非必要重叠元素的坐标数据、元素面积和元素类型确定所述非必要重叠元素的布局方式，所述非必要重叠元素的布局方式包括横向静态布局方式和纵向静态布局方式；39.虚拟坐标确定子模块，用于基于所述非必要重叠元素的布局方式，确定所述非必要重叠元素在布局画框算法中的虚拟坐标，所述虚拟坐标用于实现所述多个非必要重叠元素之间互相隔离；40.代码生成子模块，用于基于所述非必要重叠元素的布局方式生成所述非必要重叠元素的代码。41.优选的，所述装置还包括：42.设置模块，用于设置flex样式判定允许负值，并设置单元素布局允许负边距；43.所述设置模块，还用于设置布局画框算法为允许负边距布局方式。44.上述技术方案具有如下有益效果：45.本技术实施例提供的一种代码生成方法及装置，获取资源层次数据，所述资源层次数据包括多个元素以及各个元素的坐标数据；根据所述资源层次数据确定所述各个元素之间的重叠关系；根据所述重叠关系确定所述各个元素的布局方式，并基于所述布局方式生成代码。由上，通过识别元素间不同的重叠关系类型，针对性的进行相应布局设置，避免设计稿自动生成代码因重叠关系使得自动生成代码因绝对定位造成代码结构紊乱，保证自动生成代码的可用性。附图说明46.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。47.图1为本发明实施例提供的一种代码生成方法流程示意图；48.图2为本发明实施例提供的一种非必要重叠关系的示意图；49.图3为本发明实施例提供的一种必要重叠关系的示意图；50.图4为本发明实施例提供的一种代码生成装置结构示意图。具体实施方式51.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。52.为了实现，本技术实施例提供了一种代码的生成方法，请参阅图1，，该方法可以包括：53.步骤s100：获取资源层次数据，资源层次数据包括多个元素以及各个元素的坐标数据。54.资源层次数据来源于设计稿，设计稿是视觉工程师基于视觉效果做出的资源数据，由于视觉工程师只对设计稿的视觉效果负责，没有关注元素及其组织关系，可能存在元素之间的重叠关系。55.可以理解的是，资源层次数据可以包括多个元素以及各个元素的坐标数据，还可以包括各个元素的类型信息等。56.步骤s200：根据资源层次数据确定各个元素之间的重叠关系。57.可以理解的是，可以根据资源层次数据中元素的坐标数据以及元素的属性信息确定各个元素之间的重叠关系。58.具体的，步骤s200包括步骤s201和步骤s202，如下：59.步骤s201：基于预设的元素相交判断函数和元素包含判断函数，根据各个元素的坐标数据确定各个元素之间的位置关系，该位置关系包括：非重叠关系和重叠关系。60.可以理解的是，元素相交判断函数和元素包含判断函数是用于根据元素的坐标数据判断元素之间是否相交、是否包含，由此判断元素之间是否存在重叠关系。61.步骤s202：当位置关系为重叠关系时，根据各个元素的元素面积和元素类型确定各个元素的重叠关系类型，各个元素的元素面积是根据各个元素的坐标数据确定的，该重叠关系类型包括：必要重叠关系和非必要重叠关系。62.当设计稿上的元素发生重叠时，具体涉及元素的必要重叠关系和元素的非必要重叠关系两种。63.具体的，非必要重叠关系是指两个元素在坐标数据上存在重叠，但生成转换后的代码所呈现的效果是不重叠，参见附图2示出一种非必要重叠关系的示意图，元素a与元素b之间的文本框出现了重叠，但是元素a与元素b中的内容实际上看上去并没有重叠。64.具体的，必要重叠关系是指两个元素的解析数据是存在重叠，且生成转换后的代码所呈现的效果也是重叠的，参见附图3示出一种必要重叠关系的示意图，元素d是元素c的角标元素，元素c与元素d之间出现重叠，后续生成代码所呈现的效果也应该是重叠的。65.步骤s300：根据重叠关系确定各个元素的布局方式，并基于布局方式生成代码。66.在确定了元素的具体重叠关系后，根据元素间的重叠关系设置各个元素的布局方式，并基于设置的布局方式生成设计稿的代码。67.具体的，当重叠关系类型为必要重叠关系时，步骤s300包括步骤s3011至步骤s3013如下：68.步骤s3011：当重叠关系类型为必要重叠关系时，确定各个元素中存在必要重叠关系所对应的多个必要重叠元素；69.可以理解的是，当重叠关系类型为必要重叠关系时，需要确定出存在必要重叠关系所对应的元素，即必要重叠元素。70.步骤s3012：根据必要重叠元素的坐标数据、元素面积和元素类型确定必要重叠元素的布局方式，必要重叠元素的布局方式包括绝对定位absolute布局方式和静态static布局方式；71.在确定出必要重叠元素后，根据必要重叠元素的坐标数据、元素面积和元素类型确定元素的布局方式，必要重叠元素的布局方式包括绝对定位布局和静态布局。72.步骤s3013：基于必要重叠元素的布局方式生成代码；73.基于前述确定的必要重叠元素的布局方式生成代码。74.具体的，当重叠关系类型为非必要重叠关系时，步骤s300包括步骤s3021至步骤s3024如下：75.步骤s3021：当位置关系为非必要重叠关系，确定各个元素中存在非必要重叠关系所对应的多个非必要重叠元素；76.可以理解的是，当重叠关系类型为非必要重叠关系时，需要确定出存在非必要重叠关系所对应的元素，即非必要重叠元素。77.步骤s3022：根据非必要重叠元素的坐标数据、元素面积和元素类型确定非必要重叠元素的布局方式，非必要重叠元素的布局方式包括横向静态布局方式和纵向静态布局方式；78.在确定出非必要元素后，根据非必要重叠元素的坐标数据、元素面积和元素类型确定非必要重叠元素的布局方式，针对非必要重叠元素的布局方式包括横向静态布局方式和纵向静态布局方式，可以理解的是，静态布局方式和纵向静态布局方式均属于静态static布局方式，仅是布局方向配置的区别。79.步骤s3023：基于非必要重叠元素的布局方式，确定非必要重叠元素在布局画框算法中的虚拟坐标，虚拟坐标用于实现多个非必要重叠元素之间互相隔离；80.可以理解的是，布局画框算法是基于互不重叠的元素进行计算绘制，当非必要重叠关系的数据进入到布局画框算法就无法精准的绘制准确的方向，因此，针对非必要重叠元素，可以在布局画框算法确定其虚拟坐标，保证元素之间互不重叠，互相隔离，使得布局画框算法能够准确绘制。81.步骤s3024：基于非必要重叠元素的布局方式生成非必要重叠元素的代码；82.基于前述确定的非必要重叠元素的布局方式生成代码。83.具体的，确定元素之间的重叠关系以及对应布局处理方式，可以包括以下情况：84.(1)当元素b完全覆盖住元素a，确定元素a与元素b是必要重叠关系，元素a与元素b是必要重叠元素，取消其对应资源层的绝对定位处理，画框新增盒子节点，对元素进行重新落位，采用绝对定位布局方式。85.(2)当元素b的面积小于元素a，且二者面积相差超过预设阈值，确定元素b为元素a的角标元素，确定元素a与元素b是必要重叠关系，采用绝对定位布局方式。86.(3)当元素b的元素类型为被蒙元素，元素a的元素类型为蒙版元素，确定元素a与元素b是必要重叠关系，采用绝对定位布局方式。87.(4)当多个元素(包含元素a、元素b、…更多元素)之间发生重叠关系，确定该多个元素为必要重叠关系，该多个元素均为必要重叠元素，采取与(1)相同的处理手段，取消该多个元素对应资源层的绝对定位处理，画框新增盒子节点，对元素进行重新落位，采用绝对定位布局方式。88.(5)当元素a的元素类型为图片类型，元素b的元素类型为文字类型，且二者重叠面积大于/等于预设阈值，确定元素a与元素b是必要重叠关系，采用绝对定位布局方式。89.(6)当元素b大部分面积在a中，确定元素a与元素b是非必要重叠关系，采用静态static布局方式。90.(7)当元素b大部分面积不在元素a中，且在排除情况(2)中角标元素的可能后，确定元素a与元素b是非必要重叠关系，采用静态static布局方式。91.(8)除上述情况外的其他情况可归于非必要重叠关系，采用静态static布局方式。92.进一步的，在确定出非必要重叠关系后，还可以针对元素的资源层次数据的具体情况进行处理，具体包括：93.a.当非必要重叠元素视觉上溢出了画板了，需要先剔除溢出画板的区域，在采用静态布局，对其进行正常落位。可以理解的是，当设计稿中的元素溢出画板了，无法在显示器的显示范围内呈现，对元素中超过画板区域的部分进行裁切剔除。94.b.元素a与元素b的元素类型均为图片类型，且元素a与元素b内不包括其他文字类型的元素，则将元素a与元素b合并处理，并采用静态布局方式。95.c.元素a与元素b的元素类型均为文字类型，二者之间上下排列或左右排列，均采用静态布局方式。可以理解的是，当非必要重叠元素均为文字类型时，不适用决定定位方式，采用静态布局方式。96.d.元素a的元素类型为图片类型，元素b的元素类型为文字类型，二者关系可是左图右文或上图下文，且二者重叠面积小于预设阈值，采用静态布局，并设置布局方式允许负边距。97.具体的，设置布局画框算法为允许负边距布局方式，可以理解的是，为保证负边距布局方式的兼容性，需要先设置flex样式判定允许负值以及设置单元素布局允许负边距。98.综上所述，本技术实施例提供了一种代码生成方法，获取资源层次数据，资源层次数据包括多个元素以及各个元素的坐标数据；根据所述资源层次数据确定各个元素之间的重叠关系；根据重叠关系确定各个元素的布局方式，并基于布局方式生成代码。由上，通过识别元素间不同的重叠关系类型，针对性的进行相应布局设置，避免设计稿自动生成代码因重叠关系使得自动生成代码因绝对定位造成代码结构紊乱，保证自动生成代码的可用性。99.与上述方法相对应，本发明实施例还提供了一种云资源分配装置，请参阅图4，示出了该装置的结构示意图，可以包括：100.获取模块401，获取资源层次数据，资源层次数据包括多个元素以及各个元素的坐标数据；101.重叠关系确定模块402，用于根据所述资源层次数据确定各个元素之间的重叠关系；102.代码生成模块403，用于根据重叠关系确定所述各个元素的布局方式，并基于所述布局方式生成代码。103.具体的，重叠关系确定模块402，具体包括：104.位置关系判断子模块4021，用于基于预设的元素相交判断函数和元素包含判断函数，根据各个元素的坐标数据确定各个元素之间的位置关系，位置关系包括：非重叠关系和重叠关系；105.重叠关系确定子模块4022，用于当位置关系为重叠关系时，根据各个元素的元素面积和元素类型确定各个元素的重叠关系类型，各个元素的元素面积是根据各个元素的坐标数据确定的，重叠关系类型包括：必要重叠关系和非必要重叠关系。106.当重叠关系为必要重叠关系时，代码生成模块403，具体包括：107.必要重叠元素确定子模块4031，用于当所述重叠关系类型为必要重叠关系时，确定所述各个元素中存在所述必要重叠关系所对应的多个必要重叠元素；108.布局方式确定子模块4032，用于根据所述必要重叠元素的坐标数据、元素面积和元素类型确定所述必要重叠元素的布局方式，所述必要重叠元素的布局方式包括绝对定位布局方式和静态布局方式；109.代码生成子模块4033，用于基于所述必要重叠元素的布局方式生成所述代码。110.当重叠关系为非必要重叠关系时，代码生成模块403，具体包括：111.非必要重叠元素确定子模块4034，用于当所述位置关系为非必要重叠关系，确定所述各个元素中存在所述非必要重叠关系所对应的多个非必要重叠元素；112.布局方式确定子模块4032，还用于根据所述非必要重叠元素的坐标数据、元素面积和元素类型确定所述非必要重叠元素的布局方式，所述非必要重叠元素的布局方式包括横向静态布局方式和纵向静态布局方式；113.虚拟坐标确定子模块4035，用于基于所述非必要重叠元素的布局方式，确定所述非必要重叠元素在布局画框算法中的虚拟坐标，所述虚拟坐标用于实现所述多个非必要重叠元素之间互相隔离；114.代码生成子模块4033，还用于基于所述非必要重叠元素的布局方式生成所述非必要重叠元素的代码。115.可选的，该装置还包括：116.设置模块404，用于设置flex样式判定允许负值，并设置单元素布局允许负边距；117.设置模块404，还用于设置布局画框算法为允许负边距布局方式。118.需要说明的是，本技术实施例提供的一种代码生成装置中各模块执行的步骤以及相关技术特征与前文实施例所提供一种代码生成方法相对应，装置侧的描述可以参见前述方法部分的实施例，此处不赘述。119.综上所述，本技术实施例提供了一种代码生成装置，获取模块获取资源层次数据，资源层次数据包括多个元素以及各个元素的坐标数据；重叠关系确定模块根据所述资源层次数据确定各个元素之间的重叠关系；代码生成模块根据重叠关系确定所述各个元素的布局方式，并基于所述布局方式生成代码由上，通过识别元素间不同的重叠关系类型，针对性的进行相应布局设置，避免设计稿自动生成代码因重叠关系使得自动生成代码因绝对定位造成代码结构紊乱，保证自动生成代码的可用性。120.本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。121.本领域技术人员可以理解，图所示的流程图仅是本技术的实施方式可以在其中得以实现的一个示例，本技术实施方式的适用范围不受到该流程图任何方面的限制。122.在本技术所提供的几个实施例中，应该理解到，所揭露的方法、装置和设备，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。123.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。124.所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。125.对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。









图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!




内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,发布内容不收取任何费用也不接任何广告!




免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本文部分文字与图片资源来自于网络，部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!