焦点框生成方案及案例说明.doc

焦点框生成说明文档 0. 目的 1 1. 概要 1 2. 画面结构图 2 3.数据结构说明 3 4.例子说明 5 4.1例子说明 5 4.2区域划分 6 4.2.1.区域划分规则 7 4.3区域位置定位 7 4.4区域结构化 8 4.5区域关系映射 9 4.6区域焦点框点击处理设置 10 4.7焦点框生成 11 4.7.1区域集作成 11 4.7.2默认焦点作成 11 4.7.3画面HTML对象作成 11 4.7.4焦点框初始化(生成各个区域的焦点框和各个区域关系的建立等处理) 12 4.7.5重置之前焦点框 12 目的 对于IPTV页面开发来说，焦点框的位置定位和移动关系的建立是非常耗时的一件事，为了简化此工作，提高工作效率，本文将讲述如何自动生成页面焦点框。从而使程序员只需关注 焦点框具体逻辑处理。 概要 焦点框(Rectangle)生成做法是基于每个划定的区域(Area)中，所包含的各个焦点框的宽度、高度是一样的。 这样设定之后，对于一个画面(HTML)中，就是由许多的区域(抽象为：Area)组成，而对于每个区域Area，则由许多个焦点框(抽象为：Rectangle)组成。那么具体焦点框的移动可以视为焦点框从一个区域移动到另一个区域。 据此对于焦点(抽象为：Focus)移动来说，可以通过设置一个焦点框的宽度、高度、左边距、上边距来移动。该焦点框可以是一张背景图片，一个黄色的边框(可以自定义样式) 画面结构图 基于【1.概要中所抽象的数据对象】，对于一个HTML页面可以 抽象成下面的结构： 3.数据结构说明 本内容对【2画面结构】中的数据结构做简单的说明，如下，具体可以详细内容可以看focus.js文件 数据结构 属性 是否必须 说明 HTML areas 是 构成页面的所有区域 defaultFocus 是 初始画面是的默认焦点框的位置 activedFocus 否 当前激活的焦点框的位置 Area width 是 该区域的总宽度 height 是 该区域的总高度 fw 是 该区域内焦点框的宽度 fh 是 该区域内焦点框的高度 hSpace 是 该区域内各个焦点框之间的水平间隔 vSpace 是 该区域内各个焦点框之间的垂直间隔 leftSpace 是 该区域距离画面左边的距离 topSpace 是 该区域距离画面上边的距离 handlerInfos 是 该区域内焦点框触发事件时，需要的信息 Focus src 是 焦点框样式图片 fw 是 焦点框宽度 fh 是 焦点框高度 func 否 处理该焦点框的函数 left 是 焦点框左边距 top 是 焦点框右边距 备注：handlerInfos：是一个数据对象，结构如下： handlerInfos={ execute:function(html){ //ToDo： 所属区域内的焦点框比较点击时， //所执行的逻辑，在此执行。 //即：该方法处理焦点框点击的逻辑或动作 //参数html，是整个html数据对象 //在此方法中可以通过this.handlerId获取当前焦点框在 //该区域是第几个位置即下标，每个区域的开始下标是0 }, 属性1, ……, 属性n } 上面属性1…..属性n,是方法execute中需要使用的一些信息，根据实际情况进行设计，不是必须项。 4.例子说明 4.1例子说明 本例以周杰伦新歌为例，本专区的背景如下： 4.2区域划分 根据【1.概要】中所说，焦点框高度、宽度一样的可以化为一个区域(Area)，所以上面的专区可以化分为3个区域，分别为下图红色框标示的部分： 4.2.1.区域划分规则 区域划分，可以稍微大一点，遵循：水平各个焦点框的宽度之和+水平各个焦点框的间隔之和区域宽度水平各个焦点框的宽度之和+水平各个焦点框的间隔之和+半个焦点框的宽度。 简单的说就是 所划区域应该把相同焦点框包含在内，不能超过太多 防止生成多余的、无用的焦点框 4.3区域位置定位 根据【3数据结构说明】，将所划好的进行定量化，具体如下： 即测量出各个区域的width、height、fw、fh、leftSpace、toopSpace、hSpace、vSpace 具体测量结果如下： 上面测量工具为：MarkMan，从网下下载安装。安装前请 先安装：AdobeAIRInstaller.exe。因为MarkMan是基于此插件进行开发的。 4.4区域结构化 将以测量好的各个区域进行程序化，即用封装成设计好的数据结构(Area) 如下：(以下是进行微调之后的结果，因为图上测量的结构不够准确，所以一般按照测量的结构进行数据化之后，运