<?xml version="1.0" encoding="utf-8"?>
<s:Application contentCreationComplete="initApp()" xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
  <fx:Script>
    <![CDATA[
      import mx.controls.Alert;
      import flash.events.ProgressEvent;
      import flash.events.MouseEvent;
      import flash.geom.Point;
      import mx.controls.Image;
      import mx.graphics.codec.JPEGEncoder;
      import flash.display.BitmapData;
      import flash.display.Bitmap;
      
      private var oldY:Number;//记录� � �上一次停留的y坐� �值
      private var oldX:Number;//记录� � �上一次停留的x坐� �值
      public var ratio:Number;//记录图片的宽高比
      public var oldWidth:Number;//记录放缩前的图片宽
      /*要保证图片在放缩过程之中不会乱跑，就必须锁定图片的中心点*/
      private var newCY:Number;//当对图片进行放大缩小时，记录图片中心点的x坐� �值。
      private var newCX:Number;//当对图片进行放大缩小时，记录图片中心点的y坐� �值。
      private var cover_X:Number;//当创建一个矩形来截取图片时，此变量表示矩形位置的x坐� �值。
      private var cover_Y:Number;//当创建一个矩形来截取图片时，此变量表示矩形位置的y坐� �值。
      
      /*创建完程序之后执行的初始化*/
      internal function initApp():void{
        img.source="xxx.jpg";
      }
      
      /*当图片正在� 载的时候执行此方法*/
      internal function showProcess(event:ProgressEvent):void{
        var loaded:Number=event.bytesLoaded;
        var total:Number=event.bytesTotal;
        var p:Number=Math.floor(loaded/total*100);
        tip_txt.text="正在� 载图片:"+p;
      }
      /*当图片� 载完成之后执行此方法*/        
      internal function initImg():void{
        tip_txt.text="图片� 载完毕！";
        ratio=img.contentHeight/img.contentWidth;
        oldWidth=img.contentWidth;
        cover_X=cover.x;//把截图的矩形定位到中间，即现在与cover重合
        cover_Y=cover.y;
        newCY=img.contentHeight/2;
        newCX=img.contentWidth/2;
        //drawCover();
      }
      
      /**/
      private function onMouseMove(event:MouseEvent):void{
        if(event.buttonDown){
          var x:Number = event.stageX - oldX;//� � �x轴的偏移量
          var y:Number = event.stageY - oldY;//� � �y轴的偏移量
          oldX = event.stageX;//� � �现在的x坐� �值
          oldY = event.stageY;//� � �现在的y坐� �值                
          img.move(img.x + x,img.y + y);//改变图片的x和y值，实现图片移动
          //由于图片� 载进来的时候注册点都是在父层的左上角，这是不会改变的。我们所看到的图片移动只是图片坐� �在平移。
          //但是我们创建的矩形框与我们对图片位置的看法是不一� �的，在它的眼中看到并不是我们移动后的图片，不管我们怎么移动，它看到的都是在左上角没有动的图片。
          //虽然这� 图片在我们看来不存在，但是矩形框会记得这� �图片在左上角的� �子（如果这� 图片被放缩，它也会� �据实际比例对它眼中的左上角的图片进行相应的放缩）。
          //当我们移动图片到中间的cover时，矩形框此时的坐� �并没有改变，除非我们� �据移动的情况，来给矩形框设定相应的值。
          cover_X -= x;//为什么用减号呢，这是� 为如果我们把图片从左向右移动到cover中，那么对应的矩形如果想找到和cover中一� �的像� 集合，就必须向左移动，� 为矩形
          //眼中的图片不会跟着我们也向右平移，所以只有矩形向左平移才能找到相应的像� 集合。所以x坐� �值就得减，而不是� 。
          cover_Y -= y;
          newCX=img.x+img.width/2;//当滑动图片到一个位置，计算出此时图片的中心点的x坐� �值，如果放缩图片，则让此坐� �不变。
          newCY=img.y+img.height/2;//当滑动图片到一个位置，计算出此时图片的中心点的y坐� �值，如果放缩图片，则让此坐� �不变。
          //drawCover();
        }
      }
      
      private function onMouseDown(event:MouseEvent):void{
        oldX = event.stageX;//在� � �按下，但未滑动之前记录� � �的位置坐� �
        oldY = event.stageY;
      }
      
      internal function hsChange(target:DisplayObject):void{
        
        var xx:Number=img.x;
        var yy:Number=img.y;//这里的xx和yy相当与图片为移动之前的坐� �
        img.x=newCX-(hsval.value*oldWidth)/2;//图片放缩时，图片的中心点不变，变的是图片的左顶点的坐� �
        img.y=newCY-(hsval.value*oldWidth*ratio)/2;
        img.width=hsval.value*oldWidth;//图片放缩时改变图片的宽
        img.height=img.width*ratio;
        cover_X = cover_X-(img.x-xx);
        cover_Y = cover_Y-(img.y-yy);//这两句的意思与图片移动一� �。                    
        //drawCover();
      }
      
      private function drawCover():void
      {  
        //创建一个矩形区域，来截取相片，在此之前我们已经虚构了一个矩形，现在就相当于把这个虚构的矩形弄成真的。
        var rect:Rectangle = new Rectangle(cover_X,cover_Y,cover.width,cover.height);
        //var bmd:BitmapData = (img.content as Bitmap).bitmapData;
        //创建了一个位图
        var bmd:BitmapData = new BitmapData(img.width,img.height,false,0);
        //把图片在父层的左上角画出来（如果图片已经被放缩，就画放缩之后的,这也就是虚构矩形眼中的那� 我们看不见的图片）。
        bmd.draw(img,null,null,null,null,false);
        //创建一个与矩形一� �大小的位图            
        var bmd2:BitmapData = new BitmapData(rect.width,rect.height);
        var point:Point = new Point(0,0);
        //从bmd的位图中复制rect位置，rect大小的矩形区域，赋给bmd2,在bmd2中的起始点是point          
        bmd2.copyPixels(bmd,rect,point,null,null,false);
        
        /*cover.graphics.beginBitmapFill(bmd2);
        cover.graphics.drawRect(0,0,rect.width,rect.height);
        cover.graphics.endFill();*/
        
        //将bmd2的像� 数据填充到画布can3中。
        can3.graphics.beginBitmapFill(bmd2);
        can3.graphics.drawRect(0,0,rect.width,rect.height);
        can3.graphics.endFill();
      }
      
      /*
      public function takeSnapshot(b:BitmapData) :void
      {
      var jpegenc:JPEGEncoder=new JPEGEncoder(80);
      var imgByteArray:ByteArray=jpegenc.encode(b);
      }*/
    ]]>
  </fx:Script>
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
  <s:Label x="10" y="29" text="� �签" width="291" id="tip_txt" height="17"/>
  <s:HSlider id="hsval" x="21" y="10" minimum="0.1" maximum="2" value="1" liveDragging="true" change="hsChange(img)" snapInterval="0.1"/>
  <s:Group x="260" y="10" width="500" height="500" id="can" mouseMove="onMouseMove(event)" mouseDown="onMouseDown(event)" buttonMode="true" contentBackgroundColor="#000000">
    <s:Rect width="100%" height="100%">
      <s:fill>
        <s:SolidColor color="#000000"/>
      </s:fill>
    </s:Rect>
    <mx:Image x="10" y="10" width="153" height="113" id="img" progress="showProcess(event)" complete="initImg()" alpha="1.0"/>    
    <s:Group x="0" y="0" width="500" height="176" alpha="0.4" contentBackgroundColor="#FFFFFF">
    </s:Group>
    <s:Group x="0" y="176" width="176" height="149" alpha="0.4" contentBackgroundColor="#FFFFFF">
    </s:Group>
    <s:Group x="0" y="325" width="500" height="200" alpha="0.4" contentBackgroundColor="#FFFFFF">
    </s:Group>
    <s:Group x="324" y="176" width="177" height="149" alpha="0.4" contentBackgroundColor="#FFFFFF">
    </s:Group>
    <s:Group width="150" height="150" id="cover" x="175" y="175">
      <s:Rect width="100%" height="100%">
        <s:fill>
          <s:SolidColor color="#ffffff" alpha="0.4"/>
        </s:fill>
      </s:Rect>
    </s:Group>
  </s:Group>
  <s:Button x="10" y="364" label="按钮" id="result" click="drawCover()"/>
  <s:Group x="21" y="174" width="150" height="150" id="can3">
  </s:Group>
</s:Application>