原子组件相对位置的确定方法、系统、电子设备及介质技术方案

本公开提供了一种原子组件相对位置的确定方法、系统、电子设备及介质。包括：将第一原子组件添加至背景图层；判断背景图层是否包含第二原子组件：若是，根据坐标确定第一原子组件与第二原子组件的相对位置；若否，根据坐标确定背景图层与所述第一原子组件的相对位置；其中，第一原子组件为待添加的原子组件，第二原子组件为已添加至背景图层的原子组件。本公开通过判断背景图层中是否包含第二原子组件，并根据判断的结果确定第一原子组件与第二原子组件的相对位置关系或者第一原子组件与背景图层的相对位置关系。本公开能够获取被拖拽进背景图层的原子组件与已添加的背景图层或者原子组件的相对位置关系，提高设计原子组件的效率，提高用户体验。提高用户体验。提高用户体验。

【技术实现步骤摘要】
原子组件相对位置的确定方法、系统、电子设备及介质


[0001]本公开涉及可视化配置平台中原子组件配置的
，特别涉及一种原子组件相对位置的确定方法、系统、电子设备及介质。

技术介绍

[0002]在设计前端页面的时候，通常选用低代码平台进行设计。在低代码平台对前端页面的布局进行调整以及设计的时候，无需花大量的时间修改代码，即便是无代码相关背景知识的项目工作人员，也可以通过在低代码平台中对相关原子组件进行拖拽和属性配置直接对前端页面进行调整或修改，节约了大量时间成本。
[0003]目前，低代码平台在原子组件组合的形式较为复杂的情况下，通常针对坐标原点进行绝对位置定位，利用此种方法对原子组件进行定位容易存在前端页面布局方案不合理、前端页面中原子组件的组合方案有限、整体稳定性较差的缺陷。

技术实现思路

