CN114115643A - 一种组件显示方法、装置、电子设备和可读介质 - Google Patents

一种组件显示方法、装置、电子设备和可读介质 Download PDF

Info

Publication number
CN114115643A
CN114115643A CN202111388500.3A CN202111388500A CN114115643A CN 114115643 A CN114115643 A CN 114115643A CN 202111388500 A CN202111388500 A CN 202111388500A CN 114115643 A CN114115643 A CN 114115643A
Authority
CN
China
Prior art keywords
component
target
page
overlapping
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.)
Pending
Application number
CN202111388500.3A
Other languages
English (en)
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.)
Tencent Cloud Computing Beijing Co Ltd
Original Assignee
Beijing Guangqiyuan Digital 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 Beijing Guangqiyuan Digital Technology Co ltd filed Critical Beijing Guangqiyuan Digital Technology Co ltd
Priority to CN202111388500.3A priority Critical patent/CN114115643A/zh
Publication of CN114115643A publication Critical patent/CN114115643A/zh
Pending legal-status Critical Current

Links

Images

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/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus
    • 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
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048Indexing scheme relating to G06F3/048
    • G06F2203/04806Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Landscapes

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

Abstract

本说明书实施例公开了一种组件显示方法、装置、设备和计算机可读介质。所述方法包括:若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;确定所需调整位置的组件为目标组件;基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;将所述目标组件移动到所述目标位置。

Description

