Flex中鼠标框选绘图，及解决绘图被Flex组件遮挡的问题

1.首先说，在Flex中，实现鼠标拖动，在页面上画出矩形选框的实现方式。

主要有两种，一种是将其画出来，然后做为UI组件放在Flex上。

代码如下：

var bcCanvas:UIComponent=new UIComponent();
bcCanvas.graphics.beginFill(0xff0000,1);
bcCanvas.graphics.drawRect(p0.x,p0.y,drawWidth,drawHeight);
bcCanvas.graphics.endFill();
mainContainer.addElement(bcCanvas);

这种比较好用，但会出一个解决起来有些麻烦的问题，就是用鼠标在其他地方框选时，以前的框依旧存在。没法调用clear方法，因为它是组件。

第二种方法就是直接画。

代码如下：

mainContainer.graphics.beginFill(0xff0000,1);
mainContainer.graphics.drawRect(p0.x,p0.y,drawWidth,drawHeight);
mainContainer.graphics.endFill();

用这个方法的好处在于，可以调用clear方法来将前面画出来的清除掉。但还有一个新的问题，我的mainContainer是一个BorderContainer。当在它上面已经有了其他组件，如Image组件时，再调用上面的代码，自己画的会被组件遮挡住。

解决方法就是：

再加一个层，再层上画，这样，就完美解决了。代码如下：

<mx:Canvas id="mainCanvas"></s:BorderContainer>

mainContainer.addEventListener(MouseEvent.MOUSE_DOWN,onDownSelect);

private function onDownSelect(e:MouseEvent):void {
mainCanvas.graphics.clear();
p0.x=mouseX;
p0.y= mouseY;
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMoveSelect);
stage.addEventListener(MouseEvent.MOUSE_UP, onUpSelect);
}

private function onMoveSelect(e:MouseEvent):void {
drawWidth = mouseX - p0.x;
drawHeight = mouseY -p0.y;

mainCanvas.graphics.beginFill(0xff0000,1);
mainCanvas.graphics.drawRect(p0.x,p0.y,drawWidth,drawHeight);
mainCanvas.graphics.endFill();
}

private function onUpSelect(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMoveSelect);
}

但以上方法还有不足之处，就是它画出来的都是矩形，而我想要的结果是，它是一个空心的矩形，就像windows桌面的框选一样。

有两种处理方案，分别是画实线和画虚线。

第一种，画虚线。

/**
* 画鼠标框选的虚线
* sq
*/
public function drawDashLine(x1:Number, y1:Number, x2:Number, y2:Number):void{
/*画虚线*/
//第一个数值指定线的粗细程度，第二个参数指定虚线短线之间的间隔
var pattern:Array = [5,5];
var x:Number = x2 - x1;
var y:Number = y2 - y1;
var hyp:Number = Math.sqrt((x)*(x) + (y)*(y));
var units:Number = hyp/(pattern[0]+pattern[1]);
var dashSpaceRatio:Number = pattern[0]/(pattern[0]+pattern[1]);
var dashX:Number = (x/units)*dashSpaceRatio;
var spaceX:Number = (x/units)-dashX;
var dashY:Number = (y/units)*dashSpaceRatio;
var spaceY:Number = (y/units)-dashY;
mainCanvas.graphics.lineStyle(3, 0xc6e2ff,1);
mainCanvas.graphics.moveTo(x1,y1);
while (hyp > 0){
x1 += dashX;
y1 += dashY;
hyp -= pattern[0];
if (hyp < 0)
{
x1 = x2;
y1 = y2;
}
mainCanvas.graphics.lineTo(x1, y1);
x1 += spaceX;
y1 += spaceY;
mainCanvas.graphics.moveTo(x1, y1);
hyp -= pattern[1];
}
mainCanvas.graphics.moveTo(x2, y2);
}

第二种，画实线：

/**
* 画鼠标框选的实线
* sq
*/
public function drawLine(x1:Number, y1:Number, x2:Number, y2:Number):void{
/*画实线*/
mainCanvas.graphics.lineStyle(1,0xc6e2ff,1);
mainCanvas.graphics.moveTo(x1,y1);
mainCanvas.graphics.lineTo(x2,y2);
}

而在调用的时候，都是四次调用，用4根直线来进行曲线救国策略。

/**
* 框选事件
* sq
*/
public function onMoveSelect(e:MouseEvent):void {

mainCanvas.graphics.clear();
drawLine(p0.x,p0.y,p0.x,mouseY);
drawLine(p0.x,p0.y,mouseX,p0.y);
drawLine(p0.x,mouseY,mouseX,mouseY);
drawLine(mouseX,p0.y,mouseX,mouseY);

}