Probleme with Bitmapdata.draw() on masked Objects

programming flash
1

Hello everyone,
After several days of unsuccesful research, I hope someone here can help me (or show me where I’m wrong) on my issue.

I’m trying to create a simple unregular shape crop application where a user can hand draw a shape on an image and the shape (in my case a Path Object) will act as a mask. This work fine the original image is masked and only the outlined area if visible.
On the next step I want to create a new bitmapdata that only contains the “crop” result…(here comes my problem) but when I display the new bitmapdata it s like if the mask translated thus le result is just wrong.
Here is what I have:

and here’s the code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
     <fx:Script>
          <![CDATA[
               import flash.filters.*;     
                         
               private var ox:Number;
               private var oy:Number;
               [Bindable] public var path:String;               
          
               public var bitmapd:BitmapData;
               
               [Bindable] private var offsetX:Number = 0;
               [Bindable] private var offsetY:Number = 0;
               
                         
 
 
               protected function group1_mouseDownHandler(event:MouseEvent):void
               {
                    img.mask = null;
                    offsetX = imgGrp.mouseX;
                    offsetY = imgGrp.mouseY;
                    
                    addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
                    path = "M "+ offsetX + " "+offsetY;
               }
 
               private function onMouseMove(me:MouseEvent):void{
                    offsetX=Math.min(offsetX,imgGrp.mouseX);
                    offsetY=Math.min(offsetY,imgGrp.mouseY);
                    path += " L "+imgGrp.mouseX+ " "+ imgGrp.mouseY;
                    p.data = path;                         
               }
 
               protected function group1_mouseUpHandler(event:MouseEvent):void
               {
                    removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
                    path += " z";
                    p.data = path;
                    var bmd:BitmapData = new BitmapData(p.width, p.height);
                    var bmd2:BitmapData = new BitmapData(p.width, p.height);
                    var m:Matrix = new Matrix();
                    
                    m.translate(-offsetX, -offsetY);
                    
                    bmd2.draw(img,m);                    
                    bmpImg.source = bmd2;
                    
                    img.mask = maskGrp; //apply the mask
                    bmd.draw(img,m);
                    img.mask = null; //apply the mask
                    bmpImgMask.source = bmd; //Wrong output !!
                    
                    
               }
          
 
 
          ]]>
     </fx:Script>
 
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <s:layout>
          <s:VerticalLayout horizontalAlign="center" gap="0" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"/>
     </s:layout>
     <s:HGroup gap="0">
          <s:Group mouseDown="group1_mouseDownHandler(event)" mouseUp="group1_mouseUpHandler(event)" id="imgGrp">
               <mx:Image source="http://farm4.static.flickr.com/3652/3309037456_aed0c4ea0a_b.jpg" id="img" />
               <s:Group id="maskGrp" maskType="clip">
                    <s:Path id="p">
                    <s:stroke>
                         <s:SolidColorStroke color="0x00ff00" weight="10" />
                    </s:stroke>
                         <s:fill>
                              <s:SolidColor color="0x0" alpha="0" />
                         </s:fill>
                    </s:Path>
                    
               </s:Group>
               <s:Rect id="r" width="{p.width}" height="{p.height}" x="{offsetX}" y="{offsetY}">
                    
                    <s:stroke>
                         <s:SolidColorStroke color="0xff00ff" />
                    </s:stroke>
               </s:Rect>                    
          
     </s:Group>
          <s:VGroup gap="10" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
               <s:BitmapImage id="bmpImg" />     
               <s:BitmapImage id="bmpImgMask" />                    
          </s:VGroup>          
     </s:HGroup>     
</s:Application>

Thanks for your help.
-G