CN112947922A - 一种自动调节画板元素的方法、装置、设备及存储介质 - Google Patents

一种自动调节画板元素的方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN112947922A
CN112947922A CN202110126478.9A CN202110126478A CN112947922A CN 112947922 A CN112947922 A CN 112947922A CN 202110126478 A CN202110126478 A CN 202110126478A CN 112947922 A CN112947922 A CN 112947922A
Authority
CN
China
Prior art keywords
elements
drawing board
automatically adjusting
layout
layout parameters
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
CN202110126478.9A
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.)
Beijing Modao Carving Technology Co ltd
Original Assignee
Beijing Modao Carving 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 Modao Carving Technology Co ltd filed Critical Beijing Modao Carving Technology Co ltd
Priority to CN202110126478.9A priority Critical patent/CN112947922A/zh
Publication of CN112947922A publication Critical patent/CN112947922A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种自动调节画板元素的方法、装置、设备及存储介质,其中,方法包括:获取用户输入的画板内元素的布局参数;按照布局参数自动调节画板内元素的位置;当画板内元素出现变化时,根据布局参数对画板内变化后的元素的布局进行自动调节。本发明通过设置布局参数之后,在画板内元素变化之后,根据该布局参数自动调节元素的布局,从而实现元素变化只有能够按照原有的设置项进行自动布局,简化了设计员的操作,提高了其工作效率。

Description

