CN112667235A - 可视化布局编辑实现方法、装置和电子设备 - Google Patents

可视化布局编辑实现方法、装置和电子设备 Download PDF

Info

Publication number
CN112667235A
CN112667235A CN202011543407.0A CN202011543407A CN112667235A CN 112667235 A CN112667235 A CN 112667235A CN 202011543407 A CN202011543407 A CN 202011543407A CN 112667235 A CN112667235 A CN 112667235A
Authority
CN
China
Prior art keywords
editing
information
control
controls
layout
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
CN202011543407.0A
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 Pixel Software Technology Co Ltd
Original Assignee
Beijing Pixel 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 Beijing Pixel Software Technology Co Ltd filed Critical Beijing Pixel Software Technology Co Ltd
Priority to CN202011543407.0A priority Critical patent/CN112667235A/zh
Publication of CN112667235A publication Critical patent/CN112667235A/zh
Pending legal-status Critical Current

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供一种可视化布局编辑实现方法、装置和电子设备,在进行编辑时,可以获得针对预先创建的多个编辑控件中的一个或多个的控制信息,并获得相应的布局新。基于布局信息、控制信息以及选择的一个或多个编辑控件可生成对应的效果图。同时,将得到的效果图展示在预先创建的效果显示窗口中的画布上,并基于效果图生成对应的可扩展编辑文件。如此,在编辑的同时,设计者可以及时看到编辑的效果图,无需进入实际的应用界面进行查看,可提高设计者的编辑便利性。

Description

