焦点框生成方案及案例说明剖析.docx
- 文档编号:8288214
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:9
- 大小:1.36MB
焦点框生成方案及案例说明剖析.docx
《焦点框生成方案及案例说明剖析.docx》由会员分享,可在线阅读,更多相关《焦点框生成方案及案例说明剖析.docx(9页珍藏版)》请在冰豆网上搜索。
焦点框生成方案及案例说明剖析
焦点框生成说明文档
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
1.目的
对于IPTV页面开发来说,焦点框的位置定位和移动关系的建立是非常耗时的一件事,为了简化此工作,提高工作效率,本文将讲述如何自动生成页面焦点框。
从而使程序员只需关注焦点框具体逻辑处理。
2.概要
焦点框(Rectangle)生成做法是基于每个划定的区域(Area)中,所包含的各个焦点框的宽度、高度是一样的。
这样设定之后,对于一个画面(HTML)中,就是由许多的区域(抽象为:
Area)组成,而对于每个区域Area,则由许多个焦点框(抽象为:
Rectangle)组成。
那么具体焦点框的移动可以视为焦点框从一个区域移动到另一个区域。
据此对于焦点(抽象为:
Focus)移动来说,可以通过设置一个焦点框的宽度、高度、左边距、上边距来移动。
该焦点框可以是一张背景图片,一个黄色的边框(可以自定义样式)
3.画面结构图
基于【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个区域,分别为下图红色框标示的部分:
Area3
Area2
Area1
4.2.1.区域划分规则
区域划分,可以稍微大一点,遵循:
水平各个焦点框的宽度之和+水平各个焦点框的间隔之和<区域宽度<水平各个焦点框的宽度之和+水平各个焦点框的间隔之和+半个焦点框的宽度。
简单的说就是所划区域应该把相同焦点框包含在内,不能超过太多防止生成多余的、无用的焦点框
4.3区域位置定位
根据【3数据结构说明】,将所划好的进行定量化,具体如下:
即测量出各个区域的width、height、fw、fh、leftSpace、toopSpace、hSpace、vSpace
具体测量结果如下:
上面测量工具为:
MarkMan,从网下下载安装。
安装前请先安装:
AdobeAIRInstaller.exe。
因为MarkMan是基于此插件进行开发的。
4.4区域结构化
将以测量好的各个区域进行程序化,即用封装成设计好的数据结构(Area)
如下:
(以下是进行微调之后的结果,因为图上测量的结构不够准确,所以一般按照测量的结构进行数据化之后,运行一下看看焦点框是否合适,如果不合适需要进行区域(Area)属性的调整)
vararea1=newHTML.Area(500,97,100,96,25,0,42,290);
vararea2=newHTML.Area(42,57,39,56,0,0,586,309);
vararea3=newHTML.Area(156,40,155,39,0,0,431,473);
4.5区域关系映射
区域关系映射是指进行各个区域上、下、左、右区域的配置。
本例3个区域的关系可以映射如下:
(映射关系和焦点框移动的逻辑一致)。
下面leftArea、rightArea、upArea、bottomArea为区域类Area的属性,分别代表该区域的左区域、右区域、上区域、下区域。
(1)区域1(area1)的映射关系
area1.leftArea=[area2];
area1.rightArea=[area2];
area1.upArea=[area3];
area1.bottomArea=[area3];
//本区域默认焦点框样式图片设置,该区域各个焦点框样式可以不一样,如果需要不一样,需要设置成数组
area1.setFocus(newHTML.Focus("focus.png"));
(2)区域2(area2)的映射关系
area2.leftArea=[area1];
area2.rightArea=[area1];
area2.upArea=[area3];
area2.bottomArea=[area3];
//本区域默认焦点框样式图片设置,该区域各个焦点框样式可以不一样,如果需要不一样,需要设置成数组
area2.setFocus(newHTML.Focus("focus.png"));
(3)区域3(area3)的映射关系
area3.leftArea=[area3];
area3.rightArea=[area3];
area3.upArea=[area1];
area3.bottomArea=[area1];
//本区域默认焦点框样式图片设置,该区域各个焦点框样式可以不一样,如果需要不一样,需要设置成数组
area3.setFocus(newHTML.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区域集作成
varareas=[area1,area2,area3];
4.7.2默认焦点作成
vardefaultFocus=newHTML.Focus("focus.png",100,96,null,42,290);
4.7.3画面HTML对象作成
html=newHTML(areas,defaultFocus);
4.7.4焦点框初始化(生成各个区域的焦点框和各个区域关系的建立等处理)
html.init();
4.7.5重置之前焦点框
(1)当前焦点框信息保存
html.reInitFocusId();
_cAId=0,_cRId=0;
(2)页面跳转之后,再次回到之前页面时焦点框的位置设置,
即将焦点框设置为用户当前操作的位置或内容
html.changeFocusForBack(true);
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 焦点 生成 方案 案例 说明 剖析