用Group代替Canvas实现shape作遮罩

下面是代码：
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="475" height="655"
         creationComplete="windowedapplication1_creationCompleteHandler(event)">
<fxeclarations>
   <!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fxeclarations>
<fx:Script>
   <![CDATA[
    import mx.events.FlexEvent;
    public var _shape:Shape=new Shape
    //private var size:uint           = 80;
    private var bgColor:uint       = 0xFFCC00;
    private var borderColor:uint  = 0x666666;
    private var borderSize:uint   = 0;
    private var cornerRadius:uint = 9;
    private var gutter:uint       = 5;
    protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void{
     mycan.rawChildren.addChild(_shape)
     /* mycan.addChild(_shape)
      this.addElement(mycan) //这样不支持鼠标事件了*/
     drawGradient ()
    }
    public function drawGradient ():void {
     _shape.graphics.clear();
     _shape.graphics.beginFill(bgColor);
     _shape.graphics.lineStyle(borderSize, borderColor);
     _shape.graphics.drawRect(0, 0, 475, 655);
     _shape.graphics.endFill();
     _shape.alpha=0.2
    }
   ]]>
</fx:Script>
<!--想把下面的Canvas换成Group,仍然让_shape在TextArea上面，但不能让_shape遮罩了TextArea,且TextArea可支持鼠标事件-->
<mx:Canvas id="mycan"> 
   <s:TextArea text="11122255"/>
</mx:Canvas>

<!--<s:Group>
  
   <s:TextArea text="11122255"/>
 
</s:Group>
<mx:UIComponent id="mycan"/> 这样不支持鼠标事件了-->
</s:WindowedApplication>