一种2D特效绘制方法

摘要

本发明公开了一种2D特效绘制方法，包括以下步骤：通过页面解析排版，获得页面各个元素的相关信息；遍历各个节点，查看是否有2D元素，若有将其注册为2D特效，并获取创建该2D特效对应的surface，取得句柄，计算该2D特效的起始状态、完成特效的次数和时间；将所有2D特效的相关数据传到graphics线程对应的模块中，所有2D特效的相关数据传输完毕后，发送SYNC_SHOW消息；当所有非2D元素display完成后，检查是否有SYNC_SHOW消息，如果有SYNC_SHOW消息，则调用graphics模块提供的接口函数graphics_show()通知graphics线程绘制2D特效，修改graphics线程的状态为2D_NEEDPAINT。本发明创建一个graphics线程专门用于2D特效的绘制，这样2D特效绘制过程中不会受主线程图片解码，js运行等因素的影响，从而解决了2D特效绘制不平滑的问题。

权利要求

1.一种2D特效绘制方法，其特征在于，包括以下步骤：

步骤1，通过页面解析排版，获得页面各个元素的相关信息；

步骤2，在排版完成后遍历各个节点，查看是否有2D元素，若有将其注册为2D特效，并获取创建该2D特效对应的surface，取得句柄，计算该2D特效的起始状态、完成特效的次数和时间；

步骤3，将所有2D特效的相关数据传到graphics线程对应的模块中，所有2D特效的相关数据传输完毕后，发送SYNC_SHOW消息；

步骤4，当所有非2D元素display完成后，检查是否有SYNC_SHOW消息，如果有SYNC_SHOW消息，则调用graphics模块提供的接口函数graphics_show()通知graphics线程绘制2D特效，修改graphics线程的状态为2D_NEEDPAINT；

graphics线程绘制2D特效包括以下步骤：

步骤a，检查是否需要绘制2D特效，即检测graphics线程的状态是否为PAINT_NEED，若不需要绘制则直接返回，若需要绘制则进入下一步；

步骤b，检查当前2D特效是否绘制完成，即检查graphics线程的状态是否为PAINT_FINISH，若绘制完成则直接返回，若绘制未完成则进入下一步；

步骤c，在2D特效计算函数中，计算当前2D特效的状态信息，计算完后在2D特效绘制函数中将需要绘制的2D特效调用接口进行绘制；

步骤d，在2D特效计算函数中检查如果当前2D特效的状态信息与终止状态一致，则修改状态为PAINT_FINISH，进行2D特效绘制，否则直接进行2D特效绘制。

2.根据权利要求1所述的一种2D特效绘制方法，其特征在于，graphics线程设有回调函数graphics_proc()。

3.根据权利要求2所述的一种2D特效绘制方法，其特征在于，graphics线程设有graphics_show()函数，graphics_show()函数是graphics模块提供给主线程调用的API，使graphics线程开始2D特效的绘制。

4.根据权利要求3所述的一种2D特效绘制方法，其特征在于，若不调用graphics_show()函数，则回调函数graphics_proc()执行后直接返回；若调用graphics_show()函数，graphics线程开始2D特效的绘制。

说明书

一种2D特效绘制方法

技术领域

[0001] 本发明涉及网页设计技术领域，特别是指一种2D特效绘制方法。

背景技术

[0002] 随着社会的进步和技术水平的提高，浏览器已经进入各个领域，包括数字电视、IPTV、手机、计算机等等，人们对于画面效果的需求也越来越倾向于：画面要精致并且能把一些细节完美地表现出来，这样浏览器中就引入了2D特效。

[0003] 传统的2D特效的实现都是和html、js、图片等解析以及js运行等动作一起在主线程中完成，其2D实现的主要流程如下：

[0004] 1)通过页面解析排版，获得页面各个元素的信息。

[0005] 2)在排版完成后会遍历各个节点，查看是否有2D元素，如果就注册为2D对象。其中包括创建特效对应的surface，取得句柄，计算特效的起始(开始、终止)状态、完成特效的次数和时间。

[0006] 3)绘制特效时，不是直接绘制终止状态,而是发送PAINT_IN_TIMER消息。

[0007] 4)Timer里面收到这个消息之后，计算出当次要画的2D特效的最新信息。如果是移动特效，就要计算当前2D特效的位置信息；如果是渐隐渐现的透明特效，就要计算当前2D特效的透明度。

[0008] 5)绘制本次2D特效

[0009] 6)多次绘制知道当前状态与终止状态一致，最后一次绘制，并发送PAINT_DONE消息。

[0010] 7)下一次timer收到PAINT_DONE消息之后退出绘制。

[0011] 现有技术的缺点是当特效执行时如果还有图片解码，js运行，那么特效会中断，会等图片解码完或者js运行完成后在当前或者下一个Timer中继续执行特效，这样2D特效就没有连贯执行，出现不平滑的效果

发明内容

[0012] 本发明提出一种2D特效绘制方法，解决了现有技术中2D特效绘制不平滑的问题。

[0013] 本发明的技术方案是这样实现的：

[0014] 一种2D特效绘制方法，包括以下步骤：

[0015] 步骤1，通过页面解析排版，获得页面各个元素的相关信息；

[0016] 步骤2，在排版完成后遍历各个节点，查看是否有2D元素，若有将其注册为2D特效，并获取创建该2D特效对应的surface，取得句柄，计算该2D特效的起始状态、完成特效的次数和时间；

[0017] 步骤3，将所有2D特效的相关数据传到graphics线程对应的模块中，所有2D特效的相关数据传输完毕后，发送SYNC_SHOW消息；

