距离显示方法及装置、存储介质及电子装置制造方法及图纸

本申请公开了一种距离显示方法及装置、存储介质及电子装置，涉及智慧家庭技术领域，该距离显示方法包括：确定第一元素在目标画布中的第一位置信息，其中，目标画布为目标容器对应的画布，第一元素为目标容器中的可移动元素；根据第一位置信息在目标画布中确定第一组元素，其中，第一元素与第一组元素中的每个元素之间不存在其他元素；确定第一元素与第一组元素中的每个元素之间的第一目标距离，并在目标画布的第一目标位置显示第一目标距离，其中，第一目标位置为第一元素与第一组元素中的每个元素之间的位置。采用上述技术方案，解决了元素在容器的画布拖动的过程中，无法实时看到元素与周边元素的距离的问题。到元素与周边元素的距离的问题。到元素与周边元素的距离的问题。

【技术实现步骤摘要】
距离显示方法及装置、存储介质及电子装置


[0001]本申请涉及智慧家庭
，具体而言，涉及一种距离显示方法及装置、存储介质及电子装置。

技术介绍

[0002]随着软件开发技术的快速发展，逐渐诞生了一些软件平台，通过鼠标拖拽的方式选择组件/元素到H5组件容器中，自动构建实现低代码或零代码开发H5页面，但在拖拽的过程中，一般是采用元素和画布的左边和顶部的距离确定元素位置，进而实现元素相对于容器的定位，不能实时看到元素和周边元素相对距离。
[0003]针对相关技术中，元素在容器的画布拖动的过程中，无法实时看到元素与周边元素的距离的问题，目前尚未提出有效的解决方案。
[0004]因此，有必要对相关技术予以改良以克服相关技术中的所述缺陷。

技术实现思路