可视化布局编辑实现方法、装置和电子设备
技术领域
本申请涉及编辑工具技术领域,具体而言,涉及一种可视化布局编辑实现方法、装置和电子设备。
背景技术
游戏内部或应用呈现展示系统内部中,二维界面显示是由独立引擎通过渲染文件信息渲染出来的。二维界面的设计者需要一种方式按照需求导出对应的渲染文件。但是,现有的编辑器中,设计者往往仅能进行渲染文件的编辑,在编辑之后需要进入实际的显示界面查看对应的显示效果。这样的方式给设计者带来诸多不便。
发明内容
本申请的目的包括,例如,提供了一种可视化布局编辑实现方法、装置和电子设备,其能够提高设计者的编辑便利性。
本申请的实施例可以这样实现:
第一方面,本申请实施例提供一种可视化布局编辑实现方法,所述方法包括:
获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息;
根据所述控制信息、所述布局信息以及所述一个或多个编辑控件生成对应的效果图;
将所述效果图展示在预先创建的效果显示窗口中的画布上,并基于所述效果图生成对应的可扩展编辑文件。
在可选的实施方式中,各所述编辑控件具有属性信息;
所述获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息的步骤,包括:
获取待适配的终端设备的显示屏信息;
根据所述显示屏信息生成对应的布局信息;
获得基于预先创建的多个编辑控件中的一个或多个编辑控件的属性信息所确定的目标属性;
根据所述一个或多个编辑控件对应的目标属性得到所述控制信息。
在可选的实施方式中,所述一个或多个编辑控件中包含按钮控件;
所述获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息的步骤,还包括:
获得预先创建的声音文件;
建立所述按钮控件的点击事件和所述声音文件的播放事件的关联信息;
将所述关联信息添加至所述控制信息中。
在可选的实施方式中,所述方法还包括:
预先创建控件显示窗口和属性显示窗口;
将预先创建的多个编辑控件划分为多个类别,并对所属相同类别的编辑控件进行等级设置;
根据各所述编辑控件所属的类别以及等级,将所述多个编辑控件以树形结构形式显示在所述控件显示窗口;
设置各所述编辑控件的属性信息,并将各所述编辑控件的属性信息显示在所述属性显示窗口。
在可选的实施方式中,所述方法还包括:
记录获取的控制信息包含的多步子操作中各所述子操作对应的操作信息;
将各所述子操作对应的操作信息记录在预先创建的操作记录窗口。
在可选的实施方式中,所述方法还包括:
获取待适配的终端设备的显示屏的分辨率信息;
根据所述分辨率信息对所述效果显示窗口中的画布进行调整。
在可选的实施方式中,所述属性信息包括位置信息、显影信息、对齐方式、透明度。
第二方面,本申请实施例提供一种可视化布局编辑实现装置,所述装置包括:
获取模块,用于获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息;
生成模块,用于根据所述控制信息、所述布局信息以及所述一个或多个编辑控件生成对应的效果图;
展示模块,用于将所述效果图展示在预先创建的效果显示窗口中的画布上,并基于所述效果图生成对应的可扩展编辑文件。
在可选的实施方式中,各所述编辑控件具有属性信息,所述获取模块用于:
获取待适配的终端设备的显示屏信息;
根据所述显示屏信息生成对应的布局信息;
获得针对预先创建的多个编辑控件中的一个或多个编辑控件的属性信息所确定的目标属性;
根据所述一个或多个编辑控件对应的目标属性得到所述控制信息。
第三方面,本申请实施例提供一种电子设备,包括一个或多个存储介质和一个或多个与存储介质通信的处理器,一个或多个存储介质存储有处理器可执行的机器可执行指令,当电子设备运行时,处理器执行所述机器可执行指令,以执行上述任意一项所述的可视化布局编辑实现方法。
本申请实施例的有益效果包括,例如:
本申请提供的可视化布局编辑实现方法、装置和电子设备,在进行编辑时,可以获得针对预先创建的多个编辑控件中的一个或多个的控制信息,并获得相应的布局新。基于布局信息、控制信息以及选择的一个或多个编辑控件可生成对应的效果图。同时,将得到的效果图展示在预先创建的效果显示窗口中的画布上,并基于效果图生成对应的可扩展编辑文件。如此,在编辑的同时,设计者可以及时看到编辑的效果图,无需进入实际的应用界面进行查看,可提高设计者的编辑便利性。
附图说明
为了更清楚地说明本申请实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本申请的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。
图1为本申请实施例提供的可视化布局编辑实现方法的流程图;
图2为本申请实施例提供的效果显示窗口的示意图;
图3为本申请实施例提供的控件显示窗口的示意图;
图4为本申请实施例提供的属性显示窗口的示意图;
图5为本申请实施例提供的可视化布局编辑实现方法中,控制信息获取方法的流程图;
图6为本申请实施例提供的可视化布局编辑实现方法中,控制信息获取方法的另一流程图;
图7为本申请实施例提供的可视化布局编辑实现方法中,操作信息获取方法的流程图;
图8为本申请实施例提供的操作记录显示窗口的示意图;
图9为本申请实施例提供的可视化布局编辑实现方法中,调整方法的流程图;
图10为本申请实施例提供的文件浏览窗口的示意图;
图11为本申请实施例提供的可视化布局编辑实现装置的功能模块框图;
图12为本申请实施例提供的电子设备的结构框图。
图标:100-可视化布局编辑实现装置;110-获取模块;120-生成模块;130-展示模块;210-处理器;220-存储器;230-总线。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本申请一部分实施例,而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。
因此,以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围,而是仅仅表示本申请的选定实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。
在本申请的描述中,需要说明的是,在不冲突的情况下,本申请的实施例中的特征可以相互结合。
图1示出了本申请实施例提供的可视化布局编辑实现方法的流程示意图,该可视化布局编辑实现方法应用于计算机设备,基于计算机设备实现该可视化布局编辑实现方法。应当理解,在其它实施例中,本实施例的可视化布局编辑实现方法其中部分步骤的顺序可以根据实际需要相互交换,或者其中的部分步骤也可以省略或删除。该可视化布局编辑实现方法的详细步骤介绍如下。
步骤S110,获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息。
步骤S120,根据所述控制信息、所述布局信息以及所述一个或多个编辑控件生成对应的效果图。
步骤S130,将所述效果图展示在预先创建的效果显示窗口中的画布上,并基于所述效果图生成对应的可扩展编辑文件。
本实施例所提供的可视化布局编辑实现方法可以用于实现例如,应用程序页面、网页界面或游戏界面等的布局设计。本实施例中,预先可创建多个编辑控件,编辑控件为后续显示在相关界面上的界面元素,例如,可以包括但不限于图片、按钮、滑动列表、文本控件、输入框、特效元素等。
在进行相关界面的设计时,界面上应当具有相应的编辑控件,并且,界面上的编辑控件应当按照一定的布局进行排布。此外,各个编辑控件还具有不同的属性信息,编辑控件布局于相关界面上时,以不同的属性信息进行显示时相应地呈现不同的显示效果。
因此,在本实施例中,可获得从预先创建的多个编辑控件中所选择的一个或多个编辑控件,并且,获得对该一个或多个编辑控件的控制信息。此外,获得相应的布局信息。基于获得的控制信息、布局信息以及选择的一个或多个编辑控件即可生成对应的效果图。
现有技术中,在进行界面设计时,一般是按照需求导出对应的XML(eXtensibleMarkup Language,可扩展标记语言)文件,但是采用直接编写XML文件的方式不能直观看到设计效果,对于设计者来说带来很多不便。而本实施例中,在基于上述信息得到对应的效果图之后,会将得到的效果图展示在预先创建的效果显示窗口中的画布上,如图2中所示。并基于得到的效果图生成对应的可扩展编辑文件,如XML文件。
如此,本实施例中,在进行界面设计时,最终展示给设计者的不仅仅只有不可视的XML文件,还会在窗口相应地展示出效果图。设计者可随时查看编辑过程中各个阶段的效果图。无需进入实际的应用界面进行查看,大大地提高了设计者的编辑便利性。
由上述可知,本实施例中,预先创建有多个编辑控件,而各个编辑控件具有不同的属性信息。编辑控件的属性信息可影响编辑控件显示在界面上的显示效果。为了便于对编辑控件的管理以及对编辑控件的属性信息的管理,因此,本实施例中,还可预先创建控件显示窗口和属性显示窗口,以分别用于编辑控件和编辑控件的属性信息的管理。
本实施例中,预先创建多个编辑控件后,可将预先创建的多个编辑控件划分为多个类别,并对所属相同类别的编辑控件进行等级设置。其中,所谓的等级设置仅仅是指将编辑控件按一定顺序进行排序,并不用于指示各个编辑控件的相对重要性。
再根据各个编辑控件所属的类型以及对应的等级,将多个编辑控件以树形结构形式显示在控件显示窗口,如图3中所示。如此,多个编辑控件以树形结构形式进行显示,可以便于后续进行界面设计时对于编辑控件的选择获取。
此外,可设置各个编辑控件的属性信息,将各个编辑控件的属性信息显示在属性显示窗口,如图4所示。如此,直接在属性显示窗口中显示各个编辑控件的属性信息,后续在编辑设计时,可以直接基于显示的属性信息进行选择、或者是操作即可进行属性信息的确定,便于设计者的设计便利性。
考虑到最终设计的界面需要应用到不同的终端设备上,例如智能手机、平板电脑等。而不同的终端设备的显示屏在尺寸、形状上具有多种不同的样式,若仅仅设计统一的应用程序界面、游戏界面等,可能并不能很好地适配不同尺寸、样式的终端设备。因此,请参阅图5,本实施例中,通过以下方式获得布局信息和控制信息。
步骤S111,获取待适配的终端设备的显示屏信息。
步骤S112,根据所述显示屏信息生成对应的布局信息。
步骤S113,获得基于预先创建的多个编辑控件中的一个或多个编辑控件的属性信息所确定的目标属性。
步骤S114,根据所述一个或多个编辑控件对应的目标属性得到所述控制信息。
本实施例中,待适配的终端设备即为设计的界面后续需要适用于的终端设备,终端设备的显示屏信息包括如终端设备的显示屏的宽度、长度、屏幕是否为异形等,例如在显示屏的上端边沿是否有向下延伸的黑块,即所谓的“刘海屏”。
基于待适配的终端设备的显示屏信息可设计得到对应的布局信息,例如,根据显示屏的宽度设计相关界面在宽度上的布局,根据显示屏的长度设计相关界面在长度上的布局。此外,若待适配的终端设备包括上述的黑块,则在设计界面的布局时,则需要将界面的与黑块的对应区域留出来,以避免在对应黑块的区域放置编辑控件而导致无法正常显示的问题。
由上述可知,各个编辑控件具有不同的属性信息,不同的属性信息可影响编辑控件在界面上的显示效果。编辑控件具有的属性信息可以是,如位置信息、显影信息、对齐方式、透明度等。在确定需要显示在界面上的编辑控件后,需确定用于决定编辑控件的显示效果的属性信息,即目标属性。根据所确定的一个或多个编辑控件对应的目标属性,即可得到针对编辑控件的控制信息。
在实际应用中,相关界面上一般均包含按钮,按钮在被触发时一般是触发切换至下一界面。为了提高用户在触发按钮进入下一界面时的操控感,在本实施例中,请参阅图6,还可通过以下方式来进行控制信息的设计,从而达到该效果:
步骤S115,获得预先创建的声音文件。
步骤S116,建立所述按钮控件的点击事件和所述声音文件的播放事件的关联信息。
步骤S117,将所述关联信息添加至所述控制信息中。
本实施例中,预先可创建声音文件,该声音文件的格式可以是WAV文件、MIDI文件、VOC文件等等。该声音文件中可存放预先录制的音频信息。在该声音文件被触发播放时,相应地将播放该声音文件中所存放的音频信息。
此外,在所设计的按钮控件被点击时,将触发切换至下一界面或者是其他的切换操作。因此,本实施例中,可将按钮控件的点击事件与声音文件的播放事件进行关联,并将关联信息添加至控制信息中。
如此,在进行相关界面的设计时,在设计所设计的按钮控件在被点击时,将相应地触发声音文件的播放,从而在按钮控件被点击的同时,进行声音文件的播放。提高用户在操作界面元素时的操控感。
此外,本实施例中,考虑到在设计时,设计者针对编辑控件的控制一般是一系列的操作,为了便于对设计者的操作进行记录,以便于后续修改后恢复等,请参阅图7,本实施例所提供的可视化布局编辑实现方法还可以包括以下步骤:
步骤S210,记录获取的控制信息包含的多步子操作中各所述子操作对应的操作信息。
步骤S220,将各所述子操作对应的操作信息记录在预先创建的操作记录窗口。
根据上述可知,可以基于设计者确定的编辑控件,以及对编辑控件的控制信息进行相关界面的设计。其中,在对编辑控件进行控制时一般包含多步子操作,例如,针对某个编辑控件修改其显影信息、修改编辑控件的对齐方式、添加按钮、移动按钮位置信息等,例如图8所示。
为了对上述的各个子操作进行记录,且展示给操作者,本实施例中,将各个子操作对应的操作信息记录在预先创建的操作记录窗口。如此,在设计过程中,操作者可随时查看之前的操作记录,以便于回顾设计过程,或者是对设计过程进行检查等。也可以基于记录的操作信息,进行撤销、重做等。
在上述设置的基础上,可以得到相应地效果图,并将得到的效果图实时显示在效果显示窗口的画布上。由上述可知,最终得到的效果图需应用到不同的终端设备,而不同的终端设备的显示屏的分辨率可能并不相同,为了能够模拟得到的效果图应用在不同分辨率的终端设备上的显示效果,请参阅图9,本实施例所提供的可视化布局编辑实现方法还可包括以下步骤:
步骤S310,获取待适配的终端设备的显示屏的分辨率信息。
步骤S320,根据所述分辨率信息对所述效果显示窗口中的画布进行调整。
本实施例中,通过待适配的终端设备的显示屏的分辨率信息,对效果显示窗口中的画布进行调整,从而可以相应地模拟与待适配的终端设备的显示屏相同的分辨率。基于模拟得到的设计效果,相应地进行设计的调整,从而可以使在适配不同的分辨率的终端设备时,均能有较好地显示效果。
此外,进一步地,本实施例中,在生成XML文件后,还可将生成的XML文件的信息展示在预先创建的文件浏览窗口,如图10中所示,如此,可以集中进行显示。
本实施例中,上述的控件显示窗口、属性显示窗口、操作记录窗口以及文件浏览窗口等可以显示在同一编辑界面,如此,可以在编辑界面集中展示上述各个窗口,从而便于编辑操作。
通过上述过程得到XML文件后可提供的独立引擎使用,从而实现应用程序的图像交互等实现。其中,独立引擎可包括渲染引擎、物理引擎、碰撞检测系统、网络引擎以及场景管理引擎等。
基于同一申请构思,本申请实施例中还提供了与可视化布局编辑实现方法对应的可视化布局编辑实现装置100,请参阅图11,由于本申请实施例中的装置解决问题的原理与本申请实施例上述可视化布局编辑实现方法相似,因此装置的实施可以参见方法的实施,重复之处不再赘述。
请参阅图11,为本申请提供的一种可视化布局编辑实现装置100的示意图,所述装置包括:获取模块110、生成模块120及展示模块130。
获取模块110,用于获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息;
可以理解,该获取模块110可以用于执行上述步骤S110,关于该获取模块110的详细实现方式可以参照上述对步骤S110有关的内容。
生成模块120,用于根据所述控制信息、所述布局信息以及所述一个或多个编辑控件生成对应的效果图;
可以理解,该生成模块120可以用于执行上述步骤S120,关于该生成模块120的详细实现方式可以参照上述对步骤S120有关的内容。
展示模块130,用于将所述效果图展示在预先创建的效果显示窗口中的画布上,并基于所述效果图生成对应的可扩展编辑文件。
可以理解,该展示模块130可以用于执行上述步骤S130,关于该展示模块130的详细实现方式可以参照上述对步骤S130有关的内容。
在一种可能的实现方式中,各所述编辑控件具有属性信息,所述获取模块110用于:
获取待适配的终端设备的显示屏信息;
根据所述显示屏信息生成对应的布局信息;
获得针对预先创建的多个编辑控件中的一个或多个编辑控件的属性信息所确定的目标属性;
根据所述一个或多个编辑控件对应的目标属性得到所述控制信息。
在一种可能的实现方式中,所述一个或多个编辑控件中包含按钮控件,上述获取模块110还可用于:
获得预先创建的声音文件;
建立所述按钮控件的点击事件和所述声音文件的播放事件的关联信息;
将所述关联信息添加至所述控制信息中。
在一种可能的实现方式中,上述可视化布局编辑实现装置100还包括显示模块,该显示模块可以用于:
预先创建控件显示窗口和属性显示窗口;
将预先创建的多个编辑控件划分为多个类别,并对所属相同类别的编辑控件进行等级设置;
根据各所述编辑控件所属的类别以及等级,将所述多个编辑控件以树形结构形式显示在所述控件显示窗口;
设置各所述编辑控件的属性信息,并将各所述编辑控件的属性信息显示在所述属性显示窗口。
在一种可能的实现方式中,上述可视化布局编辑实现装置100还包括记录模块,该记录模块用于:
记录获取的控制信息包含的多步子操作中各所述子操作对应的操作信息;
将各所述子操作对应的操作信息记录在预先创建的操作记录窗口。
在一种可能的实现方式中,上述可视化布局编辑实现装置100还包括调整模块,该调整模块用于:
获取待适配的终端设备的显示屏的分辨率信息;
根据所述分辨率信息对所述效果显示窗口中的画布进行调整。
在一种可能的实现方式中,所述属性信息包括位置信息、显影信息、对齐方式、透明度。
请参阅图12,本申请实施例还提供了一种电子设备。该电子设备包括:处理器210、存储器220和总线230。所述存储器220存储有所述处理器210可执行的机器可读指令,当电子设备运行时,所述处理器210与所述存储器220之间通过总线230通信,所述机器可读指令被所述处理器210执行时执行如下处理:
一种可能的实施方式中,处理器210执行的指令中,包括如下过程:
获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息;
根据所述控制信息、所述布局信息以及所述一个或多个编辑控件生成对应的效果图;
将所述效果图展示在预先创建的效果显示窗口中的画布上,并基于所述效果图生成对应的可扩展编辑文件。
关于电子设备运行时,处理器210执行的指令中所涉及的过程,可以参照上述方法实施例中的相关说明,这里不再详述。
本申请实施例还提供了一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器210运行时执行上述可视化布局编辑实现方法的步骤。
综上所述,本申请提供的可视化布局编辑实现方法、装置和电子设备,在进行编辑时,可以获得针对预先创建的多个编辑控件中的一个或多个的控制信息,并获得相应的布局新。基于布局信息、控制信息以及选择的一个或多个编辑控件可生成对应的效果图。同时,将得到的效果图展示在预先创建的效果显示窗口中的画布上,并基于效果图生成对应的可扩展编辑文件。如此,在编辑的同时,设计者可以及时看到编辑的效果图,无需进入实际的应用界面进行查看,可提高设计者的编辑便利性。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到的变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。