[0018] 步骤4，当所有非2D元素display完成后，检查是否有SYNC_SHOW消息，如果有SYNC_SHOW消息，则调用graphics模块提供的接口函数graphics_show()通知graphics线程绘制2D特效，修改graphics线程的状态为2D_NEEDPAINT；

[0019] graphics线程绘制2D特效包括以下步骤：

[0020] 步骤a，检查是否需要绘制2D特效，即检测graphics线程的状态是否为PAINT_NEED，若不需要绘制则直接返回，若需要绘制则进入下一步；

[0021] 步骤b，检查当前2D特效是否绘制完成，即检查graphics线程的状态是否为PAINT_FINISH，若绘制完成则直接返回，若绘制未完成则进入下一步；

[0022] 步骤c，在2D特效计算函数中，计算当前2D特效的状态信息，计算完后在2D特效绘制函数中将需要绘制的2D特效调用接口进行绘制；

[0023] 步骤d，在2D特效计算函数中检查如果当前2D特效的状态信息与终止状态一致，则修改状态为PAINT_FINISH，进行2D特效绘制，否则直接进行2D特效绘制。

[0024] 进一步的，graphics线程设有回调函数graphics_proc()。

[0025] 进一步的，graphics线程设有graphics_show()函数，graphics_show()函数是graphics模块提供给主线程调用的API，使graphics线程开始2D特效的绘制。

[0026] 进一步的，若不调用graphics_show()函数，则回调函数graphics_proc()执行后直接返回；若调用graphics_show()函数，graphics线程开始2D特效的绘制。

[0027] 本发明的有益效果在于：创建一个graphics线程专门用于2D特效的绘制，这样2D特效绘制过程中就不会受到主线程图片解码，js运行等因素的影响，从而解决了2D特效绘制不平滑的问题。

附图说明

[0028] 为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

[0029] 图1为本发明一种2D特效绘制方法的主流程图；

[0030] 图2为图1中graphics线程绘制2D特效的流程图。

具体实施方式

[0031] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0032] 如图1和图2所示，本发明提出了一种2D特效绘制方法，本发明适用范围比较广，适用于基于电子终端进行的2D特效绘制方法，电子终端可以是手机、个人数字助理(Personal Digital Assistant，PDA)、个人电脑(Personal Computer，PC)、MP3播放器、无线上网本、个人电脑、便携电脑、无线手持装置、MP4播放器等，包括以下步骤：

[0033] 步骤1，通过页面解析排版，获得页面各个元素的相关信息；页面元素的相关信息包括页面元素的ID属性、页面元素的自定义属性和页面元素的CLASS属性。

[0034] 本申请所涉及的页面，可以是基于超文本标记语言(HyperText  Markup Language，HTML)编写的网页(Web Page)，也可以称为Web页面。

[0035] 根据不同网站的信息存储和不同页面的信息内容，每个页面大多包括以下页面元素中的一个或几个：

[0036] 导航、网站标志、广告条、图片、文字、动画、装饰物和超级链接；

[0037] 对页面进行解析排版，就能得出各个元素属于那一类。

[0038] 步骤2，在排版完成后遍历各个节点，查看是否有2D元素，若有将其注册为2D特效，并获取创建该2D特效对应的surface，取得句柄，计算该2D特效的起始状态、完成特效的次数和时间；

[0039] 查看页面中是否有2D元素，还可通过根据页面元素的ID属性的生成方式、页面元素的自定义属性和页面元素的CLASS属性的唯一性中的至少一项，获得该页面元素的路径，再根据页面元素的路径得到该页面元素，根据该页面元素的储存格式，从而判断该页面元素是否为2D元素。

[0040] 步骤3，将所有2D特效的相关数据传到graphics线程对应的模块中，所有2D特效的相关数据传输完毕后，发送SYNC_SHOW消息；

[0041] 步骤4，当所有非2D元素display完成后，检查是否有SYNC_SHOW消息，如果有SYNC_SHOW消息，则调用graphics模块提供的接口函数graphics_show()通知graphics线程绘制2D特效，修改graphics线程的状态为2D_NEEDPAINT。

[0042] Graphics模块是基于graphics线程用于2D特效管理的，SYNC_SHOW消息为主线程在所有2D特效的数据都传输给graphics后发送的消息，作用是非2D特效display完成后通知graphics绘制2D特效，graphics线程绘制2D特效包括以下步骤：

[0043] 步骤a，检查是否需要绘制2D特效，即检测graphics线程的状态是否为PAINT_NEED，若不需要绘制则直接返回，若需要绘制则进入下一步；

[0044] 步骤b，检查当前2D特效是否绘制完成，即检查graphics线程的状态是否为PAINT_FINISH，若绘制完成则直接返回，若绘制未完成则进入下一步；

[0045] 步骤c，在2D特效计算函数中，计算当前2D特效的状态信息，计算完后在2D特效绘制函数中将需要绘制的2D特效调用接口进行绘制；

[0046] 步骤d，在2D特效计算函数中检查如果当前2D特效的状态信息与终止状态一致，则修改状态为PAINT_FINISH，进行2D特效绘制，否则直接进行2D特效绘制。

[0047] graphics线程设有回调函数graphics_proc()。graphics线程设有graphics_show()函数，graphics_show()函数是graphics模块提供给主线程调用的API，使graphics线程开始2D特效的绘制。若不调用graphics_show()函数，则回调函数graphics_proc()执行后直接返回；若调用graphics_show()函数，graphics线程开始2D特效的绘制。

[0048] 本发明将2D特效的绘制工作从浏览器主线程中分离出来，创建一个独立的线程用于2D特效的绘制，该线程只对2D特效绘制负责。创建一个独立的线程专门用于2D特效的绘制，这样2D特效在执行过程中将不会受到主线程的影响，可以做到时间上的连续，效果上的连贯。

[0049] 以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。