Flex/Flash Developer - by Ankur Arora

Hi,
It has been long time since I posted anything here. You know lots of work and could not able to spend time on my blog. Nevertheless, it is never late. Today I'm writing a new helpful post for you which will allow you to create a Canvas in Flex where you can Pan the content of it. That means if content in the canvas is bigger than the canvas then you can drag your mouse and move the content.

To accomplish this we need to create a new class called PanCanvas which will extend to Canvas class. Here is the code for the class.
Code:

package ankur.classes.pancanvas
{
 import flash.events.Event;
 import flash.events.MouseEvent;
 import mx.containers.Canvas;

        
        public class PanCanvas extends Canvas
        {

  private var orgX:Number;
  private var orgY:Number;
  private var orgHScrollPosition:Number;
  private var orgVScrollPosition:Number;
  private var _childrenDoDrag:Boolean = true;
            
            
  public function get childrenDoDrag():Boolean {
   return this._childrenDoDrag;
  }
            
            
  public function set childrenDoDrag(value:Boolean):void {
   this._childrenDoDrag = value;
  }
            
  override protected function createChildren():void {
   super.createChildren();
   this.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
  }
                
                
  protected function startDragging(event:MouseEvent):void
  {


   if(event.target.parent == this.verticalScrollBar ||
   event.target.parent == this.horizontalScrollBar) 
   {
    return;
   }
  
                
                
   if(_childrenDoDrag || event.target == this) 
   {
    orgX = event.stageX;
    orgY = event.stageY;

    orgHScrollPosition = this.horizontalScrollPosition;
    orgVScrollPosition = this.verticalScrollPosition;

    systemManager.addEventListener(
        MouseEvent.MOUSE_MOVE, systemManager_mouseMoveHandler, true);

    systemManager.addEventListener(
        MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);

    systemManager.stage.addEventListener(
        Event.MOUSE_LEAVE, stage_mouseLeaveHandler);
   }
  }
            
            
           
  private function systemManager_mouseMoveHandler(event:MouseEvent):void
  {
  
   event.stopImmediatePropagation();

   this.verticalScrollPosition = orgVScrollPosition - (event.stageY - orgY);
   this.horizontalScrollPosition = orgHScrollPosition - (event.stageX - orgX);
  }
        
           
  private function systemManager_mouseUpHandler(event:MouseEvent):void
  {
   if (!isNaN(orgX))
    stopDragging();
  }
        
           
  private function stage_mouseLeaveHandler(event:Event):void
  {
   if (!isNaN(orgX))
       stopDragging();
  }
            
           
  protected function stopDragging():void
  {
   systemManager.removeEventListener(
       MouseEvent.MOUSE_MOVE, systemManager_mouseMoveHandler, true);

   systemManager.removeEventListener(
       MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);

   systemManager.stage.removeEventListener(
       Event.MOUSE_LEAVE, stage_mouseLeaveHandler);

   orgX = NaN;
   orgY = NaN;
  }
        }
}

Now to use PanCanvas in your code you can use below MXML code.

Code:

<pancanvas:pancanvas height="100%" width="100%" y="40">
 <mx:image source="@Embed(source='assets/4_HiredGun_1280.jpg')" />
</pancanvas:pancanvas>

If you need the source code please follow below link.

Source Code
http://www.ankur-arora.com/samples/PanCanvas.zip

Please rate this post if it is of your help. This will boost me to write more such posts.