CN105022612A

CN105022612A - 浏览器焦点动态移动方法及系统

Info

Publication number: CN105022612A
Application number: CN201410156427.0A
Authority: CN
Inventors: 徐佳宏; 陈栋; 朱吕亮
Original assignee: Shenzhen Ipanel TV Inc
Current assignee: Shenzhen Ipanel TV Inc
Priority date: 2014-04-18
Filing date: 2014-04-18
Publication date: 2015-11-04

Abstract

一种浏览器焦点动态移动方法及系统，该方法包括如下步骤：获取浏览器的初始焦点框的初始坐标信息和终点焦点框的终点坐标信息；当根据初始坐标信息绘制完初始焦点框后，每隔固定时间，计算出当前焦点框的当前坐标信息；根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上；如果当前坐标信息与终点坐标信息一致，则退出绘制当前焦点框。利用本发明可通过Timer消息刷新机制，在初始焦点和终点焦点之间绘制一次或多次焦点框，形成动态的焦点移动效果。

Description

浏览器焦点动态移动方法及系统

技术领域

本发明涉及一种浏览器控制技术，尤其涉及一种浏览器焦点动态移动方法及系统。

背景技术

随着社会的进步和技术水平的提高，浏览器已经进入各个领域，包括数字电视、网络电视（Internet Protocol Television，IPTV）、手机、计算机等电子装置，而焦点的移动是浏览器中一向最基本的技术。

传统的焦点移动技术，是指刷新原来焦点的位置，刷新新焦点的位置，然后在新焦点的坐标处画一个框。由此可知，传统的焦点移动技术只有两次绘制焦点框，即未移动前的一次（原来焦点的位置）和移动到目的地之后的一次（新焦点的位置），这样焦点的移动就没有动态的效果，只能看到最后焦点所在位置。

发明内容

鉴于以上内容，有必要提供一种浏览器焦点动态移动方法及系统，其可记录初始焦点（旧焦点）的位置和终点焦点（新焦点）的位置，然后在定时器（Timer）中根据初始焦点和终点焦点的位置，在初始焦点和终点焦点之间绘制一次或多次焦点框，形成动态的焦点移动效果。

一种浏览器焦点动态移动方法，该方法包括如下步骤：获取浏览器的初始焦点框的初始坐标信息和终点焦点框的终点坐标信息；当根据初始坐标信息绘制完初始焦点框后，每隔固定时间，计算出当前焦点框的当前坐标信息；根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上；如果当前坐标信息与终点坐标信息一致，则退出绘制当前焦点框。

一种浏览器焦点动态移动系统，该系统包括：获取浏览器的初始焦点框的初始坐标信息和终点焦点框的终点坐标信息的模块；当根据初始坐标信息绘制完初始焦点框后，每隔固定时间，计算出当前焦点框的当前坐标信息的模块；根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上的模块；如果当前坐标信息与终点坐标信息一致，则退出绘制当前焦点框的模块。

相较于现有技术，所述的浏览器焦点动态移动方法及系统，可以记录初始焦点（旧焦点）的位置和终点焦点（新焦点）的位置，然后在定时器（Timer）中根据初始焦点和终点焦点的位置，在初始焦点和终点焦点之间绘制一次或多次焦点框，形成动态的焦点移动效果，使用户看上去焦点是在动态移动的，更吸引人的眼球。

附图说明

图1是本发明浏览器焦点动态移动系统的应用环境图;

图2是本发明浏览器焦点动态移动方法的具体流程图;

图3是浏览器焦点动态移动的效果图。

具体实施方式

为了使本发明的描述更易于理解，以下先对具体实施方式部分用到的专业术语进行解释说明。

浏览器：浏览器是指可以显示网页服务器或者文件系统的HTML（Hyper Text Markup Language，超文本标记语言）文件内容，并支持用户与这些文件交互的一种软件。

