flex 开发卡片照片编辑篇（二）

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"

width="600"

height="510"

creationComplete="initUI();"

backgroundColor="#E6E6E6"

verticalScrollPolicy="off"

horizontalScrollPolicy="off"

borderColor="#ACA5A5"

borderStyle="solid"

borderThickness="2"

color="#AD4B40">

<mx:Script>

<![CDATA[

import mx.controls.Image;

import code.ProductHandlerBasic;

import mx.core.BitmapAsset;

import mx.controls.Label;

import mx.core.Container;

import flash.geom.Rectangle ;

import mx.managers.PopUpManager;

import mx.managers.PopUpManagerChildList

/*裁剪框*/

private var _rectBorder:Sprite ;

/*裁剪拉伸光标*/

private var _cursor:Image ;

/*裁剪框的坐标宽度数据*/

private var _w:Number = 0;

private var _h:Number = 0 ;

private var _x:Number = 0 ;

private var _y:Number = 0 ;

private var _url:String ;

private var mouseState:int = 0 ;//鼠标状态，0 为正常 1：为按下

/*临时存放裁剪框坐标大小信息*/

private var _tempObj:Object = new Object() ;

/*存放鼠标坐标减去裁剪边框的坐标*/

private var _mx:Number ;

private var _my:Number ;

/*模板图片框的显示比例.根据此比例才能算出裁剪框的大小*/

private var _targeimgtscale:Number = 1 ;

/*模板上的图片对象.*/

private var _targetimg:Image ; //版式上的图片

//光标是否在左边界和右边界的标识

private var _criticalFlag:Number ;

private var _p:ProductHandlerBasic ;

/*当前图片相对应的bitmapasset对象*/

private var _currentEditImg:Image ;

[Embed(source="assets/03.gif")]

private var flag:Class;

private function initUI():void{

}

public function set producthandlerBase(pro_:ProductHandlerBasic):void{

this._p = pro_ ;

}

public function get producthandlerBase():ProductHandlerBasic{

return this._p ;

}

/**

* 初始化照片编辑所需要的参数 。

* @param _img :所要编辑的图片Bitmap对像。模板框里的图片 。

* @param _url :所要编辑的图片url。由于_img是生成的bitmap而的不到source.所以再传

* @param _x :裁剪框在编辑图片中的x ;

* @param -y :................y

*/

public function initphotoEditParams(img_t:Image,url_t:String,x_t:Number,y_t:Number,w_t:Number,h_t:Number):void{

this._targeimgtscale = img_t.width/img_t.height ;

this._targetimg = img_t ;

this._x = x_t ;

this._y = y_t ;

this._w = w_t ;

this._h = h_t ;

this._url = url_t ;

var request_t:URLRequest = new URLRequest(url_t);

var loader_t:Loader = new Loader ();

loader_t.load(request_t) ;

loader_t.contentLoaderInfo.addEventListener(Event.COMPLETE,photoLoaderCompleteHandler) ;

}

/**所编辑图片加载完成处理*/

private function photoLoaderCompleteHandler(e:Event):void{

var loader_t:Loader = e.currentTarget.loader as Loader ;

var asset_:Bitmap = new Bitmap() ;

var bitmapdata_t:BitmapData = new BitmapData(loader_t.width,loader_t.height);

bitmapdata_t.draw(loader_t);

asset_.bitmapData = bitmapdata_t ;

/*创建当前需要编辑的用户图像*/

_currentEditImg = new Image() ;

_currentEditImg.source = asset_ ;

_currentEditImg.width = bitmapdata_t.width ;

_currentEditImg.height= bitmapdata_t.height ;

_currentEditImg.x = (this.width-menuID.width-loader_t.width)/2 ;

_currentEditImg.y = (this.height-loader_t.height)/2 ;

this.addChild(_currentEditImg) ;

/*创建红色矩形裁剪框*/

_rectBorder = new Sprite() ;

_rectBorder.x = this._x ;

_rectBorder.y = this._y ;

/*设置裁剪区域边框样式*/

_rectBorder.graphics.lineStyle(2, 0xFF0000, 0.5, true, LineScaleMode.NONE, CapsStyle.ROUND);

_rectBorder.graphics.beginFill(0x330000,0);

_rectBorder.graphics.drawRect(0,0,this._w,this._h);

_rectBorder.graphics.endFill();

this._currentEditImg.addChild(_rectBorder);

/*创建光标对象*/

_cursor = new Image();

/*一定要用这种方式给光标传值,否则会初相乱七八糟的效果。真他妈的郁闷,搞了好几天才发现,估计是flex的bug*/

_cursor.source = flag ;

_cursor.width = 30 ;

_cursor.height = 30 ;

_cursor.visible = false ;

this._currentEditImg.addChild(_cursor);

this._currentEditImg.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);

this._currentEditImg.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler) ;

this._currentEditImg.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);