Claims (10)

1.一种可视化布局编辑实现方法,其特征在于,所述方法包括:
获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息;
根据所述控制信息、所述布局信息以及所述一个或多个编辑控件生成对应的效果图;
将所述效果图展示在预先创建的效果显示窗口中的画布上,并基于所述效果图生成对应的可扩展编辑文件。
2.根据权利要求1所述的可视化布局编辑实现方法,其特征在于,各所述编辑控件具有属性信息;
所述获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息的步骤,包括:
获取待适配的终端设备的显示屏信息;
根据所述显示屏信息生成对应的布局信息;
获得基于预先创建的多个编辑控件中的一个或多个编辑控件的属性信息所确定的目标属性;
根据所述一个或多个编辑控件对应的目标属性得到所述控制信息。
3.根据权利要求2所述的可视化布局编辑实现方法,其特征在于,所述一个或多个编辑控件中包含按钮控件;
所述获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息的步骤,还包括:
获得预先创建的声音文件;
建立所述按钮控件的点击事件和所述声音文件的播放事件的关联信息;
将所述关联信息添加至所述控制信息中。
4.根据权利要求1所述的可视化布局编辑实现方法,其特征在于,所述方法还包括:
预先创建控件显示窗口和属性显示窗口;
将预先创建的多个编辑控件划分为多个类别,并对所属相同类别的编辑控件进行等级设置;
根据各所述编辑控件所属的类别以及等级,将所述多个编辑控件以树形结构形式显示在所述控件显示窗口;
设置各所述编辑控件的属性信息,并将各所述编辑控件的属性信息显示在所述属性显示窗口。
5.根据权利要求1所述的可视化布局编辑实现方法,其特征在于,所述方法还包括:
记录获取的控制信息包含的多步子操作中各所述子操作对应的操作信息;
将各所述子操作对应的操作信息记录在预先创建的操作记录窗口。
6.根据权利要求1所述的可视化布局编辑实现方法,其特征在于,所述方法还包括:
获取待适配的终端设备的显示屏的分辨率信息;
根据所述分辨率信息对所述效果显示窗口中的画布进行调整。
7.根据权利要求2所述的可视化布局编辑实现方法,其特征在于,所述属性信息包括位置信息、显影信息、对齐方式、透明度。
8.一种可视化布局编辑实现装置,其特征在于,所述装置包括:
获取模块,用于获得针对预先创建的多个编辑控件中的一个或多个编辑控件的控制信息,并获得布局信息;
生成模块,用于根据所述控制信息、所述布局信息以及所述一个或多个编辑控件生成对应的效果图;
展示模块,用于将所述效果图展示在预先创建的效果显示窗口中的画布上,并基于所述效果图生成对应的可扩展编辑文件。
9.根据权利要求8所述的可视化布局编辑实现装置,其特征在于,各所述编辑控件具有属性信息,所述获取模块用于:
获取待适配的终端设备的显示屏信息;
根据所述显示屏信息生成对应的布局信息;
获得针对预先创建的多个编辑控件中的一个或多个编辑控件的属性信息所确定的目标属性;
根据所述一个或多个编辑控件对应的目标属性得到所述控制信息。
10.一种电子设备,其特征在于,包括一个或多个存储介质和一个或多个与存储介质通信的处理器,一个或多个存储介质存储有处理器可执行的机器可执行指令,当电子设备运行时,处理器执行所述机器可执行指令,以执行权利要求1-7中任意一项所述的可视化布局编辑实现方法。
CN202011543407.0A 2020-12-24 2020-12-24 可视化布局编辑实现方法、装置和电子设备 Pending CN112667235A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011543407.0A CN112667235A (zh) 2020-12-24 2020-12-24 可视化布局编辑实现方法、装置和电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011543407.0A CN112667235A (zh) 2020-12-24 2020-12-24 可视化布局编辑实现方法、装置和电子设备