一种自动调节画板元素的方法、装置、设备及存储介质
技术领域
本发明涉及界面设计技术领域,尤其涉及一种自动调节画板元素的方法、装置、设备及存储介质。
背景技术
现有技术中,UI设计师在进行画板布局时,需要手动操作才可以调整画板内的各元素的间距及位置,手动操作包括但不限于拖拽尺寸、直接在对应设置面板输入精确参数等方式。当布局好画板里的元素之后,如果调整了其中任意一个元素,则需要相应的手动修改其他的元素,导致设计操作流程繁琐,达成设计目标效率较低。
发明内容
有鉴于现有技术的上述缺陷,本发明所要解决现有技术中画板中元素的布局需要频繁手动操作,操作流程繁琐,达成设计目标效率低的问题。
为实现上述目的,本发明提供了一种自动调节画板元素的方法,包括:获取用户输入的画板内元素的布局参数;按照所述布局参数自动调节所述画板内元素;当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。
在本发明的较佳实施方式中,所述元素出现变化包括元素尺寸变化和/或元素数量变化,所述布局参数包括以下至少之一:元素间距、元素排列方式、元素与边框间距。
在本发明的较佳实施方式中,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节包括:对变化后的元素按照所述元素间距重新调节元素之间距离;和/或对变化后的元素按照所述元素排列方式重新进行排列;和/或对变化后的元素按照所述元素与边框间距重新调节边框距离。
在本发明的较佳实施方式中,所述元素内包括子元素,所述布局参数还包括子元素与元素边框之间的间距,其中,当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节,包括:当所述子元素尺寸发生变化时,获取所述子元素尺寸的变化量;利用所述子元素与元素边框之间的间距和所述变化量计算所述元素边框的调节量;按照所述调节量自动调节所述元素边框的大小。
在本发明的较佳实施方式中,所述子元素包括文本或者图片。
在本发明的较佳实施方式中,所述获取用户输入的画板内元素的布局参数,包括:接收用户输入的用于确定自动调节的元素范围,所述元素范围包括所要调节的目标元素和目标元素所在的区域;接收用于所述元素范围进行自动调节的请求;基于所述请求显示自动调节参数设置对话框;接收用户基于所述对话框输入的布局参数。
在本发明的较佳实施方式中,所述按照所述布局参数自动调节所述画板内元素,包括:识别所述元素范围内的元素;获取每个元素的坐标;按照所述布局参数计算每个元素的调节量,所述调节量包括元素的相对位置和大小;按照所述每个元素的调节量调节对应的元素在所述画板内的位置。
为实现上述目的,本发明提供了一种自动调节画板元素的装置,包括:获取模块,用于获取用户输入的画板内元素的布局参数;第一调节模块,用于按照所述布局参数自动调节所述画板内元素;第二调节模块,用于当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。
为实现上述目的,本发明提供了一种电子设备,包括:至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,从而执行上述的自动调节画板元素的方法。
为实现上述目的,本发明提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机指令,所述计算机指令用于使计算机执行上述的自动调节画板元素的方法。
本发明提供的装置或方法具有以下技术效果:
本发明通过获取用于自动调节画板内元素的布局参数,在画板内元素变化之后,根据该布局参数自动调节元素的布局,从而实现元素变化只有能够按照原有的设置项进行自动布局,简化了设计员的操作,提高了其工作效率。
以下将结合附图对本发明的构思、具体结构及产生的技术效果作进一步说明,以充分地了解本发明的目的、特征和效果。
附图说明
图1是本发明实施例的软件工具的界面示意图;
图2是本发明实施例的自动调节画板元素的方法一个较佳实施例的流程图;
图3a-3d是本发明实施例中自动布局的设置对话框的示意图;
图4是本发明实施例中经过四周填充布局后的元素示意图;
图5a-5h是本发明实施例中一个可选的调节过程示意图;
图6是本发明实施例的自动调节画板元素的装置一个较佳实施例的示意图;
图7是本发明实施例的电子设备的结构示意图。
具体实施方式
以下通过特定的具体实例说明本发明的实施方式,本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用,本说明书中的各项细节也可以基于不同观点与应用,在没有背离本发明的精神下进行各种修饰或改变。需说明的是,在不冲突的情况下,以下实施例及实施例中的特征可以相互组合。
需要说明的是,以下实施例中所提供的图示仅以示意方式说明本发明的基本构想,遂图示中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制,其实际实施时各组件的型态、数量及比例可为一种随意的改变,且其组件布局型态也可能更为复杂。
为了阐释的目的而描述了本发明的一些示例性实施例,需要理解的是,本发明可通过附图中没有具体示出的其他方式来实现。
本发明实施例提供了一种自动调节画板元素的方法,该方法可以通过计算机程序来实现。具体地,基于该方法设计的软件工具可以供设计人员进行使用,设计人员可以通过操作该软件工具实现画板元素的自动布局,从而提高设计效率。该软件工具可以直接应用在web端,从而可以让设计人员在线进行界面布局设计。
在介绍本发明实施例之前,先介绍本发明实施例软件工具的界面,如图1所示,软件工具界面包括:
工具栏:这里集合了大部分的功能;
图层栏:这里放置了设计稿中所有的图层列表;
检视窗:这里可以看到不同图层的具体属性;
设计区:这里呈现正在处理的设计稿,主要设计工作在这完成。
其中,设计区主要包括:画布:无线延伸;画板:画布上有多个画板,用于固定的区域进行创作;元素:画板上的元素由不同的形状组合,如矩形、圆、线、矢量图形等。元素可以是图标,可以是虚拟按键的图形等。
本发明实施例提供的一种自动调节画板元素的方法,如图2所示,包括:
步骤S101,获取用户输入的画板内元素的布局参数。
本发明实施例中布局参数可以是用户输入的参数数值,例如间距大小,还可以是用于在设置项中选择的设置项,例如延X轴方向排列。布局参数为用于自动调节元素的参数。一种可选的实施方式中,布局参数可以包括元素间距、元素排列方式和元素与边框间距中至少一个,用以分别自动调节元素之间的间距,和/或多个元素的排列方式,和/或元素与画框边界的距离。本发明实施例中的布局参数可以根据需要进行设置,其数量可以根据工具中定义或者设定的参数数量来进行调整和选择。例如,还可以输入元素设置方向、元素之间间距、队列、填充方向、分配方式等,以实现基于内容自动响应的动态画板。用户输入完相应的参数之后,启动自动调节功能之前,程序自动获取用户输入的参数。
作为本发明实施例的一种可选实施方式,本发明实施例中,所述获取用户输入的画板内元素的布局参数,包括:
步骤S1011,接收用户输入的用于确定自动调节的元素范围,所述元素范围包括所要调节的目标元素和目标元素所在的区域。
步骤S1012,接收用于所述元素范围进行自动调节的请求。
步骤S1013,基于所述请求显示自动调节参数设置对话框。
步骤S1014,接收用户基于所述对话框输入的布局参数。
本发明实施例中,用户可以根据需要选择自动布局的功能,通过程序调用出用于进行自动布局的对话框,然后通过该对话框来进行布局参数的设置,对于选定的元素范围内的目标元素,将通过布局参数进行自动调节,当该元素范围内出现元素变化时,则自动进行相应的调节。
步骤S102,按照所述布局参数自动调节所述画板内元素。
在获取到用户设置的布局参数之后,按照所述布局参数对画板内元素进行自动调节。本发明实施例中,具体添加自动布局的流程可以是,用于从设计区中框选自动布局的元素,然后点击检视窗中的自动布局项,设置相应的自动布局参数,然后点击确认,框选的自动布局的元素自动按照布局参数进行调节。具体地可以包括调节元素的大小尺寸、位置关系等,从而形成用户所需的元素布局。
作为一种可选实施方式,本发明实施例中所述按照所述布局参数自动调节所述画板内元素可以包括:
步骤S1021,识别所述元素范围内的元素。
步骤S1022,获取每个元素的坐标。每个元素坐标可以是指该元素的几何中心的坐标
步骤S1023,按照所述布局参数计算每个元素的调节量,所述调节量包括元素的相对位置和大小。
步骤S1024,按照所述每个元素的调节量调节对应的元素在所述画板内的位置。
步骤S103,当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。
本发明实施例中,本发明实施例中,所述元素出现变化包括元素尺寸变化和/或元素数量变化,还可以包括元素内文本的变化。
在设置了用于自动调节元素的布局参数之后,当画板内元素出现变化时,可以利用该布局参数自动对画板内的元素布局进行调节,使其调节后的布局方式依旧满足用户当初设置的布局参数。具体地,通过设置的布局参数可以根据元素内容自动响应的动态画板,可以让一个画板根据其内容来动态调整其尺寸,例如,设置文字与卡片区大小的比例,或者与卡片区边界的距离;当文字大小发生变化时,卡片区可以根据其文字自动变化尺寸;设置文本与虚拟按键的大小比例,使得按键跟随文本变化自动增大或缩小;设置元素的排列方式,使得支持快速调整顺序的菜单和列表。
根据本发明实施例,通过获取用于自动调节画板内元素的布局参数,在画板内元素变化之后,根据该布局参数自动调节元素的布局,从而实现元素变化只有能够按照原有的设置项进行自动布局,简化了设计员的操作,提高了其工作效率。
作为本发明实施例的一种可选实施方式,本发明实施例中上述根据所述布局参数对所述画板内变化后的元素的布局进行自动调节的步骤可以包括:对变化后的元素按照所述元素间距重新调节元素之间距离;和/或,对变化后的元素按照所述元素排列方式重新进行排列;和/或,对变化后的元素按照所述元素与边框间距重新调节边框距离。
对于元素间距,往往是针对具有排版需求所提出的设计,例如,在固定大小的画板内,如何在不同数量的元素下达成统一风格的布局方式。对于元素排列方式,尤其是针对元素数量增加或者减少的情况,按照原有的元素排列方式重新进行排列。元素排列方式可以称为自动布局的元素流动方式。如图3a所示,可以设置垂直和水平的排列方式,其中,垂直以沿y轴添加,重新排列元素,例如:朋友圈。水平以沿x轴添加,重新排列元素,例如:导航菜单。
本发明实施例中,对于元素之间的间距,当设置称为自动布局的间距时,可以在元素发生数量变化或者大小变化时,自动修正元素之间的距离,自动对元素的位置进行调节。如图3b中②所示,输入数值以调整自动布局画板中各元素之间的间距。
本发明实施例中,对变化后的元素按照所述元素与边框间距重新调节边框距离,可以是指对元素的四周填充,自动按照设置的元素与边框间来填充元素四周的距离值。
具体地,控制自动布局画板与子元素的边界之间的位置排布,也可以单独调整自动布局上、下、左、右外边距数值。
四周填充:输入一个值后,即可设置均等的填充,或使用CSS速记来设置单个值,如图3c中③所示。设置四周:输入1,2,3,4(top:1,right:2,bottom:3,left:4);设置上下/左右:输入1,2(top:1,right:2,bottom:1,left:2)设置后,对应的子元素与画板之间的位置示意图,如图4所示。
进一步地,本发明实施例中,还可以设置独立填充,也即是设置单独设置上下左右各个值,如图3d所示的④。本发明实施例布局参数还包括对元素的分配方式,可以设置组合分配方式,用于将子元素按照设置的距离贴合在一起;还可以采用自动分配,使得子元素间距会根据自动布局外围改变而变化。可选地,本发明实施例的布局参数还包括对齐方式,使用交互网格控制元素的对齐方式(左上方、顶中心、右上方、左侧中心、中心、右侧中心、左下方、右下方),其中,垂直自动布局采用左,中,右。水平自动布局采用顶部,中心,底部。
作为一种可选实施方式,本发明实施例中,四周填充的具体方式可以是主要针对包含子元素内容的元素,相应地,所述布局参数还包括子元素与元素边框之间的间距,其中,当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节,包括:当所述子元素尺寸发生变化时,获取所述子元素尺寸的变化量;利用所述子元素与元素边框之间的间距和所述变化量计算所述元素边框的调节量;按照所述调节量自动调节所述元素边框的大小。
本发明实施例中,在本发明的较佳实施方式中,所述子元素包括文本或者图片。
对于子元素内容大小发生变化时,可以根据子元素初始大小和变化后的大小结算得到子元素尺寸的变化量;该变化量可以是上下左右四周的各个变化量,其中,子元素与元素之前的间距为设置的自动调节的布局参数,通过该间距和上述计算得到变化量,可以计算得到元素边框的调节量,该调节量为元素上下左右各个方位的调节量,然后在原有的位置基础上,按照该调节量进行自动调节。
根据本发明实施例,通过获取到的布局参数,也即是子元素与元素边框之间的间距作为固定量,将元素边框随子元素尺寸大小的变化而变化,从而实现元素随子元素大小变化的自动调节。
下面通过一个具体操作实例介绍本发明实施例的自动调节画板元素的方法在实际场景中的应用。
以一个简单的按钮为例,当选中之后,可以通过快捷键添加自动布局,然后设置布局参数,例如,Shift+A;还可以选中空白画布上的按钮,点击检视窗的“自动布局”下的+;还可以在按钮上点右键-元素列表右键选择“添加自动布局”。设置自动布局后,文本内容发生改变时,则画板大小也会跟随改变,如图5a所示。
然后再自动布局画板中,添加图片,则根据垂直/水平方向来调整方向,以下图5b为水平以沿x轴添加,重新排列元素位置。
以图5c所示为垂直以沿y轴添加,通常用于朋友圈。
①元素之间的间距,描述了自动布局画板中元素之间的间距,输入数值以调整元素之间的间距,如下图的文字及图片之间的间距;
②③④⑤填充:控制子元素与自动布局画板的边界之间的位置排布,也可以单独调整自动布局上、下、左、右外边距数值。
若想调整元素位置,则通过队列及分配方式进行调整。
以图5d设置项为,队列->中心、分配->组合分配;
以图5e设置项为,队列->中心、分配->自动分配;
若将示例中的文字和图片元素互换,则直接拖拽即可,如图5f所示。
删除元素后,画板内元素会自动根据设置项进行调整,如图5g中,将图片删除后,文字将自动排列居中。
插入元素,可在自由布局画板内同方向,任何位置插入元素,实施渲染位置,如图5h所示。
本发明实施例还提供了一种自动调节画板元素的装置,该装置可以用于执行本发明实施例的自动调节画板元素的方法,如图6所示,该装置包括:
获取模块201,用于获取用户输入的画板内元素的布局参数。
第一调节模块202,用于按照所述布局参数自动调节所述画板内元素。
第二调节模块203,用于当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。
根据本发明实施例,通过获取用于自动调节画板内元素的布局参数,在画板内元素变化之后,根据该布局参数自动调节元素的布局,从而实现元素变化只有能够按照原有的设置项进行自动布局,简化了设计员的操作,提高了其工作效率。
可选地,所述元素出现变化包括元素尺寸变化和/或元素数量变化,所述布局参数包括以下至少之一:元素间距、元素排列方式、元素与边框间距。
可选地,所述第二调节模块包括:第一调节单元,用于对变化后的元素按照所述元素间距重新调节元素之间距离;和/或,第二调节单元,用于对变化后的元素按照所述元素排列方式重新进行排列;和/或,第三调节单元,用于对变化后的元素按照所述元素与边框间距重新调节边框距离。
可选地,所述元素内包括文本,所述布局参数还包括文本与元素边框之间的间距,其中,所述第二调节模块,包括:获取单元,用于当所述文本尺寸发生变化时,获取所述文本尺寸的变化量;计算单元,用于利用所述文本与元素边框之间的间距和所述变化量计算所述元素边框的调节量;第四调节单元,用于按照所述调节量自动调节所述元素边框的大小。
可选地,所述获取模块,包括:第一接收单元,用于接收用户输入的用于确定自动调节的元素范围,所述元素范围包括所要调节的目标元素和目标元素所在的区域;第二接收单元,用于接收用于所述元素范围进行自动调节的请求;显示单元,用于基于所述请求显示自动调节参数设置对话框;第三接收单元,用于接收用户基于所述对话框输入的布局参数。
可选地,所述第一调节模块,包括:识别单元,用于识别所述元素范围内的元素;坐标获取单元,用于获取每个元素的坐标;调节计算单元,用于按照所述布局参数计算每个元素的调节量,所述调节量包括元素的相对位置和大小;第五调节单元,用于按照所述每个元素的调节量调节对应的元素在所述画板内的位置。
可选地,所述布局参数还包括:元素设置方向、队列、填充方向、分配方式。
本发明的一个实施例中,还提供了一种电子设备,其内部结构图可以如图7所示。该电子设备包括通过系统总线连接的处理器、存储器、网络接口。其中,该电子设备的处理器用于提供计算和控制能力。该电子设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该电子设备的网络接口用于与外部的电子设备通过网络连接通信。该计算机程序被处理器执行时以实现一种自动调节画板元素的方法。该电子设备还可以包括显示屏和输入装置,其显示屏可以是液晶显示屏或者电子墨水显示屏,该电子设备的输入装置可以是显示屏上覆盖的触摸层,也可以是电子设备外壳上设置的按键、轨迹球或触控板等。
另一方面,则该电子设备可以不包括显示屏和输入装置,本领域技术人员可以理解,图7中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的电子设备的限定,具体的电子设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一个实施例中,提供了一种电子设备,包括至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,实现以下步骤:
获取用户输入的画板内元素的布局参数;
按照所述布局参数自动调节所述画板内元素;
当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。
在一个实施例中,提供了一种可读存储介质,所述计算机可读存储介质存储有计算机指令,所述计算机指令用于使所述计算机执行:
获取用户输入的画板内元素的布局参数;
按照所述布局参数自动调节所述画板内元素;
当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。
根据本发明实施例,通过获取用于自动调节画板内元素的布局参数,在画板内元素变化之后,根据该布局参数自动调节元素的布局,从而实现元素变化只有能够按照原有的设置项进行自动布局,简化了设计员的操作,提高了其工作效率。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。
上述实施例仅例示性说明本发明的原理及其功效,而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下,对上述实施例进行修饰或改变。因此,举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变,仍应由本发明的权利要求所涵盖。