this._currentEditImg.addEventListener(MouseEvent.DOUBLE_CLICK,doubleClickHandler) ;

this._currentEditImg.doubleClickEnabled = true ;

}

/**

* 双击应用修改

*/

private function doubleClickHandler(e:MouseEvent):void{

this.applicationHandler() ;

}

/**

* 鼠标按下

*/

private function mouseDownHandler(e:MouseEvent):void{

this._tempObj.x = _rectBorder.x ;

this._tempObj.y = _rectBorder.y ;

this._tempObj.width = this._w ;

this._tempObj.height = this._h ;

this.mouseState = 1 ;

}

/**

* 鼠标弹起

*/

private function mouseUpHandler(e:MouseEvent):void{

this.mouseState = 0 ;

this._rectBorder.stopDrag() ;

}

/**

* 鼠标移动及拖动处理

*/

private function mouseMoveHandler(e:MouseEvent):void{

_mx = mouseX - this._currentEditImg.x ;

_my = mouseY - this._currentEditImg.y ;

_cursor.x = _mx-_cursor.width/2 ;

_cursor.y = _my - _cursor.height/2 ;

this._cursor.visible = false ;

Mouse.show();

/*光标在左边边缘拖动*/

if((_criticalFlag==1) && this.mouseState == 1){

leftDragHandler();

}

/*光标在右边边缘拖动*/

else if((_criticalFlag==2) && this.mouseState == 1){

this.rightDragHandler();

}

/*光标在中间拖动*/

else if((_criticalFlag==3) && this.mouseState ==1){

var rt:Rectangle = new Rectangle();

rt.x = rt.y = 0 ;

rt.width = _currentEditImg.width - this._w ;

rt.height = _currentEditImg.height - _h ;

this._rectBorder.startDrag(false,rt) ;

this.mouseState = 2 ;

}

//在左边缘

if(isLeftEdge()){

this._cursor.visible = true ;

Mouse.hide() ;

_criticalFlag =1;

}

else if(isRightEdge()){

this._cursor.visible = true ;

Mouse.hide() ;

_criticalFlag =2;

}else if(isInCutRect()){

_criticalFlag = 3;

}

else{

_criticalFlag = 0 ;

}

e.updateAfterEvent() ;

}

/**

* 在左边缘上拖动处理

*/

private function leftDragHandler():void{

_rectBorder.graphics.clear();

_rectBorder.graphics.lineStyle(2, 0xFF0000, 0.5, true, LineScaleMode.NONE, CapsStyle.ROUND);

_rectBorder.graphics.beginFill(0xCCFF00, 0);

/*左边边界*/

_rectBorder.x = _mx < 0?0:_mx ;

/*右边边界*/

_rectBorder.x = _rectBorder.x >= (_w + _tempObj.x)?(_w + _tempObj.x):_rectBorder.x ;

/*裁剪框宽度*/

_w = _tempObj.width + _tempObj.x - _rectBorder.x ;

/*裁剪框高度*/

_h = _w / this._targeimgtscale ;

var h2:Number = this._currentEditImg.height - this._tempObj.y ;

/*是否撑到最大*/

if(_h>h2){

_rectBorder.x = this._tempObj.x + this._tempObj.width -h2*this._targeimgtscale;

_w = h2* this._targeimgtscale ;

this._h = h2 ;

}

_rectBorder.graphics.drawRect(0, 0, _w, _h );

_rectBorder.graphics.endFill();

}

private function rightDragHandler():void{

_rectBorder.graphics.clear();

_rectBorder.graphics.lineStyle(2, 0xFF0000, 0.5, true, LineScaleMode.NONE, CapsStyle.ROUND);

_rectBorder.graphics.beginFill(0xCCFF00, 0);

_w= _mx > _currentEditImg.width?_currentEditImg.width:_mx ;//右边界判断

_w = (_w <= this._tempObj.x)?_tempObj.x:_w ; //左边界判断

_w = _w-this._tempObj.x ; //求出矩形宽度

_h = _w/ this._targeimgtscale ; //求出高度

_rectBorder.y = _tempObj.height + _tempObj.y - _h; //求出最大允许高度

if (_rectBorder.y < 0) {

_h = _tempObj.height + _tempObj.y ;//最大宽度为矩形宽度

_rectBorder.y = 0;

_w = _h * this._targeimgtscale ; //求出高度

}

_rectBorder.graphics.drawRect(0, 0, _w,_h);

_rectBorder.graphics.endFill();

}