一种组件显示方法、装置、电子设备和可读介质
技术领域
本申请涉及计算机领域,尤其涉及一种组件方法、装置、电子设备和计算机可读介质。
背景技术
在日常生活中,针对特定的主题,利用数据可视化的手段来构建的项目可以称为数据可视化项目。数据可视化项目涉及的领域非常广泛,例如,可以涉及政府、医疗、教育、行业、商业等诸多领域。
数据可视化项目中的组件,可以是指页面中的最小单位,即,一个可操控的目标。例如,数据可视化项目中的图表、文本、形状、输入框、滚动条、菜单等都是以组件的形式定义的。
当在不同尺寸的屏幕上展示页面时,页面中的各个组件通常是根据不同的尺寸进行缩放,来适配不同尺寸的屏幕。
但是,如果从大尺寸屏幕中显示的组件缩放到小尺寸屏幕中进行显示,由于缩小了组件的大小,某些组件例如某些文本、按钮等,会出现用户无法点击或无法选中的情况,影响了用户的操作。
发明内容
有鉴于此,本说明书实施例提供一种组件方法、装置、电子设备和计算机可读介质,以避免影响用户对适配后页面中组件的操作。
为解决上述技术问题,本说明书实施例是这样实现的:
一种组件显示方法,包括:
若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定所需调整位置的组件为目标组件;
基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
将所述目标组件移动到所述目标位置。
本发明实施例还提供了一种组件显示装置,包括:
显示模块,用于若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定模块,用于确定所需调整位置的组件为目标组件;
计算模块,用于基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
调整模块,用于将所述目标组件移动到所述目标位置。
本发明实施例还了一种电子设备,包括:
至少一个处理器;以及,
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够:
若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定所需调整位置的组件为目标组件;
基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
将所述目标组件移动到所述目标位置。
本发明实施例还提供了一种计算机可读介质,其上存储有计算机可读指令,所述计算机可读指令可被处理器执行以实现上述组件显示方法。
本说明书一个实施例至少能够达到以下有益效果:本发明实施例直接显示与预设页面的尺寸和位置关系的组件,同时将具有重叠关系的组件移动到与其它组件不具有重叠关系的目标位置,即使从大屏幕上设计的页面在小屏幕上显示时,也能够不影响用户对组件的操作。
附图说明
为了更清楚地说明本说明书实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请中记载的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1示出了本发明实施例公开的一种组件显示方法的流程示意图。
图2示出了本发明实施例中采用本发明实施例之前的界面示意图。
图3示出了本发明实施例中采用了本发明实施例之后的界面示意图。
图4为本说明书实施例提供的对应于图1的一种组件显示装置的结构示意图;
图5为本说明书实施例提供的对应于图4的一种电子设备的结构示意图。
具体实施方式
在不同尺寸屏幕的电子设备中,显示同一个数据可视化项目的页面需要调整页面中组件的尺寸等属性。通常,在大屏的项目中,设计的组件可能有成百上千个,如果在较大设备将页面中的组件编辑布局后,在较小屏幕上进行显示时,如果采用等比例缩放,则可能造成某些组件无法被用户操作的情况,因此,本发明实施例中,针对较大设备编辑布局后的页面在较小设备显示时,基于大设备设计的组件的属性直接显示在较小设备上,同时通过计算移动组件的位置,避免组件相互重叠、遮挡等情况的发生。例如,原在13寸显示屏幕上设计的页面,在9寸显示屏幕上展示时,能够执行本发明实施例中的方法来实现避免组件相互重叠、相互遮挡的同时,提高用户操作的准确性。需要说明的是,本发明实施例中,屏幕尺寸相差不能大于预设尺寸,例如不能超过6寸,从超大屏幕如广场的大屏到手机终端显示方法不包括在本发明实施例的范围内。
下面对本发明实施例进行详细介绍。
图1是本发明实施例公开的一种组件显示方法的流程示意图。
本发明实施例公开了一种组件显示方法,包括:
S100、若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中。
本发明实施例中,如果从大屏幕的电子设备展示的页面在小屏幕的电子设备上进行展示时,能够触发步骤100。其中,可以通过判断当前页面的页面尺寸与预设页面的页面尺寸的关系来确定是否执行后续调整组件的步骤。
本发明实施例中,可以通过获取电子设备屏幕的尺寸来确定当前页面的页面尺寸,可以通过预设页面中的预设值来确定预设页面的页面尺寸。
当确定当前页面的页面尺寸小于预设页面的页面尺寸时,也就是从大屏幕切换到小屏幕显示数据可视化项目的页面时,直接基于预设页面中各个组件的相关属性如尺寸和相互的位置关系来直接显示在当前页面即小屏幕尺寸电子设备的显示界面中。
不同于现有技术中等比例缩放的方式,本发明实施例能够基于预设页面的组件的尺寸和位置关系在当前页面中显示各个组件,使得可操作点能够易于被用户操作。其中,可操作性点指各个组件中能够响应用户操作的位置点,例如文本框、按钮等。
S200、确定所需调整位置的组件为目标组件;
当确定预设页面的尺寸大于当前页面的尺寸时,则可以通过计算确定出目标组件移动到的位置,避免组件之间的相互重叠等情况。
在步骤200中,确定目标组件。其中,目标组件是需要调整位置的组件。
本发明实施例中,需要调整位置的组件可以是指与其它组件具有重叠关系的组件。其中具有重叠关系的组件可以是两个也可以是多个。每个组件可能包括多个操作点,当然,这里的组件也可以是包括有多个子组件的组件组。其中,每一子组件也具有操作点,也能够响应用户的操作。即,本发明实施例中的组件,可以是多个子组件的整体组合。
本发明实施例中,确定出目标组件。其中目标组件可以是具有重叠关系的组件,也可以是具有重要操作点的组件,还可以是具有特定标识的组件。本发明优选以具有重叠关系的组件作为目标组件进行说明。
所述确定所需调整位置的组件为目标组件具体包括:
确定所述当前页面中是否存在具有重叠关系的组件;
若是,则从每一组具有重叠关系的组件中确定至少一个目标组件。
所述从每一组具有重叠关系的组件中确定至少一个目标组件具体包括:
将每一组具有重叠关系的组件中创建时间最晚的一个作为目标组件;
或,将每一组具有重叠关系的组件中与所述当前页面的边界的距离最大的一个作为目标组件。
本发明实施例中,目标组件还可以是具有重叠关系中,创建时间较晚的一个。依据创建时间可以尽可能保持原有的页面样式以及设计方式。
当然,还可以是将距离当前页面的边界距离最大的一个作为目标组件。这里所指的边界是指该组件距离最近的边界。将多个组件中距离边界最大的一个作为目标组件,可以减少移动距离,尽可能保持原有的风格和设计美感。
S300、基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域。
本发明实施例中,目标组件与其它组件可以具有重叠区域,可以基于目标组件与重叠区域的位置关系来计算该目标组件要移动到的目标位置。
其中,计算目标位置的算法有多种,只需要该目标组件移动到目标位置后与其他组件不在具有重叠关系即可。具体计算方式在后面进行详细介绍。
其中,重叠区域和目标组件的位置可以通过目标组件在页面中的坐标以及与该目标组件重叠的组件在页面中的坐标计算得到。可以通过组件的某一角的坐标是否在另一组件的坐标区域范围内来确定是否具有重叠区域。
还可以是通过组件的图层颜色来直接识别出是否具有重叠区域。例如组件A的图层颜色为红色,组件B的图层颜色为黄色,则重叠区域为橙色,基于此来直接得到哪些区域为重叠区域。得到重叠区域后,可以根据重叠区域的像素大小与目标组件的坐标来计算出重叠区域的具体坐标。
可以理解的是,本发明实施例还可以设置具体的区域阈值,当重叠区域的像素大小小于前述区域阈值时,可以排除该具有重叠区域的组件为目标组件。
S400、将所述目标组件移动到所述目标位置。
本发明实施例中,当确定了目标位置后,会将目标组件移动能到目标位置,使得各个组件之间不具有重叠关系。使得用户能够直接操作该目标组件中的操作点。
当然,目标位置超出了当前页面的边界,边界可以是上下左右任意一个方向的边界,还应当进一步进行调整,以使得目标组件与其它组件不具有重叠关系。
步骤400后,所述方法还包括:
若所述目标位置超出所述当前页面的边界,则基于所述目标组件的第一中心点坐标与所述重叠区域的第二中心点坐标的比例确定调整方向;
基于所述调整方向调整所述超出所述当前页面的边界的目标组件的位置,使得所述目标组件不具有与其他组件的重叠关系。
本发明实施例中,如果该目标位置超出边界,还应当进一步调整,来使得目标组件与其它组件不具有重叠关系。调整的过程可以是前述步骤300到步骤400。
通过上述实施例可以看出,本发明实施例直接显示与预设页面的尺寸和位置关系的组件,同时将具有重叠关系的组件移动到与其它组件不具有重叠关系的目标位置,即使从大屏幕上设计的页面在小屏幕上显示时,也能够不影响用户对组件的操作。
前述实施例中介绍了计算目标位置,下面分为几种计算方式进行详细介绍。
第一种,所述基于所述目标组件在重叠区域的位置计算目标位置具体包括:
确定所述目标组件的第一中心点坐标以及所述重叠区域的第二中心点坐标;
基于所述第一中心点坐标和所述第二中心点坐标计算所述目标组件的移动方向和移动距离;
根据所述移动方向以及所述移动距离计算目标位置。
本发明实施例中,可以依据目标组件的中心点以及重叠区域的中心点来确定出目标组件所需要移动到的目标位置。
其中,目标组件的中心点以及重叠区域的中心点坐标可以通过目标组件在页面中的坐标来计算得出,通常组件为矩形,如果重叠区域是其它图形,例如圆形、椭圆形、菱形、不规则图形时,可以将该图形的一个点作为原点,通过预设公式计算出该图像的重心,该重心点的坐标作为该图像的中心点坐标。该预设公式属于常规物理公式,在此不赘述。
本发明实施例中,当确定了第一中心点坐标以及第二中心点坐标后,计算出组件的移动方向和移动距离,然后基于该移动方向和移动距离计算目标位置。
其中,计算移动方向可以通过如下方式。
组件重叠:组件A、组件B、重叠区域C(以下简称A、B、C)。则:
i.求出A中心点到C中心点的水平和垂直的位移距离,分别除以A宽高的一半,得到水平、垂直偏移比;
公式如下(中心点=center,水平距离=x,垂直距离=y,宽=width,高=height)。
ii.水平比=(C.center.x-A.center.x)/(A.width/2);其中,C.center.x用于表征重叠区域C的水平距离,A.center.x用于表征组件A的水平距离,A.width用于表征组件A的宽。
iii.垂直比=(C.center.y-A.center.y)/(A.height/2);其中,C.center.y用于表征重叠区域C的垂直距离,A.center.y用于表征组件A的垂直距离,A.height用于表征组件A的高。
iv.绝对值(abs)越大,表示C离A的边界移动占比越小,反之则反。
v.如果abs(水平比)>=abs(垂直比),B水平移动,否则B垂直移动,正值代表B向右和下移动,负值代表B向左和上移动。
第二种,所述基于所述目标组件在重叠区域的位置计算目标位置具体包括:
确定所述目标组件所在重叠区域的长度和宽度;
基于所述长度和所述宽度计算所述目标组件移动的最短距离;
依据所述最短距离以及所述目标组件的第一中心点坐标计算目标位置。
本发明实施例中,可以仅依据重叠区域的长度和宽度来计算出位移距离。
可以是将长度和宽度中距离短的一个作为位移距离,将目标组件的第一中心点与该目标组件重叠的组件的位置关系确定位移方向,来计算目标位置。
此种方式优先应用重叠区域为矩形的场景中。
第三种,所述基于所述目标组件在重叠区域的位置计算目标位置具体包括:
确定与所述目标组件的第一中心点坐标距离最短的可放置组件区域的第三中心点坐标;所述可放置组件区域用于表征所述当前页面中能够配置组件的区域;
依据所述第三中心点坐标计算目标位置。
本发明实施例中,可以预先配置可放置组件区域,当在小屏幕中显示时,该可放置区间区域的绝对坐标不会变动,因此,可以基于目标组件的第一中心点坐标与可放置组件区域的第三中心点坐标的距离来确定出距离最短的第三中心点,基于该第三中心点来确定出目标位置。
此种方式能够减少计算量,但可能造成移动后的位置仍具有重叠区域,适合布置的组件较为稀疏的场景。
当然,其他能够计算出目标位置的方式也可以基于本发明中上述几种方式合理使用,在此不能穷举,只要能够基于目标组件以及重叠区域确定出目标位置即可。
本发明实施例中,若移动后仍存在重叠区域,还应当进一步进行调整。在上述实施例的基础上,所述方法还包括:
若确定移动后的目标组件与其他组件具有重叠关系时,调整所述移动后的目标组件的属性参数,使得所述移动后的目标组件不具有与其他组件的重叠关系。
本发明实施例中,可以根据前述实施例中提到的垂直比和水平比进一步调整移动到目标位置的目标组件。
具体包括:
i.如果是超出左右边界,则根据垂直比正负向上下移动。
ii.如果是超出上下边界,则根据水平比正负向左右移动。
当然,还可以是根据剩余空间中存在的可放置区间区域作为进一步移动的位置。
可以理解的是,前述所述的可放置区间区域的长宽面积等参数可以作为目标组件是否能够移动到该区域的依据,在此不进行赘述。
为了便于理解,图2示出了本发明实施例中采用本发明实施例之前的界面示意图。图3示出了本发明实施例中采用了本发明实施例之后的界面示意图。
图2中,组件1(201)与组件2(202)具有重叠关系。组件3与组件4具有重叠关系,组件5与组件6具有重叠关系,组件7与组件8具有重叠关系。界面300为当前页面所展示的页面内容。可以理解的是,界面300中的各个组件是从大尺寸电子设备展示内容在小尺寸电子设备展示后的内容。各个组件依据预设页面的大小和位置关系直接进行了展示,而并未进行缩放处理。
通过图3可以看出,通过本发明实施例,各个具有重叠关系的组件已经自动分开,且相互之间的位置关系和布局未有较大的变动,仍保留项目设计风格美感,降低设计师工作量,扩大项目在不同设备的应用。
基于同样的思路,本说明书实施例还提供了上述方法对应的装置。图4为本说明书实施例提供的对应于图1的一种项目生成装置的结构示意图。如图2所示,该装置可以包括:
显示模块41,用于若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定模块42,用于确定所需调整位置的组件为目标组件;
计算模块43,用于基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
调整模块44,用于将所述目标组件移动到所述目标位置。
可以理解,上述的各模块是指计算机程序或者程序段,用于执行某一项或多项特定的功能。此外,上述各模块的区分并不代表实际的程序代码也必须是分开的。
基于同样的思路,本说明书实施例还提供了上述方法对应的设备。
图5为本说明书实施例提供的对应于图1的一种电子设备的结构示意图。如图5所示,电子设备500可以包括:
至少一个处理器510;以及,
与所述至少一个处理器通信连接的存储器530;其中,
所述存储器530存储有可被所述至少一个处理器510执行的指令520,所述指令被所述至少一个处理器510执行,以使所述至少一个处理器510能够:
若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定所需调整位置的组件为目标组件;
基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
将所述目标组件移动到所述目标位置。
基于同样的思路,本说明书实施例还提供了上述方法对应的计算机可读介质。计算机可读介质上存储有计算机可读指令,所述计算机可读指令可被处理器执行以实现以下方法:
若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定所需调整位置的组件为目标组件;
基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
将所述目标组件移动到所述目标位置。
上述对本说明书特定实施例进行了描述,在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的或者可能是有利的。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可。
本说明书实施例提供的装置、电子设备与方法是对应的,因此,装置、电子设备也具有与对应方法类似的有益技术效果,由于上面已经对方法的有益技术效果进行了详细说明,因此,这里不再赘述对应装置、设备的有益技术效果。
在20世纪90年代,对于一个技术的改进可以很明显地区分是硬件上的改进(例如,对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而,随着技术的发展,当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此,不能说一个方法流程的改进就不能用硬件实体模块来实现。例如,可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray,FPGA))就是这样一种集成电路,其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字符系统“集成”在一片PLD上,而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且,如今,取代手工地制作集成电路芯片,这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现,它与程序开发撰写时所用的软件编译器相类似,而要编译之前的原始代码也得用特定的编程语言来撰写,此称之为硬件描述语言(Hardware Description Language,HDL),而HDL也并非仅有一种,而是有许多种,如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等,目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚,只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中,就可以很容易得到实现该逻辑方法流程的硬件电路。
控制器可以按任何适当的方式实现,例如,控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit,ASIC)、可编程逻辑控制器和嵌入微控制器的形式,控制器的例子包括但不限于以下微控制器:ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320,存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道,除了以纯计算机可读程序代码方式实现控制器以外,完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件,而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至,可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
上述实施例阐明的系统、装置、模块或单元,具体可以由计算机芯片或实体实现,或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的,计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。
为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字符多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带式磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请,在这些分布式计算环境中,由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
以上所述仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。

