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):

      pblmMask.png

       

      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