《焦点框生成方案及案例说明剖析》由会员分享，可在线阅读，更多相关《焦点框生成方案及案例说明剖析（12页珍藏版）》请在金锄头文库上搜索。
1、焦点框生成说明文档0.目的11.概要12.画面结构图23.数据结构说明34.例子说明54.1例子说明54.2区域划分64.2.1.区域划分规则74.3区域位置定位74.4区域结构化84.5区域关系映射94.6区域焦点框点击处理设置104.7焦点框生成114.7.1区域集作成114.7.2默认焦点作成114.7.3画面HTML对象作成114.7.4焦点框初始化(生成各个区域的焦点框和各个区域关系的建立等处理)124.7.5重置之前焦点框120. 目的对于IPTV页面开发来说，焦点框的位置定位和移动关系的建立是非常耗时的一件事，为了简化此工作，提高工作效率，本文将讲述如何自动生成页面焦点框。从而使
2、程序员只需关注 焦点框具体逻辑处理。1. 概要 焦点框(Rectangle)生成做法是基于每个划定的区域(Area)中，所包含的各个焦点框的宽度、高度是一样的。这样设定之后，对于一个画面(HTML)中，就是由许多的区域(抽象为：Area)组成，而对于每个区域Area，则由许多个焦点框(抽象为：Rectangle)组成。那么具体焦点框的移动可以视为焦点框从一个区域移动到另一个区域。据此对于焦点(抽象为：Focus)移动来说，可以通过设置一个焦点框的宽度、高度、左边距、上边距来移动。该焦点框可以是一张背景图片，一个黄色的边框(可以自定义样式)2. 画面结构图基于【1.概要中所抽象的数据对象】，对于
3、一个HTML页面可以抽象成下面的结构：3.数据结构说明本内容对【2画面结构】中的数据结构做简单的说明，如下，具体可以详细内容可以看focus.js文件数据结构属性是否必须说明HTMLareas是构成页面的所有区域defaultFocus是初始画面是的默认焦点框的位置activedFocus否当前激活的焦点框的位置Areawidth是该区域的总宽度height是该区域的总高度fw是该区域内焦点框的宽度fh是该区域内焦点框的高度hSpace是该区域内各个焦点框之间的水平间隔vSpace是该区域内各个焦点框之间的垂直间隔leftSpace是该区域距离画面左边的距离topSpace是该区域距离画面上边
4、的距离handlerInfos是该区域内焦点框触发事件时，需要的信息Focussrc是焦点框样式图片fw是焦点框宽度fh是焦点框高度func否处理该焦点框的函数left是焦点框左边距top是焦点框右边距备注：handlerInfos：是一个数据对象，结构如下：handlerInfos=execute:function(html)/ToDo： 所属区域内的焦点框比较点击时，/所执行的逻辑，在此执行。/即：该方法处理焦点框点击的逻辑或动作/参数html，是整个html数据对象/在此方法中可以通过this.handlerId获取当前焦点框在/该区域是第几个位置即下标，每个区域的开始下标是0, 属性1
5、, ,属性n 上面属性1.属性n,是方法execute中需要使用的一些信息，根据实际情况进行设计，不是必须项。4.例子说明4.1例子说明本例以周杰伦新歌为例，本专区的背景如下：4.2区域划分根据【1.概要】中所说，焦点框高度、宽度一样的可以化为一个区域(Area)，所以上面的专区可以化分为3个区域，分别为下图红色框标示的部分：Area3Area2Area14.2.1.区域划分规则 区域划分，可以稍微大一点，遵循：水平各个焦点框的宽度之和+水平各个焦点框的间隔之和区域宽度水平各个焦点框的宽度之和+水平各个焦点框的间隔之和+半个焦点框的宽度。简单的说就是 所划区域应该把相同焦点框包含在内，不能超过
6、太多 防止生成多余的、无用的焦点框4.3区域位置定位根据【3数据结构说明】，将所划好的进行定量化，具体如下：即测量出各个区域的width、height、fw、fh、leftSpace、toopSpace、hSpace、vSpace具体测量结果如下：上面测量工具为：MarkMan，从网下下载安装。安装前请 先安装：AdobeAIRInstaller.exe。因为MarkMan是基于此插件进行开发的。4.4区域结构化将以测量好的各个区域进行程序化，即用封装成设计好的数据结构(Area) 如下：(以下是进行微调之后的结果，因为图上测量的结构不够准确，所以一般按照测量的结构进行数据化之后，运行一下看看
7、焦点框是否合适，如果不合适需要进行区域(Area)属性的调整)var area1 = new HTML.Area(500, 97, 100, 96, 25, 0, 42, 290);var area2 = new HTML.Area(42, 57, 39, 56, 0, 0, 586, 309);var area3 = new HTML.Area(156, 40, 155, 39, 0, 0, 431, 473);4.5区域关系映射区域关系映射是指进行各个区域上、下、左、右区域的配置。本例3个区域的关系可以映射如下：(映射关系和焦点框移动的逻辑一致)。下面leftArea、rightArea、
8、upArea、bottomArea为区域类Area的属性，分别代表该区域的左区域、右区域、上区域、下区域。（1）区域1(area1)的映射关系area1.leftArea = area2 ;area1.rightArea = area2;area1.upArea = area3 ;area1.bottomArea = area3 ;/本区域默认焦点框样式图片设置,该区域各个焦点框样式可以不一样，如果需要不一样，需要设置成数组area1.setFocus(new HTML.Focus(focus.png);（2）区域2(area2)的映射关系area2.leftArea = area1 ;are
9、a2.rightArea = area1 ;area2.upArea = area3 ;area2.bottomArea = area3;/本区域默认焦点框样式图片设置,该区域各个焦点框样式可以不一样，如果需要不一样，需要设置成数组area2.setFocus(new HTML.Focus(focus.png);（3）区域3(area3)的映射关系area3.leftArea = area3 ;area3.rightArea = area3 ;area3.upArea = area1 ;area3.bottomArea = area1;/本区域默认焦点框样式图片设置,该区域各个焦点框样式可以不
10、一样，如果需要不一样，需要设置成数组area3.setFocus(new HTML.Focus(focus.png);4.6区域焦点框点击处理设置（1）区域1(area1)area1.handlerInfos = execute : function(html) /处理逻辑;（2）区域2(area2)area2.handlerInfos = execute : function(html) /处理逻辑;（3）区域3(area3)area3.handlerInfos = execute : function(html) /处理逻辑;4.7焦点框生成4.7.1区域集作成var areas = ar
11、ea1, area2,area3;4.7.2默认焦点作成var defaultFocus = new HTML.Focus(focus.png, 100, 96, null, 42,290);4.7.3画面HTML对象作成html = new HTML(areas, defaultFocus);4.7.4焦点框初始化(生成各个区域的焦点框和各个区域关系的建立等处理)html.init();4.7.5重置之前焦点框（1）当前焦点框信息保存html.reInitFocusId();_cAId=0,_cRId=0;（2）页面跳转之后，再次回到之前页面时焦点框的位置设置，即将焦点框设置为用户当前操作的位置或内容html.changeFocusForBack(true);