Claims (10)

1.一种自动调节画板元素的方法,其特征在于,包括:
获取用户输入的画板内元素的布局参数;
按照所述布局参数自动调节所述画板内元素;
当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。
2.如权利要求1所述的自动调节画板元素的方法,其特征在于,所述元素出现变化包括元素尺寸变化和/或元素数量变化,所述布局参数包括以下至少之一:元素间距、元素排列方式、元素与边框间距。
3.如权利要求2所述的自动调节画板元素的方法,其特征在于,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节包括:
对变化后的元素按照所述元素间距重新调节元素之间距离;和/或
对变化后的元素按照所述元素排列方式重新进行排列;和/或
对变化后的元素按照所述元素与边框间距重新调节边框距离。
4.如权利要求3所述的自动调节画板元素的方法,其特征在于,所述元素内包括子元素,所述布局参数还包括子元素与元素边框之间的间距,其中,当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节,包括:
当所述子元素尺寸发生变化时,获取所述子元素尺寸的变化量;
利用所述子元素与元素边框之间的间距和所述变化量计算所述元素边框的调节量;
按照所述调节量自动调节所述元素边框的大小。
5.如权利要求4所述的自动调节画板元素的方法,其特征在于,所述子元素包括文本或者图片。
6.如权利要求1所述的自动调节画板元素的方法,其特征在于,所述获取用户输入的画板内元素的布局参数,包括:
接收用户输入的用于确定自动调节的元素范围,所述元素范围包括所要调节的目标元素和目标元素所在的区域;
接收用于所述元素范围进行自动调节的请求;
基于所述请求显示自动调节参数设置对话框;
接收用户基于所述对话框输入的布局参数。
7.如权利要求6所述的自动调节画板元素的方法,其特征在于,所述按照所述布局参数自动调节所述画板内元素,包括:
识别所述元素范围内的元素;
获取每个元素的坐标;
按照所述布局参数计算每个元素的调节量,所述调节量包括元素的相对位置和大小;
按照所述每个元素的调节量调节对应的元素在所述画板内的位置。
8.一种自动调节画板元素的装置,其特征在于,包括:
获取模块,用于获取用户输入的画板内元素的布局参数;
第一调节模块,用于按照所述布局参数自动调节所述画板内元素;
第二调节模块,用于当所述画板内元素出现变化时,根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。
9.一种电子设备,其特征在于,包括:至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,从而执行如权利要求1-7中任一项所述的自动调节画板元素的方法。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机指令,所述计算机指令用于使计算机执行如权利要求1-7中任一项所述的自动调节画板元素的方法。
CN202110126478.9A 2021-01-29 2021-01-29 一种自动调节画板元素的方法、装置、设备及存储介质 Pending CN112947922A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110126478.9A CN112947922A (zh) 2021-01-29 2021-01-29 一种自动调节画板元素的方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110126478.9A CN112947922A (zh) 2021-01-29 2021-01-29 一种自动调节画板元素的方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
CN112947922A true CN112947922A (zh) 2021-06-11

