首先我们先新建一个MXML COMPONENT , 假设名字叫NavCircle.mxml
然后我们制作导航需要的图片,如下所示:
把这个图片放入项目中,并指定其click事件:
好啦,界面基本完成,下面就是代码部分啦
看图,这是两个圆组成的一个环。然后8个方向把圆分成均等的8份。那么一份所占的角度就是360/8 = 22.5度
那么只要计算鼠标落在圆环上的角度,就可以算出我们实际导航的方位了,就这么简单
首先,实现click事件:
// 鼠标x坐标
var x : Number = event.stageX;
// 鼠标y坐标
var y : Number = event.stageY;
// 圆心坐标
var circlePoint : Point = new Point(60,532);
// 外圆半径
var br : int = 57;
// 内圆半径
var lr : int = 40;
// 判断方位
var ret : String = checkValidate(x,y,circlePoint,br,lr);
// 处理方位
if(ret!=null) ...{
Alert.show(ret);
}
}
这个很简单,只是取得鼠标坐标,然后丢给方位判断函数。
至于圆心坐标,可以在clickrect方法中用trace跟踪x和y,运行程序,然后在圆心处点击得到,嘿嘿。
当然,在现实中,这个也是从引用这个控件的Application提供这个数据,我比较懒,就在这里写死了。
然后,就是判断区域的函数啦,代码如下:
// 鼠标到y轴的距离
var x1 : Number = x-circlePoint.x;
// 鼠标到x轴的距离
var y1 : Number = y-circlePoint.y;
// 鼠标到圆心的距离
var r1 : Number = Math.sqrt(Math.pow(x1,2)+Math.pow(y1,2));
// 判断是否在环内
if(r1 >= lr && r1<= br) ...{
// 计算目前弧度
var hudu : Number = Math.asin(Math.abs(x1)/r1);
// 换算成角度
var degree : Number = hudu*180/Math.PI;
// 判断落在哪个角度上
if(degree>0 && degree<=22.5) ...{
// 判断方位
if(y1<0)
return "n";
else
return "s";
}
else if(degree>22.5 && degree <=45) ...{
if(y1<0)
return "nw";
else
return "sw";
}
else if(degree>45 && degree <=67.5) ...{
if(x1>0)
return "se";
else
return "sw";
}
else if(degree>67.5 && degree <=90) ...{
if(x1>0)
return "e";
else
return "w";
}
else return null;
}
else
return null;
}
参数,x , y 为当前鼠标位置;circlePoint 为圆心坐标;br为外圆半径,lr为内圆半径,这个在前面已经提到了。
首先,我们以圆心为原点,做坐标系,如图:
然后判断鼠标是否点在了圆环内,if(r1 >= lr && r1<= br)
再利用 弦长 l = 2* 半径r * sin(弧度x) 公式 来算出x,也就是要求的弧度,再把弧度转成角度。
由于使用了绝对值,所以所得角度只在0~90度之间。
我们在根据观察判断,北和南为-22.5度和22.5度之间,只是分别在y 轴的两侧
同理东和西在67.5度和90度之间,只是分别在x轴两侧,以此类推
于是就可以判断出8个方位了。