焦点：计算机程序语言中所谓的焦点，就是当前光标被激活的位置，是指哪个控件被选中，可以被操作。比如一个文本框获得焦点，用户在键盘上敲进的字符就直接进入了文本框。还比如一个下拉式列表框获得焦点，用户按下键盘上的向下箭头，下拉式列表就会列出来。在本实施例中，焦点包括真焦点和假焦点。

真焦点：指浏览器默认能画出焦点框的节点，也就是几个固定的标签，比如：<a>、<input>、<botton>、<area>等。

假焦点：是通过Java脚本（Java script）来设置图片的隐藏显示等技术来显示图片，达到类似焦点框的效果的节点。

定时器（Timer）：本实施中特指根据固定时间间隔，来多次调用的一个函数。

坐标信息：本实施中指的是浏览器XY坐标系中的焦点距离原点的横轴方向距离（X轴坐标）、纵轴方向距离（Y轴坐标）以及焦点框的宽度（Width）和高度（Height）。其中，焦点框是以焦点为中心的一个方形区域（如矩形区域），所述坐标信息用一个数组进行存储。

Surface：本实施例中是指创建一块内存，用来存储每次要画的焦点框数据。

以下结合图1至图3的描述，具体介绍本发明。

如图1所示，是本发明浏览器焦点动态移动系统的应用环境图。该浏览器焦点动态移动系统26应用于带有显示屏幕20和输入设备22的电子装置2中。例如，该电子装置2可以是数字电视、网络电视（Internet Protocol Television，IPTV）、智能手机、计算机、PDA（Personal Digital Assistant，掌上电脑）等智能设备。所述显示屏幕20可以是液晶显示屏或OLED显示屏等显示装置，所述输入设备22可以是键盘、或触控屏等输入装置。

所述电子装置2还包括通过数据线或信号线相连的存储器24和处理器28。需要说明的是，图1只是对电子装置2软件结构和硬件结构的示意性说明，电子装置2还包括其它必要的电子元器件和系统软件（如浏览器等），在此不再一一赘述。

所述浏览器焦点动态移动系统26存储于电子装置2的存储器24中，用于记录初始焦点（旧焦点）的位置和终点焦点（新焦点）的位置，然后在定时器（Timer）中根据初始焦点和终点焦点的位置，在初始焦点和终点焦点之间绘制一次或多次焦点框，形成动态的焦点移动效果，具体方法流程参阅图2的描述。

在本实施例中，所述浏览器焦点动态移动系统26可以提供一个或多个模块，所述一个或多个模块被存储在所述电子装置2的存储器24中并被配置成由一个或多个处理器（本实施例为一个处理器28）执行，以完成本发明。本发明所称的模块是完成一特定功能的计算机程序段，比程序更适合于描述软件在计算机中的执行过程。

如图2所示，是本发明浏览器焦点动态移动方法的具体流程图。

步骤S10，获取浏览器的初始焦点框的初始坐标信息info1（x1,y1,w1,h1）和终点焦点框的终点坐标信息info2（x2,y2,w2,h2）。在本实施例中，坐标原点为浏览器页面的左上角位置。其中，初始焦点框是以初始焦点为中心的一个方形区域（如矩形区域），x1代表初始焦点框距离浏览器页面最左端的距离，y1代表初始焦点框距离浏览器页面最上端的距离，w1代表初始焦点框的宽度，h1代表初始焦点框的高度。终点焦点框是以终点焦点为中心的一个方形区域（如矩形区域），x2代表终点焦点框距离浏览器页面最左端的距离，y2代表终点焦点框距离浏览器页面最上端的距离，w2代表终点焦点框的宽度，h2代表终点焦点框的高度。

具体而言，通过解析浏览器页面和排版浏览器页面，获取浏览器的初始焦点框的初始坐标信息info1和终点焦点框的终点坐标信息info2。

在本实施例中，解析浏览器页面是指：将浏览器页面的内容生成一个相互联系的带有各标签属性的树状结构。

例如，该树状结构可以表示为：

<html>

<body>

<a></a>

<div>

</body>

</html>