[0004]本公开要解决的技术问题是为了克服现有技术中利用坐标原点进行绝对位置定位存在前端页面布局方案不合理、前端页面中原子组件的组合方案有限、整体稳定性较差的缺陷，提供一种原子组件相对位置的确定方法、系统、电子设备及介质。
[0005]本公开是通过下述技术方案来解决上述技术问题：
[0006]一种原子组件相对位置的确定方法，包括：
[0007]将第一原子组件添加至背景图层；
[0008]判断所述背景图层是否包含第二原子组件：
[0009]若是，根据坐标确定所述第一原子组件与所述第二原子组件的相对位置；
[0010]若否，根据坐标确定所述背景图层与所述第一原子组件的相对位置；
[0011]所述第一原子组件为待添加的原子组件，所述第二原子组件为已添加至所述背景图层的原子组件。
[0012]可选地，所述根据坐标确定所述背景图层与所述第一原子组件的相对位置的步骤还包括：
[0013]将所述第一原子组件定义为所述背景图层的子元素。
[0014]可选地，所述根据坐标确定所述第一原子组件与所述第二原子组件的相对位置包括：
[0015]获取第二原子组件的组件层级优先级；
[0016]判断第一原子组件是否与所述第二原子组件存在相交区域，所述第一原子组件根据所述组件层级优先级依次与所述第二原子组件进行判断；
[0017]若所述第一原子组件首次与所述第二原子组件存在相交区域，则确定所述第一原子组件与首次存在相交区域的所述第二原子组件的相对位置，并结束判断，将所述第一原子组件定义为所述第二原子组件的子元素；
[0018]若所述第一原子组件未与任一第二原子组件存在相交区域，则确定所述背景图层与所述第一原子组件的相对位置，将所述第一原子组件定义为所述背景图层的子元素。
[0019]可选地，若所述第一原子组件与所述第二原子组件存在相交区域，则发送提示信息。
[0020]可选地，所述坐标为左上角坐标和右下脚坐标；和/或，
[0021]所述坐标为左下角坐标和右上脚坐标。
[0022]可选地，所述组件层级优先级由添加所述第一原子组件至背景图层的顺序决定；
[0023]和/或，
[0024]所述第一原子组件及所述第二原子组件包括图片原子组件、文本原子组件、按钮原子组件、背景原子组件中的至少一种。
[0025]可选地，将第一原子组件添加至背景图层之前的步骤包括：
[0026]将背景图层添加至前端页面中的页面图层。
[0027]一种原子组件相对位置的确定系统，所述系统包括：
[0028]添加模块，用于将第一原子组件添加至背景图层；
[0029]判断模块，用于判断所述背景图层是否包含第二原子组件：若是，则调用第一相对位置确定模块；若否，则调用第二相对位置确定模块；
[0030]第一相对位置确定模块，用于根据坐标确定所述第一原子组件与所述第二原子组件的相对位置；
[0031]第二相对位置确定模块，用于根据坐标确定所述背景图层与所述第一原子组件的相对位置；
[0032]所述第一原子组件为待添加的原子组件，所述第二原子组件为已添加至所述背景图层的原子组件。
[0033]一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述的原子组件相对位置的确定方法。
[0034]一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的原子组件相对位置的确定方法。
[0035]本公开的积极进步效果在于：通过判断背景图层中是否包含第二原子组件，并根据判断的结果确定第一原子组件与第二原子组件的相对位置关系或者第一原子组件与背景图层的相对位置关系。本公开能够获取被拖拽进背景图层的原子组件与已添加的背景图层或者原子组件的相对位置关系，提高用户设计原子组件的效率，提高用户体验。
附图说明
[0036]图1为本专利技术的实施例1的一种原子组件相对位置的确定方法的流程图。
[0037]图2为本专利技术的实施例1的添加第一原子组件的示意图。
[0038]图3为本专利技术的实施例1的另一种添加第一原子组件的示意图。
[0039]图4为本专利技术的实施例1的另一种原子组件相对位置的确定方法的流程图。
[0040]图5为本专利技术的实施例1的另一种添加第一原子组件的示意图。
[0041]图6为本专利技术的实施例1的原子组件示意图。
[0042]图7为本专利技术的实施例2的原子组件相对位置的确定系统的模块示意图。
[0043]图8为本专利技术的实施例3的电子设备的结构示意图。
具体实施方式
[0044]下面通过实施例的方式进一步说明本公开，但并不因此将本公开限制在所述的实施例范围之中。
[0045]实施例1
[0046]本实施例提供一种原子组件相对位置的确定方法，图1示出了本实施例的流程图。参见图1，本实施例的原子组件相对位置的确定方法包括以下步骤：
[0047]步骤S1、将第一原子组件添加至背景图层；
[0048]步骤S2、判断背景图层是否包含第二原子组件，若是，则执行步骤S21，若否，则执行步骤S22：
[0049]步骤S21、根据坐标确定第一原子组件与第二原子组件的相对位置；
[0050]步骤S22、根据坐标确定背景图层与第一原子组件的相对位置；
[0051]第一原子组件为待添加的原子组件，第二原子组件为已添加至背景图层的原子组件。
[0052]其中，参见图2，假设原子组件C1待添加至背景图层BG2中，此时，原子组件C1即作为第一原子组件。首先，判断背景图层BG2中是否包含第二原子组件(第二原子组件即在添加第一原子组件C1之前已填加至背景图层BG2中的原子组件)。此时，在背景图层BG2中没有包含第二原子组件，则根据坐标确定背景图层BG2与第一原子组件C1的相对位置。
[0053]参见图3，在添加原子组件C1后，原子组件C1为已填加至本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种原子组件相对位置的确定方法，其特征在于，包括：将第一原子组件添加至背景图层；判断所述背景图层是否包含第二原子组件：若是，根据坐标确定所述第一原子组件与所述第二原子组件的相对位置；若否，根据坐标确定所述背景图层与所述第一原子组件的相对位置；所述第一原子组件为待添加的原子组件，所述第二原子组件为已添加至所述背景图层的原子组件。2.如权利要求1所述的原子组件相对位置的确定方法，其特征在于，所述根据坐标确定所述背景图层与所述第一原子组件的相对位置的步骤还包括：将所述第一原子组件定义为所述背景图层的子元素。3.如权利要求2所述的原子组件相对位置的确定方法，其特征在于，所述根据坐标确定所述第一原子组件与所述第二原子组件的相对位置包括：获取第二原子组件的组件层级优先级；判断第一原子组件是否与所述第二原子组件存在相交区域，所述第一原子组件根据所述组件层级优先级依次与所述第二原子组件进行判断；若所述第一原子组件首次与所述第二原子组件存在相交区域，则确定所述第一原子组件与首次存在相交区域的所述第二原子组件的相对位置，并结束判断，将所述第一原子组件定义为所述第二原子组件的子元素；若所述第一原子组件未与任一第二原子组件存在相交区域，则确定所述背景图层与所述第一原子组件的相对位置，将所述第一原子组件定义为所述背景图层的子元素。4.如权利要求3所述的原子组件相对位置的确定方法，其特征在于，若所述第一原子组件与所述第二原子组件存在相交区域，则发送提示信息。5.如权利要求1所述的原子组件相对位置的确定方法，其特征在于，所述坐标为左上角坐标和...

【专利技术属性】
技术研发人员：唐文辉，左邦阳，顾佳璐，
申请(专利权)人：携程计算机技术上海有限公司，
类型：发明
国别省市：