1. 现在界面上放一个容器,如BorderContainer ,id为 "bc1" 设置其深度depth为3;
2. 在bc1上加入一些子元素,如3个button,id分别为bt1、bt2、bt3 ,各自的坐标请自行设置 ;
3. 在界面上再放一个容易BorderContainer,id为 "bc1" 设置其深度depth为2,表示其在bc1的下面,其backgroundAlpha值设为0.01 ;
4. 为bc1增加鼠标按下的监听事件: bc1.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
5. onMouseDown()方法的代码:
private function onMouseDown(e:MouseEvent):void { bc2.depth = 4; //将bc2的深度设为4,表示其显示在bc1之上 curPositionX = e.localX; //当前的x坐标 curPositionY = e.localY; //当前的y坐标 startPointX = curPositionX; //起点坐标x startPointY = curPositionY; //起点坐标y bc2.addEventListener(MouseEvent.MOUSE_MOVE,onResize); //为bc2增加鼠标移动事件 bc2.addEventListener(MouseEvent.MOUSE_UP,onMouseUp); //为bc2增加鼠标放开事件 }
6. onResize()方法的代码:
private function onResize(e:MouseEvent):void { curPositionX = e.localX; //当前的x坐标 curPositionY = e.localY; //当前的y坐标 endPointX = curPositionX; //结束点坐标x endPointY = curPositionY; //结束点坐标y drawBorder(); //画框 }
7. drawBorder()方法的代码:
private function drawBorder():void {//画框 var r_width:Number = Math.abs(startPointX - endPointX); //框的长 var r_height:Number = Math.abs(startPointY - endPointY); //框的宽 xCoordinate = Math.min(startPointX, endPointX); //框的x坐标 yCoordinate = Math.min(startPointY, endPointY); //框的y坐标 //recBorder为一个BorderContainer,在开头的变量中声明并且new一个,现在来为recBorder设定样式 recBorder.visible = true; recBorder.alpha = 1; recBorder.z = 3; recBorder.x = xCoordinate; recBorder.y = yCoordinate; recBorder.width = r_width; recBorder.height = r_height; recBorder.setStyle("borderWeight" , 2); recBorder.setStyle("backgroundAlpha", 0); bc2.addElement(recBorder); //把框添加到bc2中 //接下来判断bt1、bt2、bt3是否在框中,如果存在,则为按钮增加样式等,此处代码省略,请自由发挥 }
8. 多选玩以后,鼠标该放开了,这时候该让多选框消失了,多选完成。
private function onMouseUp(e:MouseEvent):void { recBorder.visible = false; //设置多选框为不可见 bc2.depth = 2; //设置bc2的深度为2,使其显示在bc1的下面 bc2.removeEventListener(MouseEvent.MOUSE_MOVE,onResize); //为bc2移除事件 bc2.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp); //为bc2移除事件 }