在上述树状结构中，根节点是<html>，<body>是<html>的子节点，<div>是<body>的字节点，<div>又有两个子节点<a>和<input>，<a>和<input>是兄弟节点的关系。

在本实施例中，排版浏览器页面是指：遍历上述浏览器页面的树状结构，得到每一个节点的属性，从而得到指定节点的坐标信息（即位置信息）。

例如，在上例中，当遍历到div标签时，则从<div>节点中获取该节点的属性:style=”left:10px;top:10px;width:100px;height:100px”，从而得到该节点的坐标信息（10,10,100,100），由于a标签是div标签的子节点，所以就能得到a标签坐标信息（10,10,100,100）。

步骤S11，每隔预设间隔时间T1（如50ms），计算出当前焦点框的当前坐标信息info（xn,yn,wn,hn）。其中，当前焦点框是以当前焦点为中心的一个方形区域（如矩形区域），xn代表当前焦点框距离浏览器页面最左端的距离，yn代表当前焦点框距离浏览器页面最上端的距离，wn代表当前焦点框的宽度，hn代表当前焦点框的高度。

具体而言，在本实施例中，当根据初始坐标信息绘制完初始焦点对应的初始焦点框后，并不直接绘制终点焦点对应的终点焦点框，而是每隔固定时间发送一个在定时器中绘制焦点框的消息（标识为PAINT_IN_TIMER，以下称为“动态焦点框绘制消息”）给预先设定的定时器。定时器接收到该动态焦点框绘制消息后，计算出当前焦点框的当前坐标信息info（xn,yn,wn,hn）。

在本实施例中，当前焦点框的当前坐标信息根据初始焦点框的初始坐标信息，以预先设定的步进距离移动，直至当前坐标信息与终点坐标信息一致。举例而言，假设定时器的固定时间T0为500ms（即在固定时间500ms内多次动态绘制焦点框），每次定时器的循环时间是50ms（即预设间隔时间T1=50ms），如果焦点向正右方向移动，则xn=x1+x1/(T0/T1)=x1+x1/(500/50),yn=y1,wn=w1,hn=h1。同理，如果焦点向正下方移动，则yn=y1+y1/(T0/T1)=y1+y1/(500/50),xn=x1,wn=w1,hn=h1。

步骤S12，根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上。

步骤S13，判断当前坐标信息与终点坐标信息是否一致。如果当前坐标信息与终点坐标信息不一致，则返回步骤S11，绘制下一个焦点框。如果当前坐标信息与终点坐标信息一致（即当前焦点框与终点焦点框一致），则执行步骤S14。

步骤S14，发送结束绘制的消息（标识为PAINT_DONE），然后退出绘制当前焦点框。具体而言，发送结束绘制的消息给预先设定的定时器，定时器在下一次收到结束绘制的消息之后退出绘制当前焦点框。之所以要在定时器下一次收到PAINT_DONE消息（结束绘制消息）才退出，而不是本次直接退出，是因为本次接收到的消息仍是PAINT_IN_TIMER（动态焦点框绘制消息），在绘制完最后一次当前焦点框后，才发出PAINT_DONE消息，而该PAINT_DONE消息是在定时器下一次才能接收到。

也就是说，在本实施例中，每隔固定时间，在初始焦点和终点焦点之间绘制一次当前焦点框，直到当前坐标信息与终点坐标信息一致，以产生浏览器焦点的动态移动效果。举例而言，参阅图3所示，第（1）图至第（5）图展示了浏览器焦点从左至右的动态移动过程，而传统的焦点移动技术只会产生第（1）图和第（5）图的显示效果。

本发明的关键点在于通过Timer消息机制多次绘图焦点框，Timer消息里面直接计算当前焦点框的坐标信息，焦点框多次直接绘制没有用到Surface，而且页面也更加简洁，更加快捷方便。

Timer消息刷新机制为多次绘制焦点框打下了基础，在这个机制上可以实现焦点的动态移动，通过在Timer中循环调用Ontimer函数，可以多次接收动态焦点框绘制消息，实现多次绘制焦点框。