Claims (11)

1.一种组件显示方法,其特征在于,包括:
若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定所需调整位置的组件为目标组件;
基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
将所述目标组件移动到所述目标位置。
2.根据权利要求1所述的方法,其特征在于,所述确定所需调整位置的组件为目标组件具体包括:
确定所述当前页面中是否存在具有重叠关系的组件;
若是,则从每一组具有重叠关系的组件中确定至少一个目标组件。
3.根据权利要求2所述的方法,其特征在于,所述从每一组具有重叠关系的组件中确定至少一个目标组件具体包括:
将每一组具有重叠关系的组件中创建时间最晚的一个作为目标组件;
或,将每一组具有重叠关系的组件中与所述当前页面的边界的距离最大的一个作为目标组件。
4.根据权利要求1所述的方法,其特征在于,所述基于所述目标组件在重叠区域的位置计算目标位置具体包括:
确定所述目标组件的第一中心点坐标以及所述重叠区域的第二中心点坐标;
基于所述第一中心点坐标和所述第二中心点坐标计算所述目标组件的移动方向和移动距离;
根据所述移动方向以及所述移动距离计算目标位置。
5.根据权利要求1所述的方法,其特征在于,所述基于所述目标组件在重叠区域的位置计算目标位置具体包括:
确定所述目标组件所在重叠区域的长度和宽度;
基于所述长度和所述宽度计算所述目标组件移动的最短距离;
依据所述最短距离以及所述目标组件的第一中心点坐标计算目标位置。
6.根据权利要求1所述的方法,其特征在于,所述基于所述目标组件在重叠区域的位置计算目标位置具体包括:
确定与所述目标组件的第一中心点坐标距离最短的可放置组件区域的第三中心点坐标;所述可放置组件区域用于表征所述当前页面中能够配置组件的区域;
依据所述第三中心点坐标计算目标位置。
7.根据权利要求1所述的方法,其特征在于,所述方法还包括:
若确定移动后的目标组件与其他组件具有重叠关系时,调整所述移动后的目标组件的属性参数,使得所述移动后的目标组件不具有与其他组件的重叠关系。
8.根据权利要求1所述的方法,其特征在于,所述方法还包括:
若所述目标位置超出所述当前页面的边界,则基于所述目标组件的第一中心点坐标与所述重叠区域的第二中心点坐标的比例确定调整方向;
基于所述调整方向调整所述超出所述当前页面的边界的目标组件的位置,使得所述目标组件不具有与其他组件的重叠关系。
9.一种组件显示装置,其特征在于,包括:
显示模块,用于若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定模块,用于确定所需调整位置的组件为目标组件;
计算模块,用于基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
调整模块,用于将所述目标组件移动到所述目标位置。
10.一种电子设备,包括:
至少一个处理器;以及,
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够:
若确定当前页面的页面尺寸小于预设页面的页面尺寸时,基于预设页面中各个组件的尺寸和位置关系将所述各个组件显示在所述当前页面中;
确定所需调整位置的组件为目标组件;
基于所述目标组件在重叠区域的位置计算目标位置;所述重叠区域为所述当前页面中至少两个组件具有重叠关系的页面区域;
将所述目标组件移动到所述目标位置。
11.一种计算机可读介质,其上存储有计算机可读指令,所述计算机可读指令可被处理器执行以实现权利要求1至8中任一项所述的组件显示方法。
CN202111388500.3A 2021-11-22 2021-11-22 一种组件显示方法、装置、电子设备和可读介质 Pending CN114115643A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111388500.3A CN114115643A (zh) 2021-11-22 2021-11-22 一种组件显示方法、装置、电子设备和可读介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111388500.3A CN114115643A (zh) 2021-11-22 2021-11-22 一种组件显示方法、装置、电子设备和可读介质

