用最简单的判断确定9个区域
有时候我们会遇到需要判断鼠标所在场景区域的情况, 类似的典型应用是地图导航时鼠标的形状, 即根据鼠标所在区域显示不同的鼠标图标 (见演示).
但如果直接判断可能会涉及到嵌套判断, 代码量大, 无疑那样是很不优雅的. 上面例子中使用了非常简单的判断就确定了9个区域. (见示意图)
| 4 | 3 | 5 |
| 1 | 0 | 2 |
| 7 | 6 | 8 |
上表中显示了各方向对应的值, 左中右进行了一组判断, 确定1, 0, 2 三个中的一个值, 上中下也进行一组判断, 确定了3, 0, 6 三个中的一个值, 其他四个方向的值为以上两个值(相邻两个方向)相加得出(如果两个值都不为0).
请看具体实现代码或下载源文件:
PLAIN TEXT >> ACTIONSCRIPT:
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
-
backgroundColor="#eeeeee" initialize="initApp();">
-
<mx:Script>
-
<![CDATA[
-
/**
-
* Author: Seven Yu
-
* Email: dofyyu at gmail dot com
-
* URI: http://phpz.org/?p=48
-
* */
-
import mx.controls.Image;
-
-
// 定义鼠标图标
-
[Embed(source="icons/center.png")]
-
private var mCenter:Class;
-
[Embed(source="icons/left.png")]
-
private var mLeft:Class;
-
[Embed(source="icons/right.png")]
-
private var mRight:Class;
-
[Embed(source="icons/up.png")]
-
private var mUp:Class;
-
[Embed(source="icons/down.png")]
-
private var mDown:Class;
-
[Embed(source="icons/left_up.png")]
-
private var mLeftUp:Class;
-
[Embed(source="icons/left_down.png")]
-
private var mLeftDown:Class;
-
[Embed(source="icons/right_up.png")]
-
private var mRightUp:Class;
-
[Embed(source="icons/right_down.png")]
-
private var mRightDown:Class;
-
// 背景图片
-
[Embed(source="images/map.png")]
-
private var iMap:Class;
-
// 图标标识索引
-
private var iconIndex:int;
-
private var oldIndex:int;
-
// 移动步长
-
private var xStep:int = 0;
-
private var yStep:int = 0;
-
// 背景图对象
-
private var _bgImage:Image = new Image();
-
// 移动速度 和 鼠标偏移量
-
private const SPEED:Number = 5;
-
private const OFFSET:Number = 8; // 图片大小的一半
-
// 角度数组 (没有应用)
-
private var angleArray:Array = [180, 0, -90, -135, -45, 90, 135, 45];
-
// 图标数组
-
private var iconArray:Array = [mCenter, mLeft, mRight, mUp, mLeftUp,
-
mRightUp, mDown, mLeftDown, mRightDown];
-
// 偏移倍数数组
-
private var offsetArray:Array = [{x:-1, y:-1}, {x:0, y:-1}, {x:-2, y:-1}, {x:-1, y:0},
-
{x:0, y:0}, {x:-2, y:0}, {x:-1, y:-2}, {x:0, y:-2}, {x:-2, y:-2}];
-
/**
-
* 初始化
-
* */
-
private function initApp():void
-
{
-
// 关闭滚动条
-
horizontalScrollPolicy = "off";
-
verticalScrollPolicy = "off";
-
// 绑定事件
-
addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
-
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
-
// 添加背景图
-
_bgImage.source = iMap;
-
addChild(_bgImage);
-
}
-
/**
-
* 鼠标移动处理函数
-
* */
-
private function moveHandler(event:MouseEvent):void
-
{
-
var leftLine:Number = width / 3; // 左参考线
-
var rightLine:Number = leftLine * 2; // 右参考线
-
var upLine:Number = height / 3; // 上参考线
-
var downLine:Number = upLine * 2; // 下参考线
-
-
var mouseXFlag:int; // 左右参考值
-
var mouseYFlag:int; // 上下参考值
-
// iconIndex = mouseXFlag + mouseYFlag;
-
// mouseXFlag 和 mouseYFlag 的参考值及 iconIndex 的计算方法见示意图
-
-
// 左右参考值
-
if (mouseX <leftLine)
-
{
-
xStep = 1;
-
mouseXFlag = 1;
-
}
-
else if (mouseX> rightLine)
-
{
-
xStep = -1;
-
mouseXFlag = 2;
-
}
-
else
-
{
-
xStep = 0;
-
mouseXFlag = 0;
-
}
-
// 上下参考值
-
if (mouseY <upLine)
-
{
-
yStep = 1;
-
mouseYFlag = 3;
-
}
-
else if (mouseY> downLine)
-
{
-
yStep = -1;
-
mouseYFlag = 6;
-
}
-
else
-
{
-
yStep = 0;
-
mouseYFlag = 0;
-
}
-
// 计算图标索引
-
iconIndex = mouseXFlag + mouseYFlag;
-
// 应用索引
-
if (oldIndex != iconIndex)
-
{
-
oldIndex = iconIndex;
-
cursorManager.removeAllCursors();
-
cursorManager.setCursor(iconArray[iconIndex], 2,
-
offsetArray[iconIndex].x * OFFSET, offsetArray[iconIndex].y * OFFSET);
-
}
-
}
-
/**
-
* 移动背景处理函数
-
* */
-
private function enterFrameHandler(event:Event):void
-
{
-
if (_bgImage.x>= width - _bgImage.contentWidth - xStep * SPEED
-
&& _bgImage.x <= 0 - xStep * SPEED)
-
_bgImage.x += xStep * SPEED;
-
else
-
xStep = 0;
-
-
if (_bgImage.y>= height - _bgImage.contentHeight - yStep * SPEED
-
&& _bgImage.y <= 0 - yStep * SPEED)
-
_bgImage.y += yStep * SPEED;
-
else
-
yStep = 0;
-
}
-
]]>
-
</mx:Script>
-
</mx:Application>
