Flex4 picture in the specified area to drag and drop the move, zoom picture size Example

If the picture is too large, usually we show the time to allow users to zoom through the mouse wheel, while clicking can drag and drop mobile (similar to the operation of Baidu map). Here's a sample demo:

The effect chart is as follows:

The code looks like this

<?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"                 backgroundcolor= "0x404040"                 creationcomplete= "Init (event)" >     < Fx:script>         <! [Cdata[            import mx.events.flexevent

;                            //Picture Scaling             private var _imgscale:

number = 1;             //Picture coordinates      

       private var _imgX:Number = 0;             private var _imgy:number

 = 0;                            /**           

   *  set up listening              */             protected function init ( event:flexevent): void             {                

Img.addeventlistener (Mouseevent.mouse_down, itemmousedown);                 

Img.addeventlistener (Mouseevent.mouse_up, itemmouseup);                 

Img.addeventlistener (Mouseevent.roll_out, itemmouseup);                 

Img.addeventlistener (Mouseevent.mouse_wheel, itemmousewheel);             }                             /**              *  Mouse down start drag               */             private function itemmousedown (event:mouseevent = null): void{                 var width:int = 

img.parent.width - img.width*_imgscale;                 var 

height:int = img.parent.height - img.height*_imgscale;                 img.startdrag (

False, new rectangle (0, 0 , width, height));             }                             /**              *  Mouse Bounce Stop   Drag               */             private function itemmouseup (event:mouseevent): void{      

          img.stopdrag ();             }                             /**              *  mouse wheel Control zoom               */             private function itemmousewheel (event:MouseEvent): void{                 //calculates the scaling ratio per time                  _imgScale = this.img.scaleX +  (

Math.Abs (Event.delta)/event.delta) *0.05;

                //Set maximum minimum zoom limit                 _imgscale  = math.min (1,_imgscale);                   var minscale:number = math.min (Img.parent.width/img.width,

Img.parent.height/img.height);                 _imgscale

 = math.max (Minscale,_imgscale);                                    //calculates the coordinates of a scaled picture (ensures that the zoom center is a mouse)                  var oldscale:number =  this.img.scaleX;                               _imgX = 

this.img.x-(_imgscale/oldscale-1) * (this.img.parent.mousex - this.img.x);                 _imgy =

 this.img.y-(_imgscale/oldscale-1) * (THIS.IMG.PARENT.MOUSEY&NBSP;-&NBSP;THIS.IMG.Y);                                    //Coordinate correction                   if (img.width*_imgscale >= img.parent.width) {     

               if (_imgX>=0) {                   

      _imgX=0;                      }else if ((IMG.WIDTH*_IMGSCALE+_IMGX) =  Img.parent.height) {                     if (_imgy>=0) {          

              _imgY=0;                      }else if ((img.height*_imgscale+_imgy)      </fx:Script>       <s : Group clipandenablescrolling= "true"  width= "70%"  height= "70%"               horizontalcenter= "0"  verticalcenter= "0" >          <s:rect  width= "100%"  height= "100%" >              <s:fill>                  <s:solidcolor color= "0xFFFFFF"/>              </s:fill>          </s:Rect>         <s:image id= " IMG " source=" img.jpg "/>     </s:Group> </s:Application>

                                                         

-->

-->