首先我们先新建一个MXML COMPONENT , 假设名字叫NavCircle.mxml
然后我们制作导航需要的图片,如下所示:
把这个图片放入项目中,并指定其click事件:
<
mx:Image
styleName
="Btns"
x
="0"
y
="0"
source
="user.jpg"
click
="clickrect(event)"
/>
好啦,界面基本完成,下面就是代码部分啦
看图,这是两个圆组成的一个环。然后8个方向把圆分成均等的8份。那么一份所占的角度就是360/8 = 22.5度
那么只要计算鼠标落在圆环上的角度,就可以算出我们实际导航的方位了,就这么简单
首先,实现click事件:
private
function
clickrect(event : MouseEvent) :
void
...
{ // 鼠标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提供这个数据,我比较懒,就在这里写死了。
然后,就是判断区域的函数啦,代码如下:
private
function
checkValidate(x: Number,y: Number,circlePoint : Point,br: Number,lr: Number) : String
...
{ // 鼠标到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个方位了。