Publications (1)

Publication Number Publication Date
CN114115643A true CN114115643A (zh) 2022-03-01

Family

ID=80439522

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111388500.3A Pending CN114115643A (zh) 2021-11-22 2021-11-22 一种组件显示方法、装置、电子设备和可读介质

Country Status (1)

Country Link
CN (1) CN114115643A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115599809A (zh) * 2022-11-16 2023-01-13 泽恩科技有限公司(Cn) 基于粒子群优化算法的数据库布局设计方法
CN116893772A (zh) * 2023-09-11 2023-10-17 中移(苏州)软件技术有限公司 一种组件控制方法、装置、电子设备及存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115599809A (zh) * 2022-11-16 2023-01-13 泽恩科技有限公司(Cn) 基于粒子群优化算法的数据库布局设计方法
CN116893772A (zh) * 2023-09-11 2023-10-17 中移(苏州)软件技术有限公司 一种组件控制方法、装置、电子设备及存储介质
CN116893772B (zh) * 2023-09-11 2024-01-26 中移(苏州)软件技术有限公司 一种组件控制方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN108228050B (zh) 一种图片缩放方法、装置以及电子设备
CN114115643A (zh) 一种组件显示方法、装置、电子设备和可读介质
CN106484080B (zh) 一种显示界面的展示方法、装置及设备
CN110389810B (zh) 一种在虚拟画布上快速摆放ui控件的方法、装置及设备
KR102591542B1 (ko) 테이블 처리 방법, 장치, 스마트 인터랙티브 태블릿 및 저장 매체
TW201918854A (zh) 視圖捲動方法、裝置以及電子設備
CN110806847A (zh) 一种分布式多屏幕显示方法、装置、设备及系统
CN107766703B (zh) 水印添加处理方法、装置及客户端
US20140325404A1 (en) Generating Screen Data
CN111428455B (zh) 表格管理方法、装置、设备及存储介质
CN116245051A (zh) 一种仿真软件渲染方法、装置、存储介质及电子设备
CN108446152B (zh) 页面显示方法及装置
CN108073339B (zh) 浮层展示方法、客户端和电子设备
CN114283268A (zh) 一种三维模型处理方法、装置、设备及介质
CN113986176A (zh) 一种颜色显示方法、装置、电子设备和可读介质
CN112000329B (zh) 一种数据展示方法、装置、设备及介质
CN113360154A (zh) 一种页面构建方法、装置、设备和可读介质
CN113407029B (zh) 一种页面对象状态信息确定方法、装置、设备和可读介质
CN110262732B (zh) 一种图片移动方法和装置
CN111061978A (zh) 页面跳转方法及装置
CN114398034A (zh) 一种可视化数据显示方法、装置和可读介质
CN116909667A (zh) 一种显示页面元素的方法、装置、设备及介质
CN113721911B (zh) 虚拟场景的显示比例的控制方法、介质和设备
WO2023210352A1 (ja) 情報処理装置、情報処理方法、及びプログラム
CN116975485A (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
TA01 Transfer of patent application right

Effective date of registration: 20220726

Address after: 100190 Beijing Haidian District Zhichun Road 49 No. 3 West 309

Applicant after: TENCENT CLOUD COMPUTING (BEIJING) Co.,Ltd.

Address before: 100102 Room 203, 14 and 19, floor 2, building 19, Wangjing Dongyuan seventh district, Chaoyang District, Beijing

Applicant before: Beijing Guangqiyuan Digital Technology Co.,Ltd.

TA01 Transfer of patent application right