一种自动调节画板元素的方法、装置、设备及存储介质制造方法及图纸

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

【技术实现步骤摘要】
一种自动调节画板元素的方法、装置、设备及存储介质
本专利技术涉及界面设计
，尤其涉及一种自动调节画板元素的方法、装置、设备及存储介质。
技术介绍
现有技术中，UI设计师在进行画板布局时，需要手动操作才可以调整画板内的各元素的间距及位置，手动操作包括但不限于拖拽尺寸、直接在对应设置面板输入精确参数等方式。当布局好画板里的元素之后，如果调整了其中任意一个元素，则需要相应的手动修改其他的元素，导致设计操作流程繁琐，达成设计目标效率较低。
技术实现思路
有鉴于现有技术的上述缺陷，本专利技术所要解决现有技术中画板中元素的布局需要频繁手动操作，操作流程繁琐，达成设计目标效率低的问题。为实现上述目的，本专利技术提供了一种自动调节画板元素的方法，包括：获取用户输入的画板内元素的布局参数；按照所述布局参数自动调节所述画板内元素；当所述画板内元素出现变化时，根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。在本专利技术的较佳实施方式中，所述元素出现变化包括元素尺寸变化和/或元素数量变化，所述布局参数包括以下至少之一：元素间距、元素排列方式、元素与边框间距。在本专利技术的较佳实施方式中，根据所述布局参数对所述画板内变化后的元素的布局进行自动调节包括：对变化后的元素按照所述元素间距重新调节元素之间距离；和/或对变化后的元素按照所述元素排列方式重新进行排列；和/或对变化后的元素按照所述元素与边框间距重新调节边框距离。在本专利技术的较佳实施方式中，所述元素内包括子元素，所述布局参数还包括子元素与元素边框之间的间距，其中，当所述画板内元素出现变化时，根据所述布局参数对所述画板内变化后的元素的布局进行自动调节，包括：当所述子元素尺寸发生变化时，获取所述子元素尺寸的变化量；利用所述子元素与元素边框之间的间距和所述变化量计算所述元素边框的调节量；按照所述调节量自动调节所述元素边框的大小。在本专利技术的较佳实施方式中，所述子元素包括文本或者图片。在本专利技术的较佳实施方式中，所述获取用户输入的画板内元素的布局参数，包括：接收用户输入的用于确定自动调节的元素范围，所述元素范围包括所要调节的目标元素和目标元素所在的区域；接收用于所述元素范围进行自动调节的请求；基于所述请求显示自动调节参数设置对话框；接收用户基于所述对话框输入的布局参数。在本专利技术的较佳实施方式中，所述按照所述布局参数自动调节所述画板内元素，包括：识别所述元素范围内的元素；获取每个元素的坐标；按照所述布局参数计算每个元素的调节量，所述调节量包括元素的相对位置和大小；按照所述每个元素的调节量调节对应的元素在所述画板内的位置。为实现上述目的，本专利技术提供了一种自动调节画板元素的装置，包括：获取模块，用于获取用户输入的画板内元素的布局参数；第一调节模块，用于按照所述布局参数自动调节所述画板内元素；第二调节模块，用于当所述画板内元素出现变化时，根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。为实现上述目的，本专利技术提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，从而执行上述的自动调节画板元素的方法。为实现上述目的，本专利技术提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使计算机执行上述的自动调节画板元素的方法。本专利技术提供的装置或方法具有以下技术效果：本专利技术通过获取用于自动调节画板内元素的布局参数，在画板内元素变化之后，根据该布局参数自动调节元素的布局，从而实现元素变化只有能够按照原有的设置项进行自动布局，简化了设计员的操作，提高了其工作效率。以下将结合附图对本专利技术的构思、具体结构及产生的技术效果作进一步说明，以充分地了解本专利技术的目的、特征和效果。附图说明图1是本专利技术实施例的软件工具的界面示意图；图2是本专利技术实施例的自动调节画板元素的方法一个较佳实施例的流程图；图3a-3d是本专利技术实施例中自动布局的设置对话框的示意图；图4是本专利技术实施例中经过四周填充布局后的元素示意图；图5a-5h是本专利技术实施例中一个可选的调节过程示意图；图6是本专利技术实施例的自动调节画板元素的装置一个较佳实施例的示意图；图7是本专利技术实施例的电子设备的结构示意图。具体实施方式以下通过特定的具体实例说明本专利技术的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本专利技术的其他优点与功效。本专利技术还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本专利技术的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。需要说明的是，以下实施例中所提供的图示仅以示意方式说明本专利技术的基本构想，遂图示中仅显示与本专利技术中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。为了阐释的目的而描述了本专利技术的一些示例性实施例，需要理解的是，本专利技术可通过附图中没有具体示出的其他方式来实现。本专利技术实施例提供了一种自动调节画板元素的方法，该方法可以通过计算机程序来实现。具体地，基于该方法设计的软件工具可以供设计人员进行使用，设计人员可以通过操作该软件工具实现画板元素的自动布局，从而提高设计效率。该软件工具可以直接应用在web端，从而可以让设计人员在线进行界面布局设计。在介绍本专利技术实施例之前，先介绍本专利技术实施例软件工具的界面，如图1所示，软件工具界面包括：工具栏：这里集合了大部分的功能；图层栏：这里放置了设计稿中所有的图层列表；检视窗：这里可以看到不同图层的具体属性；设计区：这里呈现正在处理的设计稿，主要设计工作在这完成。其中，设计区主要包括：画布：无线延伸；画板：画布上有多个画板，用于固定的区域进行创作；元素：画板上的元素由不同的形状组合，如矩形、圆、线、矢量图形等。元素可以是图标，可以是虚拟按键的图形等。本专利技术实施例提供的一种自动调节画板元素的方法，如图2所示，包括：步骤S101，获取用户输入的画板内元素的布局参数。本专利技术实施例中布局参数可以是用户输入的参数数值，例如间距大小，还可以是用于在设置项中选择的设置项，例如延X轴方向排列。布局参数为用于自动调节元素的参数。一种可选的实施方式中，布局参数可以包括元素间距、元素排列方式和元素与边框间距中至少一个，用以分别自动调节元素之间的间距，和/或多个元素的排列方式，和/或元素与画框边界的距离。本专利技术实施例中的布局参数可以根据需要进行设置，其数量可以根据工具中定义或者设定的参数数量来进行调整和选择。例如，还可以输入元素设置方向、元素之间间距、队列、填充方向、分配方式等，以实现基于内容自动响应的动态画板。用户输入完相应本文档来自技高网...

