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,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,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,y2:Number):void{ ? ?
/*画实线*/
mainCanvas.graphics.lineStyle(1,y1);
mainCanvas.graphics.lineTo(x2,y2);
}
而在调用的时候，都是四次调用，用4根直线来进行曲线救国策略。
/**
?* 框选事件
?* sq
?*/
public function onMoveSelect(e:MouseEvent):void {?
mainCanvas.graphics.clear();
drawLine(p0.x,p0.x,mouseY);
drawLine(p0.x,mouseX,p0.y);
drawLine(p0.x,mouseY,mouseY);
drawLine(mouseX,mouseY);
}