Family

ID=76239759

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110126478.9A Pending CN112947922A (zh) 2021-01-29 2021-01-29 一种自动调节画板元素的方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN112947922A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117033844A (zh) * 2023-10-07 2023-11-10 之江实验室 一种画布元素布局方法、装置、存储介质及电子设备

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060103667A1 (en) * 2004-10-28 2006-05-18 Universal-Ad. Ltd. Method, system and computer readable code for automatic reize of product oriented advertisements
CN102929603A (zh) * 2012-09-28 2013-02-13 用友软件股份有限公司 界面控件布局装置和界面控件布局方法
US20180074999A1 (en) * 2016-09-14 2018-03-15 Pti Marketing Technologies Inc. Systems and methods for automatically reformatting publications
CN109729409A (zh) * 2018-12-27 2019-05-07 贵州省广播电视信息网络股份有限公司 一种自动布局方法
CN110221899A (zh) * 2019-06-24 2019-09-10 北京奇艺世纪科技有限公司 一种用户界面的调节方法、装置及系统
CN110807164A (zh) * 2019-10-08 2020-02-18 北京字节跳动网络技术有限公司 图像区域的自动调节方法、装置、电子设备及计算机可读存储介质
US20200089396A1 (en) * 2018-09-16 2020-03-19 Adobe Inc. Automatically generating and applying graphical user interface resize-contraints based on design semantics

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060103667A1 (en) * 2004-10-28 2006-05-18 Universal-Ad. Ltd. Method, system and computer readable code for automatic reize of product oriented advertisements
CN102929603A (zh) * 2012-09-28 2013-02-13 用友软件股份有限公司 界面控件布局装置和界面控件布局方法
US20180074999A1 (en) * 2016-09-14 2018-03-15 Pti Marketing Technologies Inc. Systems and methods for automatically reformatting publications
US20200089396A1 (en) * 2018-09-16 2020-03-19 Adobe Inc. Automatically generating and applying graphical user interface resize-contraints based on design semantics
CN109729409A (zh) * 2018-12-27 2019-05-07 贵州省广播电视信息网络股份有限公司 一种自动布局方法
CN110221899A (zh) * 2019-06-24 2019-09-10 北京奇艺世纪科技有限公司 一种用户界面的调节方法、装置及系统
CN110807164A (zh) * 2019-10-08 2020-02-18 北京字节跳动网络技术有限公司 图像区域的自动调节方法、装置、电子设备及计算机可读存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117033844A (zh) * 2023-10-07 2023-11-10 之江实验室 一种画布元素布局方法、装置、存储介质及电子设备
CN117033844B (zh) * 2023-10-07 2024-01-16 之江实验室 一种画布元素布局方法、装置、存储介质及电子设备

