现在的位置: 首页 > 综合 > 正文

Flex 图片调整(Matrix 矩阵)(放大/放小/左旋转/右旋转/上移/下移/左移/右移/还原/调整 …

2013年12月16日 ⁄ 综合 ⁄ 共 3906字 ⁄ 字号 评论关闭
 

<?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"
      creationComplete="initData();"
      minWidth="955" minHeight="600">
 <s:layout>
  <s:VerticalLayout/>
 </s:layout>
 <fx:Declarations>
  <!-- 将非可视元素(例如服务、值对象)放在此处 -->
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   //旋转初始值
   private var rotateDeg:Number=0;
   private function initData():void{
   }
   //旋转
   private function degreesToRadians(degrees:Number):Number {
    return (degrees * (Math.PI / 180));
   }
   /**
    * 判断是左旋转还是有旋转
    * */
   private function button_click(evt:Event):void {
    var direction:int;
    switch (evt.currentTarget) {
     case degreesUp:
      direction = +1;
      break;
     case degreesDown:
      direction = -1;
      break;
    }
    var radians:Number = degreesToRadians(direction);
    var offsetWidth:Number = image2.width / 2;
    var offsetHeight:Number = image2.height / 2;
    var tempMatrix:Matrix = image2.transform.matrix;
    tempMatrix.translate(-offsetWidth, -offsetHeight);
    tempMatrix.rotate(radians);
    tempMatrix.translate(+offsetWidth, +offsetHeight);
    
    image2.transform.matrix = tempMatrix;
    
    rotateDeg = image2.rotation;
   }
   //恢复原装
   private function resetImage():void {
    var tempMatrix:Matrix = image2.transform.matrix;
    tempMatrix.identity();
    image2.transform.matrix = tempMatrix;
    rotateDeg = image2.rotation;
   }
   //放大
   private function toBig():void{
    var tempMatrix:Matrix = image2.transform.matrix;
    tempMatrix.scale(1.1, 1.1);
    image2.transform.matrix = tempMatrix;
    rotateDeg = image2.rotation;
   }
   //缩小
   private function toSmall():void{
    var tempMatrix:Matrix = image2.transform.matrix;
    tempMatrix. scale(0.9, 0.9);
    image2.transform.matrix = tempMatrix;
    rotateDeg = image2.rotation;
    
   }
   //上下左右移动
   //上移
   private function toTop():void{
    var tempMatrix:Matrix = image2.transform.matrix;
    tempMatrix.translate(0,-10);
    image2.transform.matrix = tempMatrix;
    rotateDeg = image2.rotation;
   }
   //下移
   private function toDown():void{
    var tempMatrix:Matrix = image2.transform.matrix;
    tempMatrix.translate(0,10);
    image2.transform.matrix = tempMatrix;
    rotateDeg = image2.rotation;
   }
   //左移
   private function toLeft():void{
    var tempMatrix:Matrix = image2.transform.matrix;
    tempMatrix.translate(-10, 0);
    image2.transform.matrix = tempMatrix;
    rotateDeg = image2.rotation;
   }
   //右移
   private function toRight():void{
    var tempMatrix:Matrix = image2.transform.matrix;
    tempMatrix.translate(10, 0);
    image2.transform.matrix = tempMatrix;
    rotateDeg = image2.rotation;
   }
   //快照显示
   private function showImage3():void{
    var bd:BitmapData = new BitmapData(g3.width,g3.height);
    var m:Matrix = new Matrix();
    bd.draw(g3,m);
    image3.source=new Bitmap(bd);
   }
  ]]>
 </fx:Script>
 <mx:HBox>
  <s:Button label="+" autoRepeat="true" click="toBig();" buttonDown="toBig();"/>
  <s:Button label="-" autoRepeat="true" click="toSmall();" buttonDown="toSmall();"/>
  <s:Button label="↑" autoRepeat="true" click="toTop();" buttonDown="toTop();"/>
  <s:Button label="←" autoRepeat="true" click="toLeft();" buttonDown="toLeft();"/>
  <s:Button label="→" autoRepeat="true" click="toRight();" buttonDown="toRight();"/>
  <s:Button label="↓" autoRepeat="true" click="toDown();" buttonDown="toDown();"/>
  <s:Button label="左旋转" id="degreesUp" autoRepeat="true" click="button_click(event);"
      buttonDown="button_click(event);" />
  <s:Button label="右旋转" id="degreesDown" autoRepeat="true" click="button_click(event);"
      buttonDown="button_click(event);"/>
  <s:Button label="Reset" click="resetImage();"/>
 </mx:HBox>
 <mx:Canvas id="g3" width="200" height="200" horizontalScrollPolicy="off" verticalScrollPolicy="off">
  <mx:Image id="image2"
      source="assets/images/1.jpg"
      width="200"
      scaleContent="true"
      maintainAspectRatio="true"
      height="200" />
 </mx:Canvas>
 <s:Button label="生成快照" click="showImage3();"/>
 <mx:Image width="200" id="image3" height="200"/>
</s:Application>

 

抱歉!评论已关闭.