[0005]本专利技术实施例提供了一种距离显示方法及装置、存储介质及电子装置，以至少解决元素在容器的画布拖动的过程中，无法实时看到元素与周边元素的距离的问题。
[0006]根据本专利技术实施例的一方面，提供一种距离显示方法，包括：确定第一元素在目标画布中的第一位置信息，其中，所述目标画布为目标容器对应的画布，所述第一元素为所述目标容器中的可移动元素；根据所述第一位置信息在所述目标画布中确定第一组元素，其中，所述第一元素与所述第一组元素中的每个元素之间不存在其他元素；确定所述第一元素与所述第一组元素中的每个元素之间的第一目标距离，并在所述目标画布的第一目标位置显示所述第一目标距离，其中，所述第一目标位置为所述第一元素与所述第一组元素中的每个元素之间的位置。
[0007]在一个可选的实施例中，确定第一元素在目标画布中的第一位置信息，包括：确定所述第一元素的水平边界线与所述目标画布的水平边界线的第一距离，以及确定所述第一元素的垂直边界线与所述目标画布的垂直边界线的第二距离，其中，所述水平边界线包括以下至少之一：上边界线，下边界线；所述垂直边界线包括以下至少之一：左边界线，右边界线；根据所述第一距离和所述第二距离确定所述第一位置信息；确定第一元素在目标画布中的第一位置信息之后，所述方法还包括：在所述第一元素的水平边界线与所述目标画布的水平边界线之间显示所述第一距离，和/或在所述第一元素的垂直边界线与所述目标画布的垂直边界线之间显示所述第二距离。
[0008]在一个可选的实施例中，根据所述第一位置信息在所述目标画布中确定第一组元素，包括：根据所述第一位置信息在所述目标画布中确定一个或多个第二元素，其中，所述一个或多个第二元素构成所述第一组元素，所述第二元素的第二边界线与所述第一元素的第一边界线之间不存在其他元素，存在一条垂直线或水平线与所述第二元素的第二边界线以及所述第一元素的第一边界线都具有交点；其中，所述第一边界线和第二边界线为第一
边界线集合或者第二边界线集合中的一条边界线；所述第一边界线集合包括：上边界线，下边界线；所述第二边界线集合包括：左边界线，右边界线。
[0009]在一个可选的实施例中，确定所述第一元素与所述第一组元素中的每个元素之间的第一目标距离，包括：确定所述第一元素的水平边界线与所述每个元素的水平边界线之间的水平距离，其中，所述水平边界线包括以下至少之一：上边界线，下边界线；或者确定所述第一元素的垂直边界线与所述每个元素的垂直边界线之间的垂直距离，其中，所述垂直边界线包括以下至少之一：左边界线，右边界线。
[0010]在一个可选的实施例中，在所述目标画布的第一目标位置显示所述第一目标距离之后，包括：在确定所述第一组元素中存在第三元素的情况下，确定所述第三元素的第三边界线集合，其中，存在一条水平线与所述第一元素以及所述第三元素都具有交点，所述第三边界线集合包括：上边界线、下边界线以及水平中线；所述水平中线位于上边界线以及下边界线之间，且距离所述上边界线以及所述下边界线的距离相等；在确定存在第一目标线与第二目标线共线的情况下，在所述第一目标线与第二目标线之间显示水平标尺，并在所述水平标尺上显示所述第一目标距离，其中，所述第一目标线为所述第三元素的第三边界线集合中的一条线；所述第二目标线为所述第一元素的第三边界线集合中的一条线。
[0011]在一个可选的实施例中，在所述目标画布的第一目标位置显示所述第一目标距离之后，包括：在确定所述第一组元素中存在第四元素的情况下，确定所述第四元素的第四边界线集合，其中，存在一条垂直线与所述第一元素以及所述第四元素都具有交点，所述第四边界线集合包括：左边界线、右边界线以及垂直中线，所述垂直中线位于所述左边界线以及所述右边界线之间，且距离所述左边界线以及所述右边界线的距离相等；在确定存在第三目标线与第四目标线共线的情况下，在所述第三目标线与第四目标线之间显示垂直标尺，并在所述垂直标尺上显示所述第一目标距离，其中，所述第三目标线为所述第四元素的第四边界线集合中的一条线；所述第四目标线为所述第一元素的第四边界线集合中的一条线。
[0012]在一个可选的实施例中，所述方法还包括：确定第五元素在所述第一元素中的第二位置信息，其中，所述第五元素为所述第一元素中的可移动元素；根据所述第二位置信息在所述第一元素中确定第二组元素，其中，所述第五元素与所述第二组元素中的每个元素之间不存在其他元素；确定所述第五元素与所述第二组元素中的每个元素之间的第二目标距离，并在所述第一元素的第二目标位置显示所述第二目标距离，其中，所述第二目标位置为所述第五元素与所述第一组元素中的每个元素之间的位置。
[0013]根据本专利技术实施例的另一方面，还提供了一种距离显示装置，包括：第一确定模块，用于确定第一元素在目标画布中的第一位置信息，其中，所述目标画布为目标容器对应的画布，所述第一元素为所述目标容器中的可移动元素；第二确定模块，用于根据所述第一位置信息在所述目标画布中确定第一组元素，其中，所述第一元素与所述第一组元素中的每个元素之间不存在其他元素；显示模块，用于确定所述第一元素与所述第一组元素中的每个元素之间的第一目标距离，并在所述目标画布的第一目标位置显示所述第一目标距离，其中，所述第一目标位置为所述第一元素与所述第一组元素中的每个元素之间的位置。
[0014]根据本专利技术实施例的又一方面，还提供了一种计算机可读的存储介质，该计算机可读的存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述距离
显示方法。
[0015]根据本专利技术实施例的又一方面，还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，上述处理器通过计算机程序执行上述距离显示方法。
[0016]通过本专利技术，确定第一元素在目标画布中的第一位置信息，并根据第一位置信息在目标画布中确定与第一元素相邻的第一组元素，进而确定第一元素与第一组元素中的每个元素之间的第一目标距离，并在目标画布的第一元素与第一组元素中的每个元素之间的位置显示第一目标距离。采用上述技术方案，使得用户可以实时的看到元素和周边元素的距离，极大的提高了用户在拖拽元素过程中的体验感。解决了元素在容器的画布本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种距离显示方法，其特征在于，包括：确定第一元素在目标画布中的第一位置信息，其中，所述目标画布为目标容器对应的画布，所述第一元素为所述目标容器中的可移动元素；根据所述第一位置信息在所述目标画布中确定第一组元素，其中，所述第一元素与所述第一组元素中的每个元素之间不存在其他元素；确定所述第一元素与所述第一组元素中的每个元素之间的第一目标距离，并在所述目标画布的第一目标位置显示所述第一目标距离，其中，所述第一目标位置为所述第一元素与所述第一组元素中的每个元素之间的位置。2.根据权利要求1所述的方法，其特征在于，确定第一元素在目标画布中的第一位置信息，包括：确定所述第一元素的水平边界线与所述目标画布的水平边界线的第一距离，以及确定所述第一元素的垂直边界线与所述目标画布的垂直边界线的第二距离，其中，所述水平边界线包括以下至少之一：上边界线，下边界线；所述垂直边界线包括以下至少之一：左边界线，右边界线；根据所述第一距离和所述第二距离确定所述第一位置信息；确定第一元素在目标画布中的第一位置信息之后，所述方法还包括：在所述第一元素的水平边界线与所述目标画布的水平边界线之间显示所述第一距离，和/或在所述第一元素的垂直边界线与所述目标画布的垂直边界线之间显示所述第二距离。3.根据权利要求1所述的方法，其特征在于，根据所述第一位置信息在所述目标画布中确定第一组元素，包括：根据所述第一位置信息在所述目标画布中确定一个或多个第二元素，其中，所述一个或多个第二元素构成所述第一组元素，所述第二元素的第二边界线与所述第一元素的第一边界线之间不存在其他元素，存在一条垂直线或水平线与所述第二元素的第二边界线以及所述第一元素的第一边界线都具有交点；其中，所述第一边界线和第二边界线为第一边界线集合或者第二边界线集合中的一条边界线；所述第一边界线集合包括：上边界线，下边界线；所述第二边界线集合包括：左边界线，右边界线。4.根据权利要求1所述的方法，其特征在于，确定所述第一元素与所述第一组元素中的每个元素之间的第一目标距离，包括：确定所述第一元素的水平边界线与所述每个元素的水平边界线之间的水平距离，其中，所述水平边界线包括以下至少之一：上边界线，下边界线；或者确定所述第一元素的垂直边界线与所述每个元素的垂直边界线之间的垂直距离，其中，所述垂直边界线包括以下至少之一：左边界线，右边界线。5.根据权利要求1所述的方法，其特征在于，在所述目标画布的第一目标位置显示所述第一目标距离之后，包括：在确定所述第一组元素中存在第三元素的情况下，确定所述第三元素的第三边界线集合，其中，存在一条水平线与所述第一元素以及所述第三元素都具有交点，所述第三边界线集合包括：上边界线、下边界线以及水平中线；所述...

【专利技术属性】
技术研发人员：闫斌，
申请(专利权)人：海尔智家股份有限公司，
类型：发明
国别省市：