CN105843617B - 一种2d特效绘制方法 - Google Patents

一种2d特效绘制方法 Download PDF

Info

Publication number
CN105843617B
CN105843617B CN201610169312.4A CN201610169312A CN105843617B CN 105843617 B CN105843617 B CN 105843617B CN 201610169312 A CN201610169312 A CN 201610169312A CN 105843617 B CN105843617 B CN 105843617B
Authority
CN
China
Prior art keywords
graphics
special efficacys
special
efficacys
show
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.)
Expired - Fee Related
Application number
CN201610169312.4A
Other languages
English (en)
Other versions
CN105843617A (zh
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.)
Shenzhen Ipanel TV Inc
Original Assignee
Shenzhen Ipanel TV Inc
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 Shenzhen Ipanel TV Inc filed Critical Shenzhen Ipanel TV Inc
Priority to CN201610169312.4A priority Critical patent/CN105843617B/zh
Publication of CN105843617A publication Critical patent/CN105843617A/zh
Application granted granted Critical
Publication of CN105843617B publication Critical patent/CN105843617B/zh
Expired - Fee Related legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Abstract

本发明公开了一种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特效绘制不平滑的问题。

Description

一种2D特效绘制方法
技术领域
本发明涉及网页设计技术领域，特别是指一种2D特效绘制方法。
背景技术
随着社会的进步和技术水平的提高，浏览器已经进入各个领域，包括数字电视、IPTV、手机、计算机等等，人们对于画面效果的需求也越来越倾向于：画面要精致并且能把一些细节完美地表现出来，这样浏览器中就引入了2D特效。
传统的2D特效的实现都是和html、js、图片等解析以及js运行等动作一起在主线程中完成，其2D实现的主要流程如下：
1)通过页面解析排版，获得页面各个元素的信息。
2)在排版完成后会遍历各个节点，查看是否有2D元素，如果就注册为2D对象。其中包括创建特效对应的surface，取得句柄，计算特效的起始(开始、终止)状态、完成特效的次数和时间。
3)绘制特效时，不是直接绘制终止状态,而是发送PAINT_IN_TIMER消息。
4)Timer里面收到这个消息之后，计算出当次要画的2D特效的最新信息。如果是移动特效，就要计算当前2D特效的位置信息；如果是渐隐渐现的透明特效，就要计算当前2D特效的透明度。
5)绘制本次2D特效
6)多次绘制知道当前状态与终止状态一致，最后一次绘制，并发送PAINT_DONE消息。
7)下一次timer收到PAINT_DONE消息之后退出绘制。
现有技术的缺点是当特效执行时如果还有图片解码，js运行，那么特效会中断，会等图片解码完或者js运行完成后在当前或者下一个Timer中继续执行特效，这样2D特效就没有连贯执行，出现不平滑的效果
发明内容
本发明提出一种2D特效绘制方法，解决了现有技术中2D特效绘制不平滑的问题。
本发明的技术方案是这样实现的：
一种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特效绘制。
进一步的，graphics线程设有回调函数graphics_proc()。
进一步的，graphics线程设有graphics_show()函数，graphics_show()函数是graphics模块提供给主线程调用的API，使graphics线程开始2D特效的绘制。
进一步的，若不调用graphics_show()函数，则回调函数graphics_proc()执行后直接返回；若调用graphics_show()函数，graphics线程开始2D特效的绘制。
本发明的有益效果在于：创建一个graphics线程专门用于2D特效的绘制，这样2D特效绘制过程中就不会受到主线程图片解码，js运行等因素的影响，从而解决了2D特效绘制不平滑的问题。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明一种2D特效绘制方法的主流程图；
图2为图1中graphics线程绘制2D特效的流程图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1和图2所示，本发明提出了一种2D特效绘制方法，本发明适用范围比较广，适用于基于电子终端进行的2D特效绘制方法，电子终端可以是手机、个人数字助理(PersonalDigital Assistant，PDA)、个人电脑(Personal Computer，PC)、MP3播放器、无线上网本、个人电脑、便携电脑、无线手持装置、MP4播放器等，包括以下步骤：
步骤1，通过页面解析排版，获得页面各个元素的相关信息；页面元素的相关信息包括页面元素的ID属性、页面元素的自定义属性和页面元素的CLASS属性。
本申请所涉及的页面，可以是基于超文本标记语言(HyperText MarkupLanguage，HTML)编写的网页(Web Page)，也可以称为Web页面。
根据不同网站的信息存储和不同页面的信息内容，每个页面大多包括以下页面元素中的一个或几个：
导航、网站标志、广告条、图片、文字、动画、装饰物和超级链接；
对页面进行解析排版，就能得出各个元素属于那一类。
步骤2，在排版完成后遍历各个节点，查看是否有2D元素，若有将其注册为2D特效，并获取创建该2D特效对应的surface，取得句柄，计算该2D特效的起始状态、完成特效的次数和时间；
查看页面中是否有2D元素，还可通过根据页面元素的ID属性的生成方式、页面元素的自定义属性和页面元素的CLASS属性的唯一性中的至少一项，获得该页面元素的路径，再根据页面元素的路径得到该页面元素，根据该页面元素的储存格式，从而判断该页面元素是否为2D元素。
步骤3，将所有2D特效的相关数据传到graphics线程对应的模块中，所有2D特效的相关数据传输完毕后，发送SYNC_SHOW消息；
步骤4，当所有非2D元素display完成后，检查是否有SYNC_SHOW消息，如果有SYNC_SHOW消息，则调用graphics模块提供的接口函数graphics_show()通知graphics线程绘制2D特效，修改graphics线程的状态为2D_NEEDPAINT。
Graphics模块是基于graphics线程用于2D特效管理的，SYNC_SHOW消息为主线程在所有2D特效的数据都传输给graphics后发送的消息，作用是非2D特效display完成后通知graphics绘制2D特效，graphics线程绘制2D特效包括以下步骤：
步骤a，检查是否需要绘制2D特效，即检测graphics线程的状态是否为PAINT_NEED，若不需要绘制则直接返回，若需要绘制则进入下一步；
步骤b，检查当前2D特效是否绘制完成，即检查graphics线程的状态是否为PAINT_FINISH，若绘制完成则直接返回，若绘制未完成则进入下一步；
步骤c，在2D特效计算函数中，计算当前2D特效的状态信息，计算完后在2D特效绘制函数中将需要绘制的2D特效调用接口进行绘制；
步骤d，在2D特效计算函数中检查如果当前2D特效的状态信息与终止状态一致，则修改状态为PAINT_FINISH，进行2D特效绘制，否则直接进行2D特效绘制。
graphics线程设有回调函数graphics_proc()。graphics线程设有graphics_show()函数，graphics_show()函数是graphics模块提供给主线程调用的API，使graphics线程开始2D特效的绘制。若不调用graphics_show()函数，则回调函数graphics_proc()执行后直接返回；若调用graphics_show()函数，graphics线程开始2D特效的绘制。
本发明将2D特效的绘制工作从浏览器主线程中分离出来，创建一个独立的线程用于2D特效的绘制，该线程只对2D特效绘制负责。创建一个独立的线程专门用于2D特效的绘制，这样2D特效在执行过程中将不会受到主线程的影响，可以做到时间上的连续，效果上的连贯。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (4)

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特效的绘制。
CN201610169312.4A 2016-03-23 2016-03-23 一种2d特效绘制方法 Expired - Fee Related CN105843617B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610169312.4A CN105843617B (zh) 2016-03-23 2016-03-23 一种2d特效绘制方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610169312.4A CN105843617B (zh) 2016-03-23 2016-03-23 一种2d特效绘制方法

