首先我们先新建一个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个方位了。
分享到:
相关推荐
FLEX控件
flex控件事件flex控件事件flex控件事件flex控件事件
Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表...
Flex更换主题 更换皮肤控件 Flex更换主题 更换皮肤控件 Flex更换主题 更换皮肤控件 Flex更换主题 更换皮肤控件 Flex更换主题 更换皮肤控件
flex自带的日期控件是没有时间选择的,本控件集成了时间的选择,另外时间的选择实现了可手动输入,输入的值可以定位下拉列表框. 导入方便,引用方便,提供多种输出格式. 经过测试完全OK,并且该控件已经应用于我们公司的...
这是一个基于Adobe Flash Builder 4开发的Flex多文件上传控件,这个是Flex源码,asp.net调用Flex的源码在另一个附件里
Flex视图切换,自定义控件Demo.rar Flex视图切换,自定义控件Demo.rar Flex视图切换,自定义控件Demo.rar Flex视图切换,自定义控件Demo.rar
可以实现缩入折叠,翻转折叠效果,很不错哦!
基于Flex开发的多文件上传控件,及在.Net平台下使用该控件的Demo
flex 制作的文本框组件,能够根据加载的字符串长度,自动调整文本框大小。将源码导入Flash builder即可使用。
一个自定义的拖拽flex控件,可以实现复制拖拽,不复制拖拽,可以拖拽图片,也可以由文字拖拽后变成图片。
Flex万年历记事本_flex源码
Flex 手绘百分比圆盘、三色渐变,具有动态效果!
针对flex新手熟悉flex 4.0以上版本控件
Flex 自定义 时间 日历 控件
flex8表格控件,可以方便的实现表格的数据处理,并且里面附带了全面的例子,解决很多程序员的表格问题
Flex控件图 Flex控件图 Flex控件图
Flex写的一个combox多选控件,小主一直用着的,暂未发现BUG,请大神多多指教!