CN116893772A - 一种组件控制方法、装置、电子设备及存储介质 - Google Patents

一种组件控制方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN116893772A
CN116893772A CN202311161825.7A CN202311161825A CN116893772A CN 116893772 A CN116893772 A CN 116893772A CN 202311161825 A CN202311161825 A CN 202311161825A CN 116893772 A CN116893772 A CN 116893772A
Authority
CN
China
Prior art keywords
component
abscissa
ordinate
determining
components
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.)
Granted
Application number
CN202311161825.7A
Other languages
English (en)
Other versions
CN116893772B (zh
Inventor
李秋华
许少鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Mobile Communications Group Co Ltd
China Mobile Suzhou Software Technology Co Ltd
Original Assignee
China Mobile Communications Group Co Ltd
China Mobile Suzhou Software Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by China Mobile Communications Group Co Ltd, China Mobile Suzhou Software Technology Co Ltd filed Critical China Mobile Communications Group Co Ltd
Priority to CN202311161825.7A priority Critical patent/CN116893772B/zh
Publication of CN116893772A publication Critical patent/CN116893772A/zh
Application granted granted Critical
Publication of CN116893772B publication Critical patent/CN116893772B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486Drag-and-drop
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种组件控制方法、装置、电子设备及存储介质,所述方法包括:在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。通过上述特征,从而使得本发明实施例可以提高组件的拖拽移动效果。

Description

一种组件控制方法、装置、电子设备及存储介质
技术领域
本发明涉及数据处理技术领域,尤其涉及一种组件控制方法、装置、电子设备及存储介质。
背景技术
现如今,低代码的概念迅速普及,从而出现了一批低代码产品,其中,低代码产品主要包含三个部分:组件库及对应组件的配置,配置系统和配置解析器,而配置系统又主要包含三个部分:左侧的可选组件列表,中间的组件展示面板实时展示用户不同配置的效果,和右侧的组件属性配置面板。
在相关技术中,通常采用顺序排放和栅栏布局的方式在前端页面实现布局,组件间间隔由组件内部控制,在组件的拖拽过程中,栅栏布局的组件间的间隔会限制组件的拖拽,进而影响组件的拖拽移动效果。
发明内容
本发明实施例提供一种组件控制方法、装置、电子设备及存储介质,以解决现有技术中对组件的拖拽移动效果较差的问题。
第一方面,本发明实施例提供一种组件控制方法,所述方法包括:
在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
可选地,所述基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,包括:
从所述顺序数组中确定与所述第一坐标信息对应的第一值;
从所述哈希映射表中确定与所述第一值对应的第二组件。
可选地,所述第一坐标信息包括第一横坐标和第一纵坐标;
所述从所述顺序数组中确定与所述第一坐标信息对应的第一值,包括:
确定所述顺序数组中与所述第一横坐标对应的第二横坐标,且第一横坐标与所述第二横坐标在横轴上的间距为第一间距,所述第二横坐标为所述顺序数组中与所述第一横坐标在所述横轴上的间距最小的横坐标;
确定所述顺序数组中与所述第一纵坐标对应的第二纵坐标,且第一纵坐标与所述第二纵坐标在纵轴上的间距为第二间距,所述第二纵坐标为所述顺序数组中与所述第一纵坐标在所述纵轴上的间距最小的纵坐标;
将所述第一间距和所述第二间距中取值最小的确定为第一值。
可选地,所述基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置,包括:
在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置;
或者,
在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离大于第二值,则将所述目标位置确定为所述第一组件的停留位置,并控制所述第一组件停留在所述目标位置。
可选地,所述若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,包括:
在所述第一组件的横坐标减去所述第二组件的横坐标的值小于所述第二值的情况下,将所述第一组件的横坐标替换为所述第二组件的横坐标;
在所述第一组件的纵坐标减去所述第二组件的横纵坐标的值小于所述第二值的情况下,将所述第一组件的纵坐标替换为所述第二组件的纵坐标。
第二方面,本发明实施例提供一种组件控制装置,包括:
获取模块,用于在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
第一确定模块,用于基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
第二确定模块,用于基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
可选地,所述第一确定模块包括:
第一确定单元,用于从所述顺序数组中确定与所述第一坐标信息对应的第一值;
第二确定单元,用于从所述哈希映射表中确定与所述第一值对应的第二组件。
可选地,所述第一坐标信息包括第一横坐标和第一纵坐标;
所述第一确定单元包括:
确定所述顺序数组中与所述第一横坐标对应的第二横坐标,且第一横坐标与所述第二横坐标在横轴上的间距为第一间距,所述第二横坐标为所述顺序数组中与所述第一横坐标在所述横轴上的间距最小的横坐标;
确定所述顺序数组中与所述第一纵坐标对应的第二纵坐标,且第一纵坐标与所述第二纵坐标在纵轴上的间距为第二间距,所述第二纵坐标为所述顺序数组中与所述第一纵坐标在所述纵轴上的间距最小的纵坐标;
将所述第一间距和所述第二间距中取值最小的确定为第一值。
可选地,所述第二确定模块包括:
第一处理单元,用于在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置;
或者,
第二处理单元,用于在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离大于第二值,则将所述目标位置确定为所述第一组件的停留位置,并控制所述第一组件停留在所述目标位置。
可选地,第一处理单元包括:
在所述第一组件的横坐标减去所述第二组件的横坐标的值小于所述第二值的情况下,将所述第一组件的横坐标替换为所述第二组件的横坐标;
在所述第一组件的纵坐标减去所述第二组件的横纵坐标的值小于所述第二值的情况下,将所述第一组件的纵坐标替换为所述第二组件的纵坐标。
第三方面,本发明实施例提供一种电子设备,包括收发机和处理器,
所述收发机,用于在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
所述处理器,用于基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
所述处理器,还用于基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
第四方面,本发明实施例提供一种电子设备,包括:处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序,所述程序被所述处理器执行时实现如第一方面所述的组件控制方法的步骤。
第五方面,本发明实施例提供一种计算机可读存储介质,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如第一方面所述的组件控制方法的步骤。
本发明实施例中,在对第一组件的拖拽过程中,并且第一组件在第一显示区域中的目标位置的停留时间大于预设时间的情况下,首先获取到第一组件处于目标位置时的第一坐标信息,接着在M个组件对应的顺序数组和哈希映射表中,确定M个组件中与第一坐标信息关联的第二组件,最后基于第一组件和第二组件的位置关系,确定第一组件的停留位置,并且将第一组件移动至停留位置,完成对第一组件的控制。在本发明实施例的技术方案中,采用引入第二组件的方式对第一组件的停留位置进行确定,能够使得第一组件能够基于第一组件和第二组件的位置关系进行页面布局,提高了对组件控制的易用性,进而提高了对组件的拖拽移动效果。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种组件控制方法的流程示意图;
图2是本发明实施例提供的一种吸附线及距离线展示的示意图之一;
图3是本发明实施例提供的一种吸附线及距离线展示的示意图之二;
图4是本发明实施例提供的一种吸附线及距离线展示的示意图之三;
图5是本发明实施例提供的一种组件控制装置的结构示意图;
图6是本发明实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明实施例中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
请参见图1,图1是本发明实施例提供的一种组件控制方法的流程示意图,如图1所示,所述方法包括以下步骤:
步骤101、在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
步骤102、基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
步骤103、基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
其中,上述组件控制方法所包括的步骤101、步骤102和步骤103可以是由电子设备来执行,例如:计算机等设备,对此本发明实施例不作限定。
另外,本发明实施例可以用顺序排放方案和栅栏布局方案为基础,引入本发明实施例中的步骤101至步骤103,以此来完成对组件的控制,例如:在顺序排放方案和栅栏布局方案中,配置系统所展示的左侧为可选组件的列表,中间的组件展示面板可以实时展示用户不同配置的效果,而右侧可以为组件属性配置面板。
应理解,组件拖拽是实现其他功能的基础,需要能够获取到组件实例以及文档对象模型(Document Object Model,DOM)的实时定位,在本发明实施例中,采用拖放以进行反应(Drag and Drop for React,react-dnd)工具对需要拖拽的组件和展示面板进行包装,拖拽实例可以返回实时位置,并且包含拖拽结束和开始时的回调函数,以帮助用户在回调函数中获取不同阶段的拖拽实例。
需要说明的是,对于组件和展示面板的大小,用户可以进行自定义设置,为了给用户提供不同尺寸的页面,并按照实际页面大小进行页面布局,本发明实施例还定义了一种自定义面板大小的功能,具体实施如下:计算实际面板大小和设置面板大小的比例,利用层叠样式表(Cascading Style Sheets,CSS)的特性,按照比例放大或者缩小组件。
因此在步骤101中,上述第一组件可以是配置系统中左侧可选组件列表中的任意组件,上述第一显示区域可以理解为配置系统在中间区域的展示面板,而对于上述第一组件的拖拽过程,可以理解为将上述第一组件从可选组件列表中拖拽至中间区域的展示面板,其中,用户可以采用任何适用的输入设备对上述第一组件进行拖拽控制,例如:鼠标、触摸板等设备,对此本发明实施例不作限定。
另外,当上述第一组件在第一显示区域中的目标位置的停留时间大于预设时长的情况下,可以对上述第一组件处于上述目标位置时的第一坐标信息进行获取,其中,上述预设时长可以由相关人员根据用户操作历史数据以及实际情况进行设定,例如:将上述预设时长设置为500ms,对此本发明实施例不作限定。
上述第一坐标信息可以理解为以第一显示区域的边界为坐标轴,上述第一组件的中目标点的坐标,上述目标点可以是上述第一组件的边界上的任意一点,也可以是上述第一组件所围成区域中的任意一点,其中,考虑到用户的操作习惯,可以以上述第一显示区域的上边界为X轴,左边界为Y轴,以上述第一组件的左上顶点作为代表上述第一组件的目标点,即上述第一组件的左上顶点的坐标即为对应上述第一组件的上述第一坐标信息。
为了方便计算,也可以将坐标信息中的x表示为目标点到面板左边界的距离,坐标信息中的y表示为目标点到面板上边界的距离。
当然,也可以是将组件的中心作为目标点,或者将组件的右上顶点、左下顶点作为目标点,对此本发明实施例不作限定,相关人员可以根据用户操作的实际情况进行设定。
在步骤102中,通过对组件的封装,可以获取到在对M个组件拖拽过程中的位置信息,以及拖拽结束后的位置信息,上述顺序数组中可以是包括有对应M个组件的坐标信息,同样地,上述哈希映射表中也包括有对应M个组件的坐标信息,其中,上述顺序数组可以按照如下表1所示:
表1
上述顺序数组包括两组数据,一组为M个组件的横坐标(x)的数据,按照以小到大的顺序依次排列,另一组为M个组件的纵坐标(y)的数据,也是按照以小到大的顺序依次排列。
上述哈希映射表可以按照如下表2所示:
表2
其中,上述哈希映射表表示的是组件坐标与组件标识的双向映射,可以理解为对组件信息进行查询时,可以通过坐标查询组件的标识,也可以通过标识查询组件的坐标。
需要说明的是,顺序数组的查找和插入算法时间复杂度为O (log2n),数组插入的时候可以先查找数据下标,再生成新的数组,空间复杂度:查找为O (1),插入为 O (n),通过使用顺序数组和哈希映射两种数据结构相结合的方式可以提高对组件信息查询的效率,另一方面,不需要重复计算组件的位置信息,减少了页面回流重绘,提高了页面性能。
另外,在步骤102中,可以确定上述M个组件中与上述第一坐标信息关联的第二组件,上述第二组件可以理解为距离上述第一组件最近的组件。
在步骤103中,上述位置关系可以是包括:上述第一组件与上述第二组件重叠,也可以理解为上述第一组件与上述第二组件碰撞;上述第一组件和上述第二组件未发生碰撞。
当上述位置关系为上述第一组件和上述第二组件重叠,那么上述第一组件的位置需要调整,即无法将上述第一组件放置于上述目标位置,需要确定与上述目标位置不同的停留位置,最后将上述第一组件移动至上述停留位置;当上述位置关系为上述第一组件和上述第二组件未发生重叠时,可以将上述目标位置作为上述停留位置,即不需要对上述第一组件进行移动操作,当然,也可以将上述第一组件移动至与上述第二组件对齐的位置,即该位置为上述停留位置。
在该实施方案中,在对第一组件的拖拽过程中,并且第一组件在第一显示区域中的目标位置的停留时间大于预设时间的情况下,首先获取到第一组件处于目标位置时的第一坐标信息,接着在M个组件对应的顺序数组和哈希映射表中,确定M个组件中与第一坐标信息关联的第二组件,最后基于第一组件和第二组件的位置关系,确定第一组件的停留位置,并且将第一组件移动至停留位置,完成对第一组件的控制。在本发明实施例的技术方案中,采用引入第二组件的方式对第一组件的停留位置进行确定,能够使得第一组件能够基于第一组件和第二组件的位置关系进行页面布局,提高了对组件控制的易用性,进而提高了对组件的拖拽移动效果。
需要说明的是,本发明实施例还提供一种页面渲染功能,在将上述第一组件拖拽至上述停留位置之后,本发明实施例可以提供容器装饰器和组件装饰器,包装容器和组件,并且可以计算配置中的位置信息和大小信息,得到组件的风格(style)样式,从而注入至组件中实现定位。
可选地,所述基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,包括:
从所述顺序数组中确定与所述第一坐标信息对应的第一值;
从所述哈希映射表中确定与所述第一值对应的第二组件。
应理解,上述第二组件为距离上述第一组件最近的组件,因此在从上述顺序数组中确定与所述第一坐标信息对应的第一值之前,确定距离上述第一坐标信息(x,y)最近的坐标(xmin,ymin),具体地,因为上述顺序数组中的数据是按照大小顺序依次排列,因此可以使用二分法在上述顺序数组中,以预设条件进行筛选,得到xmin和ymin
上述第一值为xmin和ymin中的最小值,因为上述哈希映射表表示的是组件坐标与组件标识的双向映射,因此,可以依据上述第一值确定上述第一值对应的组件信息,即确定上述第二组件。
需要说明的是,若上述第一值对应了不止一个组件,那么需要确定这些组件的完整坐标,找到x或y(若上述第一值为xmin,则需要确定这些组件中y的最小值,反之同理)的最小值,从而确定与上述第一组件距离最近的第二组件。
在该实施方案中,在确定上述第二组件的过程中,采用上述顺序数组以及上述哈希映射表来对上述第二组件进行确定,优化了寻找距离当前组件(上述第一组件)最近的组件的算法,并且将上述第一组件的位置信息以及标识信息也保存至上述顺序数组以及上述哈希映射表中,通过该方法,不需要重复计算组件的位置信息,减少了页面的回流重绘,进而提高了页面的性能,以及对位置信息确定的效率。
可选地,所述第一坐标信息包括第一横坐标和第一纵坐标;
所述从所述顺序数组中确定与所述第一坐标信息对应的第一值,包括:
确定所述顺序数组中与所述第一横坐标对应的第二横坐标,且第一横坐标与所述第二横坐标在横轴上的间距为第一间距,所述第二横坐标为所述顺序数组中与所述第一横坐标在所述横轴上的间距最小的横坐标;
确定所述顺序数组中与所述第一纵坐标对应的第二纵坐标,且第一纵坐标与所述第二纵坐标在纵轴上的间距为第二间距,所述第二纵坐标为所述顺序数组中与所述第一纵坐标在所述纵轴上的间距最小的纵坐标;
将所述第一间距和所述第二间距中取值最小的确定为第一值。
应理解,上述第一坐标信息可以表示为(x1,y1),确定上述顺序数组中与上述第一横坐标(x1)对应的第二横坐标(x2),上述第一横坐标与上述第二横坐标在横轴上的间距为第一间距,该第一间距为上述第一横坐标与所有横坐标间距中最小的间距,同理可以得到与上述第一纵坐标(y1)对应的上述第二纵坐标(y2),将上述第二横坐标(x2)和上述第二纵坐标(y2)中对应值最小的一个作为上述第一值。
需要说明的是,可以将ymin-y1>0和xmin-x1>0作为条件,从而确定x2和y2
在该实施方案中,在确定上述第一值的过程中,采用上述顺序数组以及判断条件进行确定,优化了确定上述第一值的过程,减去重新获取M个组件对应组件信息的过程,并且将上述第一坐标信息也保存至上述顺序数组中,通过该方法,不需要重复计算组件的位置信息,减少了页面的回流重绘,进而提高了页面的性能,以及对位置信息确定的效率。
可选地,所述基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置,包括:
在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置;
或者,
在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离大于第二值,则将所述目标位置确定为所述第一组件的停留位置,并控制所述第一组件停留在所述目标位置。
应理解,对于上述第一组件和上述第二组件是否发生重叠,可以采用以下几种方式进行判定:一、获取第二组件的顶点位置信息,判断上述第一组件匹配的第一位置信息是否在顶点位置信息所围成的封闭图形之内,若第一位置信息对应的坐标在顶点位置信息所围成的封闭图形之内,则表示上述第一组件和上述第二组件发生重叠,反之则表示上述第一组件和上述第二组件未发生重叠;二、获取上述第二组件的长宽信息,也可以追加获取上述第一组件的长宽信息,进而判断上述第一组件和上述第二组件是否发生重叠。
其中,在上述第一组件和上述第二组件未重叠,并且上述第一组件和上述第二组件的边界距离小于第二值的情况下,那么可以对上述目标位置进行调整,上述停留位置即为对上述目标位置进行调整之后的位置,调整的方式可以采用以下几种方式:一、将所述第一组件以目标方向(横轴方向或是纵轴方向)移动预设距离,使得上述第一组件和上述第二组件在某一边界处于同一直线上;二、若第一组件横坐标与第二组件横坐标的差小于第二值,那么将上述第一组件的横坐标替换为上述第二组件的横坐标,同理可以对上述第一组件纵坐标进行调整替换。
在该实施方案中,通过对上述第一组件和上述第二组件的边界距离判断,从而对上述第一组件的停留位置进行确定,其中,在上述第一组件和上述第二组件未重叠,并且第一组件和第二组件的边界距离小于第二值的情况下,对上述第一组件的横坐标或是纵坐标进行替换,从而在达到用户目的的同时,减少了用户操作,在另一种情况下,在上述第一组件和上述第二组件未重叠,且第一组件和第二组件的边界距离大于第二值的情况下,将上述目标位置设定为停留位置,从而达到用户自定义组件位置的效果,在本发明实施例的技术方案中,采用引入第二组件的方式对第一组件的停留位置进行确定,能够使得第一组件能够基于第一组件和第二组件的位置关系进行页面布局,提高了对组件控制的易用性,进而提高了对组件的拖拽移动效果。
需要说明的是,在上述第一组件和上述第二组件发生重叠的情况下,可以生成提示信息,该提示信息用于提示用户:上述第一组件与上述第二组件发生重叠,无法将上述第一组件放置于上述目标位置,需要将上述第一组件继续进行拖拽。
可选地,所述若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,包括:
在所述第一组件的横坐标减去所述第二组件的横坐标的值小于所述第二值的情况下,将所述第一组件的横坐标替换为所述第二组件的横坐标;
在所述第一组件的纵坐标减去所述第二组件的横纵坐标的值小于所述第二值的情况下,将所述第一组件的纵坐标替换为所述第二组件的纵坐标。
在该实施方案中,当上述第一组件在上述目标位置的情况下,对上述第一组件进行坐标替换的判断,具体为在第一组件的横坐标减去第二组件的横坐标的值小于第二值的情况下,将第一组件的横坐标替换为第二组件的横坐标;或者在第一组件的纵坐标减去第二组件的横纵坐标的值小于第二值的情况下,将第一组件的纵坐标替换为第二组件的纵坐标,从而完成对上述第一组件的坐标替换,即完成对上述停留位置的确定,通过该方法,能够准确方便地将上述第一组件与同一行或者同一列的组件(第二组件)进行对齐,从而提高了对组件控制的易用性,进而提高了对组件的拖拽移动效果。
作为一种可选的实施方式,在上述第一显示区域添加吸附线和距离线,且在边界距离小于2px时显示吸附线,否则显示距离线,如图2所示,图2是本发明实施例提供的一种吸附线及距离线展示的示意图之一,其中(1)为第一组件,(2)为第二组件,第一组件在上边界的距离小于2px,因此重合于第二组件的上边界设置有吸附线,当用户停止拖拽后,第一组件可以向吸附线方向移动,使得第一组件的上边界与吸附线重合,另外,第一组件的左侧边与第二组件右侧边的边界距离大于2px,因此显示距离线,并且标注有距离20px。
请参见图3,图3是本发明实施例提供的一种吸附线及距离线展示的示意图之二,其中(1)为第一组件,(2)为第二组件,第一组件在左边界的距离小于2px,因此重合于第二组件的左边界设置有吸附线,当用户停止拖拽后,第一组件可以向吸附线方向移动,使得第一组件的左边界与吸附线重合,另外,第一组件的上侧边与第二组件下侧边的边界距离大于2px,因此显示距离线,并且标注有距离20px。
请参见图4,图4是本发明实施例提供的一种吸附线及距离线展示的示意图之三,其中(1)为第一组件,(2)为第二组件,第一组件在上边界和左边界的距离都大于2px,因此显示距离线,并且标注有距离25px和20px。
需要说明的是,在本实施例中,为了防止页面拖拽过程中计算产生卡顿,设置用户的输入设备停留在同一个位置超过 500ms 才去查找新的距离最近的节点,并且重新绘制指引线,当拖拽结束时,消除指引线。
另外,为了防止页面回流重绘,使用 CSS特性将指引线单独设置一个图层,实现指引线上下左右的移动及旋转缩放,指引线中间的文字则使用绝对定位的方式固定到线条的中间。其中,指引线固定为四条线,分布在容器的边界,需要提示用户时就移动到对应的位置。
请参见图5,图5是本发明实施例提供的一种组件控制装置的结构示意图,如图5所示,组件控制装置500,包括:
获取模块501,用于在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
第一确定模块502,用于基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
第二确定模块503,用于基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
可选地,第一确定模块502包括:
第一确定单元,用于从所述顺序数组中确定与所述第一坐标信息对应的第一值;
第二确定单元,用于从所述哈希映射表中确定与所述第一值对应的第二组件。
可选地,所述第一坐标信息包括第一横坐标和第一纵坐标;
所述第一确定单元包括:
确定所述顺序数组中与所述第一横坐标对应的第二横坐标,且第一横坐标与所述第二横坐标在横轴上的间距为第一间距,所述第二横坐标为所述顺序数组中与所述第一横坐标在所述横轴上的间距最小的横坐标;
确定所述顺序数组中与所述第一纵坐标对应的第二纵坐标,且第一纵坐标与所述第二纵坐标在纵轴上的间距为第二间距,所述第二纵坐标为所述顺序数组中与所述第一纵坐标在所述纵轴上的间距最小的纵坐标;
将所述第一间距和所述第二间距中取值最小的确定为第一值。
可选地,第二确定模块503包括:
第一处理单元,用于在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置;
或者,
第二处理单元,用于在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离大于第二值,则将所述目标位置确定为所述第一组件的停留位置,并控制所述第一组件停留在所述目标位置。
可选地,第一处理单元包括:
在所述第一组件的横坐标减去所述第二组件的横坐标的值小于所述第二值的情况下,将所述第一组件的横坐标替换为所述第二组件的横坐标;
在所述第一组件的纵坐标减去所述第二组件的横纵坐标的值小于所述第二值的情况下,将所述第一组件的纵坐标替换为所述第二组件的纵坐标。
本发明实施例还提供了一种电子设备,包括:处理器、存储器及存储在存储器上并可在处理器上运行的程序,程序被处理器执行时实现上述组件控制方法实施例的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。
具体地,参见图6所示,本发明实施例还提供了一种电子设备,包括总线601、收发机602、天线603、总线接口604、处理器605和存储器606。
收发机602,用于在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
处理器605,用于基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
处理器605,还用于基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
在图6中,总线架构(用总线601来代表),总线601可以包括任意数量的互联的总线和桥,总线601将包括由处理器605代表的一个或多个处理器和存储器606代表的存储器的各种电路链接在一起。总线601还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起,这些都是本领域所公知的,因此,本文不再对其进行进一步描述。总线接口604在总线601和收发机602之间提供接口。收发机602可以是一个元件,也可以是多个元件,比如多个接收器和发送器,提供用于在传输介质上与各种其他装置通信的单元。经处理器605处理的数据通过天线603在无线介质上进行传输,进一步,天线603还接收数据并将数据传送给处理器605。
处理器605负责管理总线601和通常的处理,还可以提供各种功能,包括定时,外围接口,电压调节、电源管理以及其他控制功能。而存储器606可以被用于存储处理器605在执行操作时所使用的数据。
可选地,处理器605可以是中央处理器(Central Processing Unit,CPU)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现场可编程逻辑门阵列(Field Programmable Gate Array,FPGA)或复杂可编程逻辑器件(Complex ProgrammableLogic Device,CPLD)。
本发明实施例还提供了一种电子设备,包括:处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序,所述程序被所述处理器执行时实现上述指示方法实施例的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。
本发明实施例还提供一种计算机可读存储介质,计算机可读存储介质上存储有计算机程序,该计算机程序被处理器执行时实现上述组件控制方法实施例的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。其中,所述的计算机可读存储介质,如ROM、RAM、磁碟或者光盘等。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端(可以是手机,计算机,服务器,空调器,或者网络设备等)执行本发明各个实施例所述的方法。
上面结合附图对本发明的实施例进行了描述,但是本发明并不局限于上述的具体实施方式,上述的具体实施方式仅仅是示意性的,而不是限制性的,本领域的普通技术人员在本发明的启示下,在不脱离本发明宗旨和权利要求所保护的范围情况下,还可做出很多形式,均属于本发明的保护之内。

Claims (13)

1.一种组件控制方法,其特征在于,所述方法包括:
在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
2.根据权利要求1所述的方法,其特征在于,所述基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,包括:
从所述顺序数组中确定与所述第一坐标信息对应的第一值;
从所述哈希映射表中确定与所述第一值对应的第二组件。
3.根据权利要求2所述的方法,其特征在于,所述第一坐标信息包括第一横坐标和第一纵坐标;
所述从所述顺序数组中确定与所述第一坐标信息对应的第一值,包括:
确定所述顺序数组中与所述第一横坐标对应的第二横坐标,且第一横坐标与所述第二横坐标在横轴上的间距为第一间距,所述第二横坐标为所述顺序数组中与所述第一横坐标在所述横轴上的间距最小的横坐标;
确定所述顺序数组中与所述第一纵坐标对应的第二纵坐标,且第一纵坐标与所述第二纵坐标在纵轴上的间距为第二间距,所述第二纵坐标为所述顺序数组中与所述第一纵坐标在所述纵轴上的间距最小的纵坐标;
将所述第一间距和所述第二间距中取值最小的确定为第一值。
4.根据权利要求1至3中任一项所述的方法,其特征在于,所述基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置,包括:
在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置;
或者,
在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离大于第二值,则将所述目标位置确定为所述第一组件的停留位置,并控制所述第一组件停留在所述目标位置。
5.根据权利要求4所述的方法,其特征在于,所述若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,包括:
在所述第一组件的横坐标减去所述第二组件的横坐标的值小于所述第二值的情况下,将所述第一组件的横坐标替换为所述第二组件的横坐标;
在所述第一组件的纵坐标减去所述第二组件的横纵坐标的值小于所述第二值的情况下,将所述第一组件的纵坐标替换为所述第二组件的纵坐标。
6.一种组件控制装置,其特征在于,包括:
获取模块,用于在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
第一确定模块,用于基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
第二确定模块,用于基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
7.根据权利要求6所述的组件控制装置,其特征在于,所述第一确定模块包括:
第一确定单元,用于从所述顺序数组中确定与所述第一坐标信息对应的第一值;
第二确定单元,用于从所述哈希映射表中确定与所述第一值对应的第二组件。
8.根据权利要求7所述的组件控制装置,其特征在于,所述第一坐标信息包括第一横坐标和第一纵坐标;
所述第一确定单元包括:
确定所述顺序数组中与所述第一横坐标对应的第二横坐标,且第一横坐标与所述第二横坐标在横轴上的间距为第一间距,所述第二横坐标为所述顺序数组中与所述第一横坐标在所述横轴上的间距最小的横坐标;
确定所述顺序数组中与所述第一纵坐标对应的第二纵坐标,且第一纵坐标与所述第二纵坐标在纵轴上的间距为第二间距,所述第二纵坐标为所述顺序数组中与所述第一纵坐标在所述纵轴上的间距最小的纵坐标;
将所述第一间距和所述第二间距中取值最小的确定为第一值。
9.根据权利要求6至8中任一项所述的组件控制装置,其特征在于,所述第二确定模块包括:
第一处理单元,用于在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离小于第二值,则基于所述第二组件的边界确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置;
或者,
第二处理单元,用于在所述第一组件和所述第二组件未重叠的情况下,若所述第一组件和第二组件的边界距离大于第二值,则将所述目标位置确定为所述第一组件的停留位置,并控制所述第一组件停留在所述目标位置。
10.根据权利要求9所述的组件控制装置,其特征在于,第一处理单元包括:
在所述第一组件的横坐标减去所述第二组件的横坐标的值小于所述第二值的情况下,将所述第一组件的横坐标替换为所述第二组件的横坐标;
在所述第一组件的纵坐标减去所述第二组件的横纵坐标的值小于所述第二值的情况下,将所述第一组件的纵坐标替换为所述第二组件的纵坐标。
11.一种电子设备,其特征在于,包括收发机和处理器,
所述收发机,用于在第一组件的拖拽过程中,当所述第一组件在第一显示区域中的目标位置的停留时长大于预设时长的情况下,获取所述第一组件处于所述目标位置时的第一坐标信息;
所述处理器,用于基于M个组件对应的顺序数组和哈希映射表,确定所述M个组件中与所述第一坐标信息关联的第二组件,所述M个组件为所述第一显示区域所显示的组件,且所述顺序数组和所述哈希映射表均是基于所述M个组件的坐标信息确定的;
所述处理器,还用于基于所述第一组件和所述第二组件的位置关系,确定所述第一组件的停留位置,并将所述第一组件移动至所述停留位置。
12.一种电子设备,其特征在于,包括:处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序,所述程序被所述处理器执行时实现如权利要求1至5中任一项所述的组件控制方法的步骤。
13.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如权利要求1至5中任一项所述的组件控制方法的步骤。
CN202311161825.7A 2023-09-11 2023-09-11 一种组件控制方法、装置、电子设备及存储介质 Active CN116893772B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311161825.7A CN116893772B (zh) 2023-09-11 2023-09-11 一种组件控制方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311161825.7A CN116893772B (zh) 2023-09-11 2023-09-11 一种组件控制方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN116893772A true CN116893772A (zh) 2023-10-17
CN116893772B CN116893772B (zh) 2024-01-26

Family

ID=88315284

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311161825.7A Active CN116893772B (zh) 2023-09-11 2023-09-11 一种组件控制方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN116893772B (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2015138541A (ja) * 2014-01-26 2015-07-30 UiMaker株式会社 ウェブ・コンテンツ生成システム
CN114115643A (zh) * 2021-11-22 2022-03-01 北京光启元数字科技有限公司 一种组件显示方法、装置、电子设备和可读介质
CN114168141A (zh) * 2022-02-11 2022-03-11 北京金堤科技有限公司 一种基于组件的页面处理方法及装置
CN114880061A (zh) * 2022-05-27 2022-08-09 北京百度网讯科技有限公司 页面组件的处理方法及装置、电子设备和介质
CN115509515A (zh) * 2022-08-19 2022-12-23 中国电信股份有限公司 一种组件重用方法、装置、电子设备和存储介质
CN115794091A (zh) * 2022-12-01 2023-03-14 广州虎牙信息科技有限公司 一种交互界面搭建方法、装置、电子设备及存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2015138541A (ja) * 2014-01-26 2015-07-30 UiMaker株式会社 ウェブ・コンテンツ生成システム
CN114115643A (zh) * 2021-11-22 2022-03-01 北京光启元数字科技有限公司 一种组件显示方法、装置、电子设备和可读介质
CN114168141A (zh) * 2022-02-11 2022-03-11 北京金堤科技有限公司 一种基于组件的页面处理方法及装置
CN114880061A (zh) * 2022-05-27 2022-08-09 北京百度网讯科技有限公司 页面组件的处理方法及装置、电子设备和介质
CN115509515A (zh) * 2022-08-19 2022-12-23 中国电信股份有限公司 一种组件重用方法、装置、电子设备和存储介质
CN115794091A (zh) * 2022-12-01 2023-03-14 广州虎牙信息科技有限公司 一种交互界面搭建方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN116893772B (zh) 2024-01-26

Similar Documents

Publication Publication Date Title
EP0034506A2 (en) Image display system
US10628022B2 (en) Method and system for prototyping graphic user interface
CN103793178B (zh) 一种移动设备触摸屏中矢量图形编辑方法
CN111488089B (zh) 人机交互方法、装置、存储介质及电子设备
CN111831182A (zh) 应用图标控制方法、装置及电子设备
CN116893772B (zh) 一种组件控制方法、装置、电子设备及存储介质
CN102750035A (zh) 光标显示位置的确定方法和装置
CN113407075B (zh) 图标整理方法、装置和电子设备
CN111831177B (zh) 应用图标显示方法、装置和电子设备
EP2897037A1 (en) Display apparatus and display control program
CN112596650A (zh) 图表处理方法、装置及电子设备
JP3015264B2 (ja) 情報処理装置及び方法
CN102331902B (zh) 用于触摸屏的操作的系统和方法
CN107832373B (zh) 数据的查找及显示方法及其系统、存储介质、电子设备
CN112764615B (zh) 悬浮球控制方法及装置
CN111489295B (zh) 图像处理方法、电子装置及存储介质
CN112765946B (zh) 图表显示方法、装置及电子设备
US8810570B2 (en) System and method for active selection in a solid model
CN114594899A (zh) 地图显示的调整方法及装置
CN105468273A (zh) 一种用于在设备的触摸屏进行控制操作的方法和装置
US20190163166A1 (en) Information processing device
CN106843698A (zh) 一种交互式滚动条展示方法及电子设备
CN113325986A (zh) 程序控制方法、装置、电子设备和可读存储介质
US7716027B2 (en) Simulation condition input apparatus, computer readable medium, simulation condition input method and computer data signal
CN111813408A (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
GR01 Patent grant
GR01 Patent grant