在本实施例中，通过真焦点的绘制方法实现浏览器焦点的动态移动效果。

1.真焦点实现方法如下：

<div style="position:absolute;//绝对坐标位置

left:0px;top:0px;width:90px;height:32px;">

</a>

其中，left代表焦点框距离浏览器页面最左端的距离，top代表焦点框距离浏览器页面最上端的距离，width代表焦点框的宽度，height代表焦点框的高度。

在其它实施例中，也可以通过假焦点设置2D图片的方法实现浏览器焦点的动态移动效果。

2.假焦点实现方法如下：

由此可知，假焦点的动态移动要用到大量Java Script（JS）写法，将增加页面的书写难度。而通过真焦点的方式多次直接绘制焦点框没有用到Surface内存，更加快捷方便，且节约内存，因为假焦点中的2D图片特效，每次都要创建一块内存，用于对图片数据的存储和显示。

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

Claims

1.一种浏览器焦点动态移动方法，其特征在于，该方法包括如下步骤：

获取浏览器的初始焦点框的初始坐标信息和终点焦点框的终点坐标信息；

当根据初始坐标信息绘制完初始焦点框后，每隔固定时间，计算出当前焦点框的当前坐标信息；

根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上；及

如果当前坐标信息与终点坐标信息一致，则退出绘制当前焦点框。

2.如权利要求1所述的浏览器焦点动态移动方法，其特征在于，所述初始焦点框是以初始焦点为中心的一个方形区域，所述终点焦点框是以终点焦点为中心的一个方形区域，所述当前焦点框是以当前焦点为中心的一个方形区域。

3.如权利要求1所述的浏览器焦点动态移动方法，其特征在于，该方法还包括步骤：

当绘制完初始焦点框后，每隔固定时间发送一个动态焦点框绘制消息给预先设定的定时器，定时器接收到该动态焦点框绘制消息后，计算出当前焦点框的当前坐标信息。

4.如权利要求3所述的浏览器焦点动态移动方法，其特征在于，所述当前焦点框的当前坐标信息根据初始焦点框的初始坐标信息，以预先设定的步进距离移动，直至当前坐标信息与终点坐标信息一致。

5.如权利要求3所述的浏览器焦点动态移动方法，其特征在于，该方法还包括步骤：

如果当前坐标信息与终点坐标信息一致，则发送结束绘制的消息给预先设定的定时器，定时器在下一次收到结束绘制的消息之后退出绘制当前焦点框。

6.一种浏览器焦点动态移动系统，其特征在于，该系统包括：

获取浏览器的初始焦点框的初始坐标信息和终点焦点框的终点坐标信息的模块；

当根据初始坐标信息绘制完初始焦点框后，每隔固定时间，计算出当前焦点框的当前坐标信息的模块；

根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上的模块；及

如果当前坐标信息与终点坐标信息一致，则退出绘制当前焦点框的模块。

7.如权利要求6所述的浏览器焦点动态移动系统，其特征在于，所述初始焦点框是以初始焦点为中心的一个方形区域，所述终点焦点框是以终点焦点为中心的一个方形区域，所述当前焦点框是以当前焦点为中心的一个方形区域。

8.如权利要求6所述的浏览器焦点动态移动系统，其特征在于，该系统还包括：

当绘制完初始焦点框后，每隔固定时间发送一个动态焦点框绘制消息给预先设定的定时器的模块，定时器接收到该动态焦点框绘制消息后，计算出当前焦点框的当前坐标信息。

9.如权利要求8所述的浏览器焦点动态移动系统，其特征在于，所述当前焦点框的当前坐标信息根据初始焦点框的初始坐标信息，以预先设定的步进距离移动，直至当前坐标信息与终点坐标信息一致。

10.如权利要求8所述的浏览器焦点动态移动系统，其特征在于，该系统还包括：

如果当前坐标信息与终点坐标信息一致，则发送结束绘制的消息给预先设定的定时器的模块，定时器在下一次收到结束绘制的消息之后退出绘制当前焦点框。