【技术保护点】
1.一种自动调节画板元素的方法，其特征在于，包括：/n获取用户输入的画板内元素的布局参数；/n按照所述布局参数自动调节所述画板内元素；/n当所述画板内元素出现变化时，根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。/n

【技术特征摘要】
1.一种自动调节画板元素的方法，其特征在于，包括：
获取用户输入的画板内元素的布局参数；
按照所述布局参数自动调节所述画板内元素；
当所述画板内元素出现变化时，根据所述布局参数对所述画板内变化后的元素的布局进行自动调节。


2.如权利要求1所述的自动调节画板元素的方法，其特征在于，所述元素出现变化包括元素尺寸变化和/或元素数量变化，所述布局参数包括以下至少之一：元素间距、元素排列方式、元素与边框间距。


3.如权利要求2所述的自动调节画板元素的方法，其特征在于，根据所述布局参数对所述画板内变化后的元素的布局进行自动调节包括：
对变化后的元素按照所述元素间距重新调节元素之间距离；和/或
对变化后的元素按照所述元素排列方式重新进行排列；和/或
对变化后的元素按照所述元素与边框间距重新调节边框距离。


4.如权利要求3所述的自动调节画板元素的方法，其特征在于，所述元素内包括子元素，所述布局参数还包括子元素与元素边框之间的间距，其中，当所述画板内元素出现变化时，根据所述布局参数对所述画板内变化后的元素的布局进行自动调节，包括：
当所述子元素尺寸发生变化时，获取所述子元素尺寸的变化量；
利用所述子元素与元素边框之间的间距和所述变化量计算所述元素边框的调节量；
按照所述调节量自动调节所述元素边框的大小。


5.如权利要求4所述的自动调节画板元素的方法，其特征在于，所述子元素包括文本或者图片。


6.如权利要求1所述的自动调节画板元素的方法，其特征在...

【专利技术属性】
技术研发人员：张元一，
申请(专利权)人：北京磨刀刻石科技有限公司，
类型：发明
国别省市：北京;11