Flex Store sample application - Flex Interface Guide (FIG): The Pan|Zoom component

User level

Intermediate

Most of the standard Flex data controls display content sequentially, as does the List component, or as a table, as does DataGrid component. ThePan|Zoom component displays content spatially, as a two-dimensional surface that users can navigate around or zoom in and out to view the content. ThePan|Zoom component allows you to display spatial content types that the standard Flex controls don’t support well, such as maps and large images and diagrams.

Demo: The Pan|Zoom component. Note that this component is still in beta. Feel free to use it however you wish, but keep in mind that parts may contain bugs. Give us feedback on theFlex Interface Guide Forum.

To download and view the full source, right-click the Flex application and select View Source from the context menu. Otherwise, you can use the download link below.

Download the code

Note: This component is licensed as Sample Code as defined in theFlex End User License Agreement. You may use the sample code in your products, commercial or not.

Component guidelines

• Use the Pan|Zoom control to allow users to navigate within large amounts of spatially organized data.
• Use the Pan|Zoom control when users will mostly want to focus on a subset of the spatial information.
• Combine the Pan|Zoom control with the Callout control to show important details in place on the spatial surface.
• Do not use the Pan|Zoom control when users will want to see the content all at once. Instead, simply render the content as an Image.
• Use the slider and zoom in/zoom out buttons to allow users to alter the zoom level.
• Always use the hand cursor when the user is panning.

Component features

The features of the component are as follows:

• Panning using drag-and-drop.
• Clicking the image re-centers the content within the view.
• Double-clicking the image re-centers the view of the image and zooms in on the content.
  
• Shift-double-clicking the image re-centers the view and zooms out on the content.
  
• Dragging past the edge of the image is prevented. The content returns to position after the user releases the mouse.
  How to use the component

The Pan|Zoom component functionality is built around a Command Design Pattern. The Command Design Pattern classically consists of five elements.

• Command Interface (ICommand.as)
• Concrete Command (PanMouseCommand.as, ZoomCommand.as, and so forth)
• A Reciever (any UIComponent; a map for this example)
• A Client (PanZoomContainer.as)
• An Invoker (PanZoomCommandMode.as)

The Command Design Pattern encapsulates functionality into a Command Class. The Commands are then driven from the Client to the Receiver through an Invoker class. This decoupling of the Client from the Receiver allows for a range of features that would be difficult to implement otherwise and offers flexibility in development.

The Pan|Zoom component implementation differs slightly in that the Invoker class implements an ICommandMode interface. While not used in this example, this interface allows the developer to activate or deactivate thePan|Zoom component controls as a whole, which would be necessary in any real-world usage.

This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.

Comments (3)

Comments

• Gabor Wraight October 13, 2010
  

  Hi everyone,
    
  I added a little fix to keep the bitmap in sight, when zooming out.  
  Where 700 and 423 is my ImageViewer width & height.
    
  public function zoom(direction:String):void
     {
      zoomDirection = direction;
      
      var _animateProperty:AnimateProperty = new AnimateProperty(this);  
      _animateProperty.property = "bitmapScaleFactor";
      
      _animateProperty.addEventListener(TweenEvent.TWEEN_UPDATE, handleTween);
      _animateProperty.addEventListener(TweenEvent.TWEEN_END, handleTween);  
      
      switch (direction)
      {
       case "in":
        
        if (_bitmapScaleFactor * 2 > bitmapScaleFactorMax)
        {
         _animateProperty.toValue = bitmapScaleFactorMax;
          
        } else
        {
         _animateProperty.toValue = _bitmapScaleFactor * 2;    
        }    
        break;
        
       case "out":
        
        if (_bitmapScaleFactor / 2 > bitmapScaleFactorMax)
        {
         _animateProperty.toValue = bitmapScaleFactorMax;
          
        } else
        {
         _animateProperty.toValue = _bitmapScaleFactor / 2;    
        }    
        break;      
      }
    
      
      _animateProperty.play();
      
      function handleTween(e:TweenEvent):void
      {    
       switch (e.type)
       {
        case "tweenUpdate":
         skipUpdateEvent = true;
          
         _contentRectangle.zoom = bitmapScaleFactor;        
          
         // adjust x & y so the map stays centered        
         // left edge
         if(_contentRectangle.x > 0 ){
          _contentRectangle.x = 0;
         }      
         // top
         if(_contentRectangle.y > 0){
          _contentRectangle.y = 0;
         }
         // right edge
         if(_contentRectangle.x + _bitmap.width*bitmapScaleFactor < 700){
          _contentRectangle.x = 0 - _bitmap.width*bitmapScaleFactor + 700;
         }      
         // bottom
         if(_contentRectangle.y + _bitmap.height*bitmapScaleFactor < 423){
          _contentRectangle.y = 0 - _bitmap.height*bitmapScaleFactor + 423;
         }        
          
         break;
        
        case "tweenEnd":
         skipUpdateEvent = false;
         _contentRectangle.zoom = bitmapScaleFactor;  
         _animateProperty.removeEventListener(TweenEvent.TWEEN_END, handleTween);  
         _animateProperty.removeEventListener(TweenEvent.TWEEN_UPDATE, handleTween);
         break;
       }
      }      
                      
     }

• Patrick Force January 8, 2011
  

  If you're looking for a pan zoom component supporting panning containers and other Flex content besides bitmaps, check outhttp://www.rockholla.org/technology/2011/01/07/flex-as3-pan-zoom-component

• Tom Chiverton(Moderator) January 14, 2011
  

  The right click view source is broken, but the .zip download is OK.

Please sign in to improve or rate the content.

 

laizi : http://www.adobe.com/devnet/flex/samples/fig_panzoom.html