CN103077036A - 一种处理界面的方法及装置 - Google Patents
一种处理界面的方法及装置 Download PDFInfo
- Publication number
- CN103077036A CN103077036A CN2013100352896A CN201310035289A CN103077036A CN 103077036 A CN103077036 A CN 103077036A CN 2013100352896 A CN2013100352896 A CN 2013100352896A CN 201310035289 A CN201310035289 A CN 201310035289A CN 103077036 A CN103077036 A CN 103077036A
- Authority
- CN
- China
- Prior art keywords
- virtual screen
- screen element
- interface
- picture
- played
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 230000008569 process Effects 0.000 claims abstract description 28
- 238000009877 rendering Methods 0.000 abstract description 9
- 238000004806 packaging method and process Methods 0.000 abstract 1
- 230000000694 effects Effects 0.000 description 21
- 238000010586 diagram Methods 0.000 description 9
- 238000004590 computer program Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 238000005538 encapsulation Methods 0.000 description 2
- 230000008859 change Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种处理界面的方法,用于实现对界面的多重渲染。所述方法包括:调用虚拟屏幕元素,该虚拟屏幕元素包括渲染的界面元素;将虚拟屏幕元素封装为图片;在将图片显示在界面的过程中,对图片进行渲染。本发明还公开了用于实现所述方法的装置。
Description
技术领域
本发明涉及计算机及网页处理技术领域,尤其涉及一种处理界面的方法及装置。
背景技术
目前,可以使用动态界面描述语言(比如特定格式的xml)来描述界面中的图片的表现及动画。如下的xml格式定义了一个图片在界面中的位置及alpha(一种动画形式)动画:
<Image x=″100″y=″100″src=″imagel.png″>//定义图片在界面中的位置,如在坐标x=″100″y=″100"处;定义图片的来源,如来自于“imagel.png”
<AlphaAnimation>//Alpha动画的实现
<Alpha a="255″time=″1000″/>//定义图片的透明度,如透明度"255″,定义该透明度的持续时间为″1000ms″
<Alpha a=″0″time="2000″/>//定义图片的透明度,如透明度为“0”,定义该透明度的持续时间为“2000ms”
</AlphaAnimation>
</Image>
这样,通过上述XML描述语言实现的方法,可以将来源于“imagel.png”的图片,在界面的x=″100″y=″100″处,渲染出一明一暗的Alpha动画效果。
由以上的描述可知,上述的XML描述语言实现的方法,可以将界面上的某一个元素动态渲染输出。但是,如果想要将界面的动态渲染结果再进一步做一些动态效果,就会受到限制。比如,将动态界面的渲染结果,再做一个折叠的效果,或者分成若干块旋转飞出的效果等,上述的XML描述语言的方式就无法实现。
目前,为了将界面的一部分或者全部元素的渲染结果做进一步的动态效果的变化,可以在做进一步变化前,截取当前屏幕显示位图,然后对所截取的显示位图做各种想要的动态效果。
缺点在于所截取的屏幕显示位图是固定不变的,不能动态展示原来的渲染结果,而只是针对一个固定的图片做进一步动态变化,无法达到预期的渲染效果。
发明内容
本发明实施例提供一种处理界面的方法及装置,用于实现对界面的多重渲染。
一种处理界面的方法,包括以下步骤:调用虚拟屏幕元素,该虚拟屏幕元素包括渲染的界面元素;将虚拟屏幕元素封装为图片;在将图片显示在界面的过程中,对图片进行渲染。本发明实施例通过构造包括界面元素的虚拟屏幕元素,来实现保留界面元素的动态效果,即第一次渲染。并且,将虚拟屏幕元素封装为图片,以便于在界面中显示,以及在显示过程中可进行第二次渲染。从而实现多次渲染的动态效果。
优选的,调用的虚拟屏幕元素为第一虚拟屏幕元素;将虚拟屏幕元素封装为图片之前,还包括步骤:对第一虚拟屏幕元素进行渲染;调用第二虚拟屏幕元素,该第二虚拟屏幕元素包括渲染的第一虚拟屏幕元素;将虚拟屏幕元素封装为图片的步骤包括:将第二虚拟屏幕元素封装为图片。这样,每增加一层虚拟屏幕元素,便可多一重渲染,可明显提高渲染的效果。
优选的,对第一虚拟屏幕元素进行渲染的步骤包括:在绘图缓冲区中对第一虚拟屏幕元素进行渲染。本实施例中在绘图缓冲区中对第一虚拟屏幕元素进行渲染,可实现在显示之前进行至少一次渲染,也就是说可实现至少两次渲染。
优选的,将图片显示在界面的步骤包括:根据图片的位置属性将图片显示在界面中的相应位置。背景技术中的截屏方式只能获得一张图片,即只能对一张图片进行渲染。而本实施例中不是通过截屏方式获得图片,而是封装虚拟屏幕元素来获得图片,这种方式可根据需要获得多张图片,对界面的多个部分区域分别进行渲染,使渲染更灵活,效果更佳。
一种处理界面的装置,包括
屏幕模块,用于调用虚拟屏幕元素,该虚拟屏幕元素包括渲染的界面元素;
封装模块,用于将虚拟屏幕元素封装为图片;
显示模块,用于在将图片显示在界面的过程中,对图片进行渲染。
优选的,调用的虚拟屏幕元素为第一虚拟屏幕元素;
屏幕模块对第一虚拟屏幕元素进行渲染;调用第二虚拟屏幕元素,该第二虚拟屏幕元素包括渲染的第一虚拟屏幕元素;
封装模块将第二虚拟屏幕元素封装为图片。
优选的,屏幕模块在绘图缓冲区中对第一虚拟屏幕元素进行渲染。
优选的,显示模块根据图片的位置属性将图片显示在界面中的相应位置。
本发明的其它特征和优点将在随后的说明书中阐述,并且,部分地从说明书中变得显而易见,或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
下面通过附图和实施例,对本发明的技术方案做进一步的详细描述。
附图说明
附图用来提供对本发明的进一步理解,并且构成说明书的一部分,与本发明的实施例一起用于解释本发明,并不构成对本发明的限制。在附图中:
图1为本发明实施例中处理界面的主要方法流程图;
图2A为本发明实施例中处理界面的详细方法流程图;
图2B为本发明实施例中渲染前的示意图;
图2C为本发明实施例中渲染后的示意图;
图3为本发明实施例中装置的结构图。
具体实施方式
以下结合附图对本发明的优选实施例进行说明,应当理解,此处所描述的优选实施例仅用于说明和解释本发明,并不用于限定本发明。
本发明实施例通过构造包括界面元素的虚拟屏幕元素,来实现保留界面元素的动态效果,即第一次渲染。并且,将虚拟屏幕元素封装为图片,以便于在界面中显示,以及在显示过程中可进行第二次渲染。从而实现多次渲染的动态效果。
参见图1,本实施例中处理界面的主要方法流程如下:
步骤101:调用虚拟屏幕元素,该虚拟屏幕元素包括渲染的界面元素。
步骤102:将虚拟屏幕元素封装为图片。
步骤103:在将图片显示在界面的过程中,对图片进行渲染。
本实施例可实现两次渲染,如果需要增加渲染次数,则可参见下面的过程:
调用第一虚拟屏幕元素;
对第一虚拟屏幕元素进行渲染;
调用第二虚拟屏幕元素,该第二虚拟屏幕元素包括渲染的第一虚拟屏幕元素;
将第二虚拟屏幕元素封装为图片。
由此可见,每构造一层虚拟屏幕元素,便可增加一重渲染。
具体的,为第一虚拟屏幕元素开辟一个绘图缓冲区,在绘图缓冲区中对第一虚拟屏幕元素进行渲染。
另外,本实施例中的图片的位置属性可灵活配置,根据图片的位置属性将图片显示在界面中的相应位置。
通过下面的典型实施例来详细介绍实现过程。
参见图2A,本实施例中处理界面的详细方法流程如下:
步骤201:调用第一虚拟屏幕元素。该第一虚拟屏幕元素包括渲染的一个或多个界面元素,需要做进一步相同渲染的界面元素均可包括在第一虚拟屏幕元素。本实施例中界面元素包括图片、文字等。
步骤202:在绘图缓冲区中对第一虚拟屏幕元素进行渲染。
步骤203:调用第二虚拟屏幕元素,该第二虚拟屏幕元素包括渲染的一个或多个第一虚拟屏幕元素。
步骤204:将第二虚拟屏幕元素封装为图片。该图片具有位置属性,该位置属性可灵活配置。
步骤205:对封装成的图片进行渲染。
步骤206:根据图片的位置属性将渲染后的图片显示在界面上。可以将渲染后的一个或多个图片显示在界面上。
例如,<VirtualScreen name=″virtualscreen″>//定义虚拟屏幕元素
<Image x=″100″y=″100″src=″imagel.png″>//定义界面元素在界面的位置,如在坐标x=″100″y=″100″处,界面元素为图片“imagel.png”,这里,该待渲染的图片来自于虚拟屏幕元素″virtualscreen″
<AlphaAnimation>//Alpha动画的实现
<Alpha a=″255″time=″1000″/>//定义图片的透明度,如透明度″255″,定义该透明度的持续时间为″1000ms″
<Alpha a=″0″time=″2000″/>//定义图片的透明度,如透明度为“0”,定义该透明度的持续时间为“2000ms”
</AlphaAnimation>
</Image>
</VirtualScreen>
以上,定义了虚拟屏幕元素VirtualScreen,其包括渲染的界面元素″imagel.png″。下面对虚拟屏幕元素进行封装。
<Image src=″Virtualscreen″srcType=″VirtualScreen″x=″100″y=″100″>
//将虚拟屏幕元素封装为位图(即图片),该位图在界面中的位置为x=″100″y=″100″。此处还可以增加对该图片的渲染处理。
</Image>
下面再通过一个实例来详细描述图片的渲染过程:
图2B为渲染前的界面,即要渲染的界面为一锁屏界面,图2C是采用本实例提供的技术方案对该锁屏界面进行渲染后的界面,即将锁屏界面以折扇的渲染效果推开以显示桌面的主界面。从图2C中可以看出,渲染后是两个图片叠加的效果,并且锁屏界面为折叠效果,且遮挡住部分主界面。
可以先确定锁屏界面中的界面元素,并将锁屏界面中的所有界面元素封装成一个集合,并包含在第一虚拟屏幕元素中。当需要进行图片渲染时,如检测到针对图2B中锁屏界面的滑动操作指令时,调用第一虚拟屏幕元素。在绘图缓冲区中对第一虚拟屏幕元素进行渲染,如实现折叠的效果。将渲染后的第一虚拟屏幕元素封装为图片。在将封装的图片和主界面图片显示在界面的过程中,并将该图片与主界面图片进行叠加处理,即进行第二次渲染并显示在界面上,如图2C所示的显示效果。
通过以上描述了解了处理界面的实现过程,该过程可由装置实现,下面对装置的内部结构和功能进行介绍。
参见图3,本实施例中处理界面的装置包括:屏幕模块301、封装模块302和显示模块303。
屏幕模块301用于调用虚拟屏幕元素,该虚拟屏幕元素包括渲染的界面元素。
封装模块302用于将虚拟屏幕元素封装为图片。
显示模块303用于在将图片显示在界面的过程中,对图片进行渲染。
较佳的,调用的虚拟屏幕元素为第一虚拟屏幕元素;屏幕模块301对第一虚拟屏幕元素进行渲染;调用第二虚拟屏幕元素,该第二虚拟屏幕元素包括渲染的第一虚拟屏幕元素;封装模块302将第二虚拟屏幕元素封装为图片。
其中,屏幕模块301在绘图缓冲区中对第一虚拟屏幕元素进行渲染。
较佳的,显示模块303根据图片的位置属性将图片显示在界面中的相应位置。
本发明实施例通过构造包括界面元素的虚拟屏幕元素,来实现保留界面元素的动态效果,即第一次渲染。并且,将虚拟屏幕元素封装为图片,以便于在界面中显示,以及在显示过程中可进行第二次渲染。从而实现多次渲染的动态效果。本实施例还可以通过增加虚拟屏幕元素的层数来实现更多次的渲染,以提高渲染效果。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然,本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包含这些改动和变型在内。
Claims (8)
1.一种处理界面的方法,其特征在于,包括以下步骤:
调用虚拟屏幕元素,该虚拟屏幕元素包括渲染的界面元素;
将虚拟屏幕元素封装为图片;
在将图片显示在界面的过程中,对图片进行渲染。
2.如权利要求1所述的方法,其特征在于,调用的虚拟屏幕元素为第一虚拟屏幕元素;
将虚拟屏幕元素封装为图片之前,还包括步骤:对第一虚拟屏幕元素进行渲染;调用第二虚拟屏幕元素,该第二虚拟屏幕元素包括渲染的第一虚拟屏幕元素;
将虚拟屏幕元素封装为图片的步骤包括:将第二虚拟屏幕元素封装为图片。
3.如权利要求2所述的方法,其特征在于,对第一虚拟屏幕元素进行渲染的步骤包括:在绘图缓冲区中对第一虚拟屏幕元素进行渲染。
4.如权利要求1所述的方法,其特征在于,将图片显示在界面的步骤包括:根据图片的位置属性将图片显示在界面中的相应位置。
5.一种处理界面的装置,其特征在于,包括
屏幕模块,用于调用虚拟屏幕元素,该虚拟屏幕元素包括渲染的界面元素;
封装模块,用于将虚拟屏幕元素封装为图片;
显示模块,用于在将图片显示在界面的过程中,对图片进行渲染。
6.如权利要求5所述的装置,其特征在于,调用的虚拟屏幕元素为第一虚拟屏幕元素;
屏幕模块对第一虚拟屏幕元素进行渲染;调用第二虚拟屏幕元素,该第二虚拟屏幕元素包括渲染的第一虚拟屏幕元素;
封装模块将第二虚拟屏幕元素封装为图片。
7.如权利要求6所述的装置,其特征在于,屏幕模块在绘图缓冲区中对第一虚拟屏幕元素进行渲染。
8.如权利要求5所述的装置,其特征在于,显示模块根据图片的位置属性将图片显示在界面中的相应位置。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2013100352896A CN103077036A (zh) | 2013-01-29 | 2013-01-29 | 一种处理界面的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2013100352896A CN103077036A (zh) | 2013-01-29 | 2013-01-29 | 一种处理界面的方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN103077036A true CN103077036A (zh) | 2013-05-01 |
Family
ID=48153574
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2013100352896A Pending CN103077036A (zh) | 2013-01-29 | 2013-01-29 | 一种处理界面的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103077036A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103543924A (zh) * | 2013-10-16 | 2014-01-29 | 深圳市欧珀通信软件有限公司 | 一种移动终端的渲染方法及装置 |
| CN107358659A (zh) * | 2017-07-21 | 2017-11-17 | 福建星网视易信息系统有限公司 | 基于3d技术的多画面融合显示方法及存储设备 |
| CN111459486A (zh) * | 2020-04-01 | 2020-07-28 | 杭州华望系统科技有限公司 | 一种基于网页画布的图形拖动优化方法 |
| CN113713375A (zh) * | 2021-08-02 | 2021-11-30 | 网易(杭州)网络有限公司 | 一种界面元素显示方法、装置、终端及存储介质 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102567381A (zh) * | 2010-12-23 | 2012-07-11 | 腾讯科技(深圳)有限公司 | 一种保存图片信息的方法和装置 |
| CN102880389A (zh) * | 2012-09-17 | 2013-01-16 | 广东威创视讯科技股份有限公司 | 通过触摸移动进行页面切换的方法及其装置 |
-
2013
- 2013-01-29 CN CN2013100352896A patent/CN103077036A/zh active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102567381A (zh) * | 2010-12-23 | 2012-07-11 | 腾讯科技(深圳)有限公司 | 一种保存图片信息的方法和装置 |
| CN102880389A (zh) * | 2012-09-17 | 2013-01-16 | 广东威创视讯科技股份有限公司 | 通过触摸移动进行页面切换的方法及其装置 |
Non-Patent Citations (1)
| Title |
|---|
| 米柚论坛: "《http://www.miui.com/thread-603855-1-1.html》", 4 July 2012 * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103543924A (zh) * | 2013-10-16 | 2014-01-29 | 深圳市欧珀通信软件有限公司 | 一种移动终端的渲染方法及装置 |
| CN103543924B (zh) * | 2013-10-16 | 2017-05-10 | 广东欧珀移动通信有限公司 | 一种移动终端的渲染方法及装置 |
| CN107358659A (zh) * | 2017-07-21 | 2017-11-17 | 福建星网视易信息系统有限公司 | 基于3d技术的多画面融合显示方法及存储设备 |
| CN107358659B (zh) * | 2017-07-21 | 2021-06-22 | 福建星网视易信息系统有限公司 | 基于3d技术的多画面融合显示方法及存储设备 |
| CN111459486A (zh) * | 2020-04-01 | 2020-07-28 | 杭州华望系统科技有限公司 | 一种基于网页画布的图形拖动优化方法 |
| CN111459486B (zh) * | 2020-04-01 | 2023-05-23 | 杭州华望系统科技有限公司 | 一种基于网页画布的图形拖动优化方法 |
| CN113713375A (zh) * | 2021-08-02 | 2021-11-30 | 网易(杭州)网络有限公司 | 一种界面元素显示方法、装置、终端及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US12375567B2 (en) | Methods, systems, and computer program products for implementing cross-platform mixed-reality applications with a scripting framework | |
| US9426259B2 (en) | Client server interaction for graphical/audio applications | |
| US10013503B2 (en) | Canvas element rendering method and apparatus implemented on android system based on GPU | |
| CN103713891B (zh) | 一种在移动设备上进行图形渲染的方法和装置 | |
| CN110969685A (zh) | 使用渲染图的可定制渲染管线 | |
| KR101952983B1 (ko) | 콘텐트의 타일-기반 렌더링을 위한 방법 및 콘텐트를 렌더링하기 위한 시스템 | |
| CN107450897B (zh) | 图形引擎的跨平台移植方法和装置 | |
| CN102800045A (zh) | 一种图像处理的方法及装置 | |
| WO2021115194A1 (zh) | 一种应用图标的显示方法及电子设备 | |
| CN103678631A (zh) | 页面渲染方法及装置 | |
| JP4782828B2 (ja) | 表示におけるz−順序エレメントの精密なグレイン制御 | |
| CN102087598A (zh) | 一种3d界面展示方法、装置及浏览装置 | |
| JP2008542919A5 (zh) | ||
| CN103077036A (zh) | 一种处理界面的方法及装置 | |
| Movania | OpenGL Development Cookbook | |
| CN112732252B (zh) | 一种动态生成ui的方法、装置和电子设备 | |
| CN110443880B (zh) | 图像渲染方法、装置、存储介质及电子设备 | |
| CN107613046A (zh) | 滤镜管道系统、图像数据处理方法、装置以及电子设备 | |
| CN111796812A (zh) | 图像渲染的方法、装置、电子设备及计算机可读存储介质 | |
| US8203567B2 (en) | Graphics processing method and apparatus implementing window system | |
| EP4621606A1 (en) | Sub-application page processing method and apparatus, and computer device and storage medium | |
| CN112685494A (zh) | 一种数据可视化方法、装置、设备及介质 | |
| US7743387B2 (en) | Inheritance context for graphics primitives | |
| KR20230159605A (ko) | 클라우드 플랫폼에서의 병렬 처리를 위한 세그먼트화된 미디어 메타데이터에 대한 와이어 포맷들을 위한 방법 및 장치 | |
| US9159160B1 (en) | Texture sharing between application modules |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C53 | Correction of patent of invention or patent application | ||
| CB02 | Change of applicant information |
Address after: 100085 Beijing city Haidian District Qinghe Street No. 68 Huarun colorful city shopping center two floor 13 Applicant after: Xiaomi Technology Co., Ltd. Address before: 100102 Beijing Wangjing West Road, a volume of stone world building, A, block, floor 12 Applicant before: Beijing Xiaomi Technology Co., Ltd. |
|
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20130501 |
|
| RJ01 | Rejection of invention patent application after publication |