9 Replies Latest reply on Mar 19, 2011 8:11 PM by Flex harUI

    Probleme with Bitmapdata.draw() on masked Objects

    Guillaume Nachury

      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 (larger version here):



      and here's the code:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
                     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{
                          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);
                          bmpImg.source = bmd2;
                          img.mask = maskGrp; //apply the mask
                          img.mask = null; //apply the mask
                          bmpImgMask.source = bmd; //Wrong output !!
                <!-- Place non-visual elements (e.g., services, value objects) here -->
                <s:VerticalLayout horizontalAlign="center" gap="0" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"/>
           <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:SolidColorStroke color="0x00ff00" weight="10" />
                                    <s:SolidColor color="0x0" alpha="0" />
                     <s:Rect id="r" width="{p.width}" height="{p.height}" x="{offsetX}" y="{offsetY}">
                               <s:SolidColorStroke color="0xff00ff" />
                <s:VGroup gap="10" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
                     <s:BitmapImage id="bmpImg" />     
                     <s:BitmapImage id="bmpImgMask" />                    


      Thanks for your help.