/**

* 拖动整个裁剪矩形

*/

private function isStartMiddleDrag():Boolean{

if((_criticalFlag==3) && this.mouseState ==1){

return true ;

}

return false ;

}

/**

* 检查光标是否在左边界上

* @return boolean

*/

private function isLeftEdge():Boolean {

/**检查左边界*/

if(_mx<0){

return false ;

}

if (_mx>=(this._rectBorder.x -BORDER1) &

_mx<=(this._rectBorder.x + BORDER1) &&

_my>this._rectBorder.y &&

_my<(this._rectBorder.y +_h)) {

return true ;

}

return false ;

}

/**

* 检查光标是否在右边界上

*/

private function isRightEdge():Boolean {

if(_mx>this._currentEditImg.width){

return false;

}

if (_mx>=(this._rectBorder.x + _w - BORDER1) && _mx<=(this._rectBorder.x+_w+BORDER1) &

_my>this._rectBorder.y&& _my<(this._rectBorder.y+_h)) {

return true ;

}

return false ;

}

/**

* 判断光标标是否在裁剪区域里面

* @return true 如果光标在里面

*/

private function isInCutRect():Boolean {

if (_mx>(this._rectBorder.x +BORDER1) &&

_mx<(this._rectBorder.x + _w - BORDER1) &

_my>(this._rectBorder.y + BORDER1) &&

_my<(this._rectBorder.y + _h -BORDER1)) {

return true ;

}

return false ;

}

private function applicationHandler():void{

//照片编辑，保存坐标参数

_p.saveCurrentPageData(_p.currentpageNum,_p.currentphotoNum,_url,_rectBorder.x,_rectBorder.y,_w,_h);

_p.loadphotoToStage(_targetimg,_p.currentphotoNum,false,this._url)

this.cancleHandler()

}

private function cancleHandler():void{

this._currentEditImg.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);

this._currentEditImg.removeEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);

this._currentEditImg.removeEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);

this._currentEditImg.removeEventListener(MouseEvent.DOUBLE_CLICK,doubleClickHandler);

PopUpManager.removePopUp(this);

}

public var BORDER1:Number = 10 ;

private function mouseOverHelp():void{

this.helphintID.visible = true ;

this.removeChild(this.helphintID);

this.addChildAt(this.helphintID,this.numChildren);

}

private function mouserOutHelp():void{

this.helphintID.visible = false ;

}

]]>

</mx:Script>

<mx:Canvas id="menuID" x="530" y="0" width="70" height="510" backgroundColor="#DCDCDC" borderStyle="solid" borderThickness="2">

<mx:Button x="4" y="10" id="helpID" mouseOver="mouseOverHelp();" label="帮助" mouseOut="mouserOutHelp();" fontWeight="bold" fontSize="12" height="30" width="56" fillAlphas="[1.0, 1.0]" fillColors="[#333333, #333333]" borderColor="#C8C8C8" color="#FFFFFF" cornerRadius="3"/>

<mx:Button x="4" y="464" label="取消" click="cancleHandler()" fontSize="12" fontWeight="bold" fontFamily="Verdana" height="30" color="#FFFFFF" themeColor="#0C00FF" cornerRadius="3" width="56" fillAlphas="[1.0, 1.0]" fillColors="[#004D99, #004D99]" borderColor="#C8C8C8"/>

<mx:Button x="4" y="424" label="应用" click="applicationHandler()" fontSize="12" fontWeight="bold" color="#FFFFFF" height="30" themeColor="#0000FF" fillAlphas="[1.0, 1.0]" cornerRadius="3" alpha="1.0" width="56" fillColors="[#004D99, #004D99]" borderColor="#C8C8C8"/>

</mx:Canvas>

<mx:Canvas id="helphintID" visible="false" x="{menuID.x-helphintID.width}" y="{this.helpID.y}" verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#FFFFFF" borderStyle="solid" borderThickness="3">

<mx:Text x="8" y="2" text="红色框内为您需要的照片内容，光标落在红色框内时，按住鼠标左键任意角度拖动可移动框的位置； 光标落在红色框左右两条边线时，会变成左右方向的箭头形状，此时按住鼠标左键左右拖动可等比例改变框的大小； 移动红色框的位置或改变红色框的大小直到取得您满意的照片内容后，双击照片区域或点击“应用”按钮返回制作页面； 点击“取消”按钮也可返回制作页面，且不会对照片的位置和大小做任何改变。" width="292" height="220" fontSize="12" fontWeight="normal" color="#454545"/>

</mx:Canvas>

</mx:Canvas>