Publications (2)

Publication Number Publication Date
CN105843617A CN105843617A (zh) 2016-08-10
CN105843617B true CN105843617B (zh) 2018-11-13

Family

ID=56582918

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610169312.4A Expired - Fee Related CN105843617B (zh) 2016-03-23 2016-03-23 一种2d特效绘制方法

Country Status (1)

Country Link
CN (1) CN105843617B (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101882432A (zh) * 2010-02-01 2010-11-10 深圳市同洲电子股份有限公司 一种焦点元素显示方法、装置及数字电视接收终端
CN101901274A (zh) * 2010-08-11 2010-12-01 深圳市茁壮网络股份有限公司 实现页面特效的方法及装置
CN104765617A (zh) * 2015-05-04 2015-07-08 北京奇虎科技有限公司 基于html5实现的流应用功能接口分发方法及系统

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103324633A (zh) * 2012-03-22 2013-09-25 阿里巴巴集团控股有限公司 一种信息发布方法及装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101882432A (zh) * 2010-02-01 2010-11-10 深圳市同洲电子股份有限公司 一种焦点元素显示方法、装置及数字电视接收终端
CN101901274A (zh) * 2010-08-11 2010-12-01 深圳市茁壮网络股份有限公司 实现页面特效的方法及装置
CN104765617A (zh) * 2015-05-04 2015-07-08 北京奇虎科技有限公司 基于html5实现的流应用功能接口分发方法及系统

Also Published As

Publication number Publication date
CN105843617A (zh) 2016-08-10

Similar Documents

Publication Publication Date Title
CN106991154B (zh) 网页渲染方法、装置、终端及服务器
CN102750341B (zh) 微博显示方法和系统
CN104461484B (zh) 前端模板的实现方法和装置
KR102050203B1 (ko) 하이퍼링크 목적지의 가시화 기법
CN101311922A (zh) 广告模板样式匹配方法及系统
CN104573025A (zh) 一种提高页面加载速度的方法及系统
US20150310397A1 (en) Information Processing Method and Device
CN102073677A (zh) 一种基于标签的评论方法及系统
CN103472983A (zh) 定位页面内容的方法及装置
CN107908793A (zh) 网页弹窗的方法及系统
CN104182430A (zh) 文本信息中的图片显示方法及装置
CN105630992B (zh) 静态页面中的场景显示方法及装置
CN103869948A (zh) 语音命令处理方法和电子设备
CN103020129A (zh) 一种文本内容提取方法和装置
CN102033915A (zh) 一种开放式知识共享平台及其编辑提示方法
KR20120005631U (ko) 화장품 유통기한 표시 및 화장법 기능을 구비한 이동통신 단말기
CN107423012B (zh) 一种数据显示方法、装置及电子设备
CN103164456A (zh) 一种网络评论系统及其实现方法
CN202110541U (zh) 一种基于标签的评论系统
CN104834715A (zh) 一种基于部件和容器的网站生成方法及系统
CN103631880A (zh) 基于Ajax网页的局部更新方法
CN105843617B (zh) 一种2d特效绘制方法
CN105824925B (zh) 基于浏览器网页元素的动态标注方法
CN102262530A (zh) 一种基于生成式视框结构的云计算视窗桌面的架构方法
CN106445903A (zh) 图文数据的排版方法和装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CF01 Termination of patent right due to non-payment of annual fee

Granted publication date: 20181113

Termination date: 20210323

CF01 Termination of patent right due to non-payment of annual fee