图片编辑器（Flex Air）

 Source：

RackTool/src/view/Editor.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" paddingLeft="5"
 creationComplete="init()">
 <mx:Script>
  <![CDATA[
   import mx.graphics.codec.PNGEncoder;
   import mx.graphics.ImageSnapshot;
   import mx.graphics.codec.IImageEncoder;
   import mx.graphics.codec.JPEGEncoder;
   import asset.AssetCollection;
   import mx.core.Container;
   import mx.collections.SortField;
   import mx.collections.Sort;
   import mx.managers.PopUpManager;
   import mx.utils.ObjectUtil;
   import mx.managers.CursorManager;
   import mx.core.Application;
   import mx.containers.Canvas;
   import mx.utils.StringUtil;
   import mx.controls.Alert;
   import mx.controls.Image;
   import mx.core.ScrollPolicy;
   
   public static var RACK_WIDTH:Number = 19; //inch
   public static var UNIT_HEIGHT:Number = 1.75; //inch
   
   // fields
   protected var _main_layer:Canvas;
   protected var _workspace_layer:Canvas;
   protected var _img:Image;
   protected var _file:File;
   
   [Bindable]
   protected var _xmlStr:String;
   [Bindable]
   public var U_num:int = 1; //actual workspace Unit Number
   [Bindable]
   public var Img_W:Number; //image contentWidth
   [Bindable]
   public var Img_H:Number; //image contentHeight
   [Bindable]
   public var Rect_W:Number; //rectangle Width
   [Bindable]
   public var Rect_H:Number; //rectangle Height
   [Bindable]
   public var Start_X:Number;
   [Bindable]
   public var Start_Y:Number;
   [Bindable]
   public var uri:String ;
   
   // draw shape 
   public var px:Number,py:Number;
   public var _step_id:int;
   public var _p1:Point;
   public var _p2:Point;
   public var _pn:Point;
   
   public function init():void{
    this.OnInitPage();
    // init file reference
    this._file = new File();
    this._file.addEventListener(Event.SELECT, this.OnFileSelect);
   }
   protected function OnFileSelect(event:Event):void
   {
    this.text_upload_map_uri.text = this._file.nativePath;
    this.uri = this.text_upload_map_uri.text;
   }
   protected function OnBtnBrowseClick():void
   {
    // init file
    var image_type:FileFilter=new FileFilter(
     "Image File (*.png, *.gif, *.jpeg, *.swf, *.jpg)",
     "*.png; *.gif; *.jpeg; *.swf; *.jpg");
    var types:Array=new Array(image_type);
    this._file.browse(types);
   }  
   //------------------------------------------------------
   protected function UpdatePreview():void
   {
    if (this.uri!= null)
    {
     // load
     this._img = new Image();
     this._img.visible = true;
     this._img.load(this.uri);
     this._img.addEventListener(Event.COMPLETE, this.OnImageLoaded);
    }
   }
   public function OnImageLoaded(event:Event):void
   {
    this.setRackImageSize();
    if(this._main_layer != null && this.studio.contains(this._main_layer)){
     this.studio.removeChild(this._main_layer);
    }
    this._main_layer = new Canvas();
    this._main_layer.clipContent = false;
    this._main_layer.addChild(this._img);
    this.studio.addChild(this._main_layer);
    
    this._workspace_layer = new Canvas;
    this._workspace_layer.percentHeight = 100;
    this._workspace_layer.percentWidth = 100;
    this._main_layer.addChild(this._workspace_layer);
    
    this.toolBar.visible = true;
   }
   public function setRackImageSize():void{   
    var img_width:Number = this._img.contentWidth;
    var img_height:Number = this._img.contentHeight;
    var standard_W:Number = Number(this.rack_width.text);
    if(img_width != standard_W){
     this._img.width = standard_W;
     this._img.height = 253 * img_height/img_width;
    }
    this.Img_W = this._img.width;
    this.Img_H = this._img.height;
   }
   //------------------------------------------------------
   
   protected function OnDrawRectBtnClick():void
   { 
    this.initField();
    // register event handlers
    this._main_layer.addEventListener(MouseEvent.MOUSE_DOWN, this.OnMouseDown);
    this._main_layer.addEventListener(MouseEvent.MOUSE_MOVE, this.OnMouseMove);
   }
   public function initField():void{
    // init data
    var mp:Point = new Point(
     Application.application.mouseX,
     Application.application.mouseY);
    this._p1 = new Point(mp.x, mp.y);
    this._p2 = new Point(mp.x, mp.y);
    this._pn = new Point(mp.x, mp.y);
    this._step_id = 0;
    // set cursor
    cursorManager.setCursor(AssetCollection.cursor_pencil, 2, -2, -28); 
    // clear the _workspace_layer
    this.Clear();
   }
   public function OnMouseDown(event:MouseEvent):void
   {
    // set Start point
    if(this._step_id == 0){
     var p0:Point = new Point(event.stageX, event.stageY);
     var p1:Point = this._workspace_layer.globalToContent(p0);
     if(p1 != null){
      this.Start_X = p1.x;
      this.Start_Y = p1.y;
     }
    }
    this._step_id ++;
    var p:Point = new Point(event.stageX, event.stageY);
    var p2:Point = this._workspace_layer.globalToContent(p);
    if (this._step_id == 1)
     this._p1 = p2;
    else if (this._step_id == 2)
    {
     this._p2 = p2;
     this.Finish();
    }
   }
   public function OnMouseMove(event:MouseEvent):void
   {
    var p:Point = new Point(event.stageX, event.stageY);
    var p2:Point = this._workspace_layer.globalToContent(p);
    if (this._step_id == 0)
    {
     // p1 setting
     CopyPoint(this._p1, p2);
     CopyPoint(this._p2, p2);
     CopyPoint(this._pn, p2);
    }
    else if (this._step_id == 1)
    {
     // p2 seting
     CopyPoint(this._p2, p2);
     CopyPoint(this._pn, p2);
    }
    // draw
    this.DrawShape();
    // layout
    //this.LayoutShape();//method _1
   }
   public function DrawShape():void
   {
    if (this._step_id == 0)
     return;
    var w:Number = this._p2.x - this._p1.x;
    var h:Number = this._p2.y - this._p1.y;
    var g:Graphics = this._workspace_layer.graphics;
    g.clear();
    g.lineStyle(1, 0x00ff00, 1);
    // draw
    g.beginFill(0x99ff66, 0.4);//ff8080
    //g.drawRect(-w/2, -h/2, w, h); //method _1
    g.drawRect(_p1.x, _p1.y, w, h); //method _2
    g.endFill();
   }
   public function LayoutShape():void
   {
    var x:Number = (this._p2.x + this._p1.x) / 2;
    var y:Number = (this._p2.y + this._p1.y) / 2;
    var m:Matrix = new Matrix();
    m.translate(x, y);
    this._workspace_layer.transform.matrix = m;
   }
   public function Finish():void
   {
    //save
    this.Rect_W = Math.abs(this._p2.x - this._p1.x);
    this.Rect_H = Math.abs(this._p2.y - this._p1.y);
    // set cursor
    CursorManager.removeAllCursors();
    // unregister event handlers
    this._main_layer.removeEventListener(MouseEvent.MOUSE_DOWN, this.OnMouseDown);
    this._main_layer.removeEventListener(MouseEvent.MOUSE_MOVE, this.OnMouseMove);
   }
   protected function Clear():void{
    var g:Graphics = this._workspace_layer.graphics;
    g.clear();
   }
   public static function CopyPoint(dp:Point, sp:Point):void
   {
    dp.x = sp.x;
    dp.y = sp.y;
   }
   //------------------------------------------------
   public function saveRackData():void{
    this.xmlPreview();
    /*var tempFile:File =
     new File("D://" + "SmartDevice" + "//" + "xml" + "//" + this.U_num + "U" + ".xml");*/
    var tempFile:File =
     new File(File.applicationDirectory.nativePath+"//"+"output"+"//"+"xml"+"//"+this.U_num+"U"+".xml");
    var stream:FileStream = new FileStream();
    stream.open(tempFile,FileMode.WRITE);
    stream.writeUTFBytes(this._xmlStr);
    stream.close();
    Alert.show("Successful!","Information");
           }
           public function xmlPreview():void{
    var xml:XML = new XML("<Rack></Rack>");
    var node:XML = <u>{this.U_num}</u>;
    xml.appendChild(node);
    node = <width>{this.Img_W}</width>;
    xml.appendChild(node);
    node = <height>{this.Img_H}</height>;
    xml.appendChild(node);
    node = <vWidth>{this.Rect_W}</vWidth>;
    xml.appendChild(node);
    node = <vHeight>{this.Rect_H}</vHeight>;
    xml.appendChild(node);
    node = <startX>{this.Start_X}</startX>;
    xml.appendChild(node);
    node = <startY>{this.Start_Y}</startY>;
    xml.appendChild(node);
    node = <imagePath>{this.uri}</imagePath>;
    xml.appendChild(node);
    var xmlStr:String = xml.toXMLString() + "/n";
    this._xmlStr = "<?xml version='1.0' encoding='UTF-8'?>" +  "/n" + xmlStr;
           }
           public function OnInitPage():void{
             this.toolBar.visible = false;
             if(this._main_layer != null && this.studio.contains(this._main_layer)){
              this.studio.removeChild(this._main_layer);
             }
             this.h_size.value = 1;
             this.text_upload_map_uri.text = "";
             
             Rect_W = 0;
    Rect_H = 0;
    Img_W = 0;
    Img_H = 0;
    px = 0;
    py = 0;
    this.uri = "";
    this._file = new File();
    this._step_id = 0;;
    this._p1 = null;
    this._p2 = null;
    this._pn = null;
           }
  ]]>
 </mx:Script>
 <mx:HDividedBox id="_main_panel" width="100%" height="100%">
  <mx:VBox id="editForm"
   height="100%" width="300"
   horizontalAlign="center"
   verticalAlign="top"
   paddingLeft="10"
   paddingRight="10"
   paddingTop="15"
   paddingBottom="15"
   borderStyle="solid" >   
         <mx:HBox width="100%" horizontalAlign="left">
          <mx:Label text="Rack Width" width="90" styleName="itemLable"/>
          <mx:TextInput id="rack_width" width="100" text="253" editable="false"/>
         </mx:HBox>    
         <mx:HBox width="100%" horizontalAlign="left">
           <mx:Label text="Rack Unit" width="90" styleName="itemLable"/>
          <mx:NumericStepper id="h_size" width="100"
           minimum="1" maximum="54" maxChars="2"
           value="{this.U_num}"
           change="U_num = event.target.value"/>
         </mx:HBox>    
         <mx:VBox width="100%" horizontalAlign="left">
          <mx:Label text="Upload Image" styleName="itemLable"/>
          <mx:TextInput id="text_upload_map_uri" width="100%" editable="false"/>
         </mx:VBox> 
         <mx:HBox width="100%" horizontalAlign="left" horizontalGap="30">
    <mx:Button id="btn_browse" label="Browse" click="this.OnBtnBrowseClick()"
     styleName="vdcButton" width="80" height="24"/>
    <mx:Button id="btn_upload" label="Upload" click="UpdatePreview()"
     styleName="vdcButton" width="80" height="24"/>
         </mx:HBox>
         <mx:Spacer height="100%"/>
         <mx:Panel id="xmlShow" title="XML Preview" width="100%" height="400">
          <mx:Text text="{this._xmlStr}" width="100%" height="100%"/>
         </mx:Panel>
  </mx:VBox>
  <mx:VBox id="studio" paddingTop="15" height="100%" horizontalAlign="center">
   <mx:HBox id="toolBar"
    height="25" width="100%"
    verticalAlign="middle"
    horizontalGap="15"
    borderThickness="1"
    borderColor="#E6E6E6"
    visible="false">
    <mx:LinkButton icon="{AssetCollection.imgx_add_rect}" label="Draw Rectangle" click="OnDrawRectBtnClick()"/>
    <mx:LinkButton icon="{AssetCollection.imgx_undo}" label="Remove Rectangle" click="Clear()"/>
    <mx:LinkButton icon="{AssetCollection.imgx_save}" label="Save Setting" click="saveRackData()"/>
    <mx:LinkButton icon="{AssetCollection.imgx_preview}" label="XML Preview" click="xmlPreview()"/>
   </mx:HBox>
  </mx:VBox>
 </mx:HDividedBox>
</mx:HBox>

 

//-----------------------------------------------------------------------------------

RackTool/src/RackTool.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute"
 xmlns:view="view.*"
 width="1024" height="768"
 showFlexChrome="true"
 showStatusBar="true" viewSourceURL="srcview/index.html">
 <mx:Script>
  <![CDATA[
   
  ]]>
 </mx:Script>
 <mx:Style source="asset/OSX.css"/>
 <view:Editor id="editStage"/>
</mx:WindowedApplication>

 

 

 

RackTool/src/asset/AssetCollection.as

package asset
{
 [Bindable]
 public class AssetCollection
 {
  // cursor
  [Embed(source="asset/icon/cursor_pencil.png")]
  public static var cursor_pencil:Class;
  
  // large images
        [Embed(source="asset/icon/undo_32.png")]
  public static var imgx_undo:Class;
  [Embed(source="asset/icon/save_32.png")]
  public static var imgx_save:Class;
  [Embed(source="asset/icon/add_rect.png")]
  public static var imgx_add_rect:Class;
  [Embed(source="asset/icon/preview.png")]
  public static var imgx_preview:Class;
 }
}