Similar Documents

Publication Publication Date Title
US8907990B2 (en) Display system, display method, program, and recording medium
US11016635B2 (en) Layout system for devices with variable display screen sizes and orientations
US4831556A (en) Device capable of displaying window size and position
JP4955505B2 (ja) 携帯端末機及びその画面表示方法
US8743150B2 (en) Display processing device and display control method
US8756528B2 (en) System and method of customizing video display layouts having dynamic icons
DE112010001445T5 (de) Anzeigeeingabegerät
JP5981175B2 (ja) 図面表示装置、及び図面表示プログラム
CN109375972B (zh) 多元素布局的方法、装置、计算机设备和存储介质
CN106033334B (zh) 绘制界面元素的方法和装置
CN113420355B (zh) 楼层处理方法、装置及电子设备
CN112947922A (zh) 一种自动调节画板元素的方法、装置、设备及存储介质
CN114610426A (zh) 一种调整界面布局的方法、装置、设备及存储介质
JP5392794B2 (ja) 計測装置および計測プログラム
CN111381740B (zh) 显示方法以及显示装置
US20140184535A1 (en) Method for Displaying Children Components in a Display that Operates at Different Screen Parameters and Orientations
CN114741016B (zh) 操作方法、装置、电子设备和计算机可读存储介质
CN112000328B (zh) 一种页面可视化编辑方法、装置及设备
CN105474268A (zh) 图像显示系统
CN112035108A (zh) 一种用户界面布局设计方法、系统、终端及介质
CN114327208B (zh) 一种图例展示方法、装置、存储介质及终端
JP6225668B2 (ja) ファイル管理装置及びプログラム
CN111273802A (zh) 一种在屏幕上移动对象的方法及触摸显示装置
JP2019103007A (ja) プログラム、情報処理装置、および情報処理方法
CN114996618A (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