首先我们先新建一个MXML COMPONENT , 假设名字叫NavCircle.mxml
然后我们制作导航需要的图片，如下所示：
把这个图片放入项目中，并指定其click事件：
好啦，界面基本完成，下面就是代码部分啦
看图，这是两个圆组成的一个环。然后8个方向把圆分成均等的8份。那么一份所占的角度就是360/8 = 22.5度
那么只要计算鼠标落在圆环上的角度，就可以算出我们实际导航的方位了，就这么简单
首先，实现click事件：
这个很简单，只是取得鼠标坐标，然后丢给方位判断函数。
至于圆心坐标，可以在clickrect方法中用trace跟踪x和y，运行程序，然后在圆心处点击得到，嘿嘿。
当然，在现实中，这个也是从引用这个控件的Application提供这个数据，我比较懒，就在这里写死了。
然后，就是判断区域的函数啦，代码如下：
参数，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个方位了。