Publications (1)

Publication Number Publication Date
CN112667235A true CN112667235A (zh) 2021-04-16

Family

ID=75409412

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011543407.0A Pending CN112667235A (zh) 2020-12-24 2020-12-24 可视化布局编辑实现方法、装置和电子设备

Country Status (1)

Country Link
CN (1) CN112667235A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113687828A (zh) * 2021-08-27 2021-11-23 北方工业大学 一种自动交互系统界面设计方法和装置
CN113741877A (zh) * 2021-08-02 2021-12-03 紫金诚征信有限公司 一种基于web前端的可视化工作流编辑方法及装置
CN114415892A (zh) * 2022-01-25 2022-04-29 平安消费金融有限公司 界面控件生成方法、装置、可读介质及电子设备
CN115509665A (zh) * 2022-09-29 2022-12-23 上海弘玑信息技术有限公司 一种录制窗口中控件的方法、装置、介质及设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105279222A (zh) * 2014-07-16 2016-01-27 孟智平 一种媒体编辑和播放的方法及其系统
CN108021310A (zh) * 2016-10-28 2018-05-11 中国电信股份有限公司 手机页面构建方法和装置
CN111596852A (zh) * 2020-06-12 2020-08-28 腾讯科技(深圳)有限公司 内容编辑方法、系统及计算机可读存储介质和终端设备
CN112035108A (zh) * 2020-08-28 2020-12-04 沈阳欧瑞科技有限公司 一种用户界面布局设计方法、系统、终端及介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105279222A (zh) * 2014-07-16 2016-01-27 孟智平 一种媒体编辑和播放的方法及其系统
CN108021310A (zh) * 2016-10-28 2018-05-11 中国电信股份有限公司 手机页面构建方法和装置
CN111596852A (zh) * 2020-06-12 2020-08-28 腾讯科技(深圳)有限公司 内容编辑方法、系统及计算机可读存储介质和终端设备
CN112035108A (zh) * 2020-08-28 2020-12-04 沈阳欧瑞科技有限公司 一种用户界面布局设计方法、系统、终端及介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
于华编著: "《计算机图形图像与网页制作》", 29 February 2004, 西安电子科技大学出版社, pages: 179 *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113741877A (zh) * 2021-08-02 2021-12-03 紫金诚征信有限公司 一种基于web前端的可视化工作流编辑方法及装置
CN113687828A (zh) * 2021-08-27 2021-11-23 北方工业大学 一种自动交互系统界面设计方法和装置
CN114415892A (zh) * 2022-01-25 2022-04-29 平安消费金融有限公司 界面控件生成方法、装置、可读介质及电子设备
CN115509665A (zh) * 2022-09-29 2022-12-23 上海弘玑信息技术有限公司 一种录制窗口中控件的方法、装置、介质及设备

Similar Documents

Publication Publication Date Title
US12131137B2 (en) System and method for the generation of an adaptive user interface in a website building system
CN112667235A (zh) 可视化布局编辑实现方法、装置和电子设备
CN107844297B (zh) 一种数据可视化实现系统及方法
US20220236866A1 (en) Method and system for section-based editing of a website page
CN109614424B (zh) 页面布局生成方法、装置、计算设备和介质
CN109408764B (zh) 页面区域划分方法、装置、计算设备和介质
US8823738B1 (en) Merging electronic diagrams
US20120066601A1 (en) Content configuration for device platforms
US20120066304A1 (en) Content configuration for device platforms
CN109815435A (zh) 一种网站页面生成方法、装置及电子设备
WO2009039326A1 (en) Systems and methods for creating, collaborating, and presenting software demonstrations, and methods of marketing of the same
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
CN111679818A (zh) 编辑展示软件的方法和系统
CN111428430A (zh) 电路设计中的电路器件信息获取方法、装置、设备及介质
KR101771473B1 (ko) 반응형 웹페이지 생성 방법 및 장치
CN117762519A (zh) 组件管理方法、装置、计算机设备和存储介质
KR20140098929A (ko) 사용자 지향적 개인 출판물 저작 도구를 이용하는 웹 기반의 온라인 전자책 출판 방법 및 웹 기반의 온라인 전자책 출판 시스템
CN111782309B (zh) 显示信息的方法、装置及计算机可读存储介质
KR101255199B1 (ko) 사용자 지향적 개인 출판물 저작 도구를 이용하는 웹 기반의 온라인 전자책 출판 시스템.
CN111966437A (zh) 三维互动式飞机手册设计、使用方法及系统
CN115469870A (zh) 文件在线处理的方法、装置、电子设备及介质
Preston et al. Learn HTML5 and JavaScript for iOS
WO2024037407A1 (zh) 媒体内容的发布方法、装置和计算机可读存储介质
CN115686529A (zh) 代码生成方法和装置、电子设备和可读存储介质
CN117707511A (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