Flex 抠图程序

原创 于 2008-06-16 19:58:00 发布 · 4.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flex #function #import #image #null #matrix

本文介绍了一种使用 Flex 实现用户自定义头像功能的方法，通过选择图片的指定区域进行裁剪。作者分享了自定义组件 `CutImageTest` 的代码，该组件能够根据用户拖动的矩形框来确定裁剪区域，并最终生成剪切后的图片。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    项目中，用户自定义头像功能要求实现用户自定义头像，并且可以自由选择图片指定区域作为头像显示。     冥思苦想，找了半天资料，终于找到一篇相关文章，并提供了源代码。虽然眼看有了眉目，但是似行非行。     http://www.flashas.net/html/flashasyy/20080423/2950.html  （BitmapData抠图 ）AS3实现。     但是，这东西要跑在Flex中，还需要调整。经过自己一阵子的瞎捣咕....     总算基本功能实现了。8错~记录哈来~！免得以后重复造轮子~嘿嘿！也给有需要的朋友一些参考！     以下是实现代码：封装类 CutImageTest   （选择指定区域显示）           package { 
 import flash.display.*;    
 import flash.events.*;     
 import flash.filters.*;    
 import flash.geom.*;        

 import mx.controls.Image;   

  import mx.core.UIComponent;    

 /**      * @author CYPL      * 设置图片元件实例名为Image      */     

public class CutImageTest extends UIComponent {         

private var _imageBitmapData : BitmapData;         

private var _imageHotAreaData:BitmapData;         

private var _imageBitmap : Bitmap;         

private var _mouseRectContainer:Sprite;         

private var _mouseRectStartX:Number;        

private var _mouseRectStartY:Number;         

private var _imageClipDraging:Boolean;         

private var _currentDragClip:Sprite;                

 [Bindable]         

public var clibImg:Bitmap;// 剪切图片                 

public function CutImageTest( image:Image ) {                        

 _mouseRectContainer=new Sprite;             

image.visible=false;            

 _imageBitmapData=new BitmapData(image.width,image.height,true,0),_imageBitmapData.draw(image);             _imageBitmap=Bitmap(addChild(new Bitmap(_imageBitmapData)))            

 _imageBitmap.x=30            

 _imageBitmap.y=30             

configMouseEvent();             

//----------hitTestArea------------------------             

var c:ColorTransform=new ColorTransform;             

c.color=0xff0000;             

_imageHotAreaData=_imageBitmapData.clone();             

_imageHotAreaData.draw(_imageHotAreaData,null,c);         }         

private function configMouseEvent():void {            
 this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler,false,0,true);             
this.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler,false,0,true);         }         

/**************************drawRect handler*******************************/         

private function mouseDownHandler(evt:MouseEvent):void {//mouse_down            

 if (_imageClipDraging) {                 return;             }             

addChild(_mouseRectContainer);             

_mouseRectStartX=evt.stageX;             

_mouseRectStartY=evt.stageY;             

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

private function mouseUpHandler(evt:MouseEvent):void {//mouse_up                         

//_currentDragClip&&();            
 _imageClipDraging&&(_currentDragClip.stopDrag(),_imageClipDraging=false,_currentDragClip.alpha=1)
||(cutImage(checkIntersection()),_mouseRectContainer.graphics.clear(),this.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler))                     }         

private function mouseMoveHandler(evt:MouseEvent):void {//mouse_move             

evt.updateAfterEvent();             

var minX:Number=Math.min(evt.stageX,_mouseRectStartX)             

var minY:Number=Math.min(evt.stageY,_mouseRectStartY)             

var maxX:Number=Math.max(evt.stageX,_mouseRectStartX)             

var maxY:Number=Math.max(evt.stageY,_mouseRectStartY) 

with(_mouseRectContainer.graphics){             

clear();             

lineStyle(0);             

beginFill(0xffff00,.5);             

drawCircle( (maxX-minX)/2, (maxY-minY)/2, (maxX-minX)/2 );            
 //drawRect(0,0,maxX-minX,maxY-minY);  

           }            

 _mouseRectContainer.x=minX;            

 _mouseRectContainer.y=minY;         

}         

/************************************************************************/        
 /**************************drag  handler*******************************/         
private function clipMouseDownHandler(evt:MouseEvent):void {//mouse_down             

var target:Sprite=evt.target as Sprite;             

_currentDragClip=target;            

 _currentDragClip.alpha=.5;             

_imageClipDraging=true;             

addChild(target);             

_currentDragClip.startDrag(false);        

 }         

/************************************************************************/         

private function checkIntersection():Rectangle {             

var intersectRect:Rectangle=_imageBitmapData.rect.intersection(new Rectangle(_mouseRectContainer.x-_imageBitmap.x,_mouseRectContainer.y-_imageBitmap.y,_mouseRectContainer.width,_mouseRectContainer.height));             //trace("与源图BitmapData相交范围:"+intersectRect);             

if (intersectRect.width==0 || intersectRect.height==0) {                 return null;             }            

 var bitmapData:BitmapData=new BitmapData(intersectRect.width,intersectRect.height,true,0);             bitmapData.draw(_imageHotAreaData,new Matrix(1,0,0,1,-intersectRect.x,-intersectRect.y),null,null,new Rectangle(0,0,intersectRect.width,intersectRect.height));             

var intersectHotAreaRect:Rectangle=bitmapData.getColorBoundsRect(0xFFFF0000, 0xFFFF0000,true);            

 trace("最终切图块的范围:"+intersectHotAreaRect);            

 if (intersectHotAreaRect.width==0 || intersectHotAreaRect.height==0) {                                                 return null;             } 

 //扩展范围避免误差             

intersectHotAreaRect.x-=1             

intersectHotAreaRect.y-=1            

 intersectHotAreaRect.width+=2             

intersectHotAreaRect.height+=2             

return intersectHotAreaRect;         }         

private function cutImage(rect:Rectangle):void {//关键的切图部分             

if (!rect) {                 return;             }             

var clipBitmapData:BitmapData=new BitmapData(rect.width,rect.height,true,0);             

varcliptX:Number=(_mouseRectContainer.x=_mouseRectContainer.x<_imageBitmap.x?0:_mouseRectContainer.x-_imageBitmap.x)+rect.x;             varcliptY:Number=(_mouseRectContainer.y=_mouseRectContainer.y<_imageBitmap.y?0:_mouseRectContainer.y-_imageBitmap.y)+rect.y;             clipBitmapData.draw(_imageBitmapData,new Matrix(1,0,0,1,-cliptX,-cliptY),null,null,new Rectangle(0,0,rect.width,rect.height));//intersectHotAreaRect)             

var clipBitmap:Bitmap=new Bitmap(clipBitmapData);             

clibImg = clipBitmap;// 剪切图片         
  }    
 } 
} 
/*****************************************************MXML**********************************************/         

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

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">     <mx:Script>         <![CDATA[             

[Bindable]             

private var cutImg:CutImageTest;             

private function init():void {                 

cutImg = new CutImageTest( image );                 

this.addChild( cutImg );             

}         

]]>     

</mx:Script>     

<mx:Image left="60" top="50" right="520" bottom="220" id="image" source="../img/11.jpg"/>     

<mx:Image  id="clibImg" source="{cutImg.clibImg}" width="200" height="200" right="50" bottom="100"/> 

</mx:Application> 



/**************************************************************************************************************/     

封装类 CutImageTest   （抠图功能实现）     

package {     

import flash.display.*;     

import flash.events.*;     

import flash.filters.*;     

import flash.geom.*;         

import mx.controls.Image;     

import mx.core.UIComponent;     

/**      * @author CYPL      * 设置图片元件实例名为Image      */     

public class CutImageTest extends UIComponent {         

private var _imageBitmapData : BitmapData;         

private var _imageHotAreaData:BitmapData;         

private var _imageBitmap : Bitmap;         

private var _mouseRectContainer:Sprite;         

private var _mouseRectStartX:Number;         

private var _mouseRectStartY:Number;         

private var _imageClipDraging:Boolean;         

private var _currentDragClip:Sprite;                 

[Bindable]         

public var clibImg:Bitmap;// 剪切图片                 

public function CutImageTest( image:Image ) {                        

 _mouseRectContainer=new Sprite;             

image.visible=false;             

_imageBitmapData=new BitmapData(image.width,image.height,true,0),_imageBitmapData.draw(image);             _imageBitmap=Bitmap(addChild(new Bitmap(_imageBitmapData)))             

_imageBitmap.x=30 ;            

_imageBitmap.y=30 ;           

configMouseEvent();             

//----------hitTestArea------------------------             

var c:ColorTransform=new ColorTransform;             

c.color=0xff0000;             

_imageHotAreaData=_imageBitmapData.clone();             

_imageHotAreaData.draw(_imageHotAreaData,null,c);         

}         

private function configMouseEvent():void {             
this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler,false,0,true);             
this.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler,false,0,true);         

}         

/**************************drawRect handler*******************************/         

private function mouseDownHandler(evt:MouseEvent):void {//mouse_down             

if (_imageClipDraging) {                 return;             }            

 addChild(_mouseRectContainer);            

 _mouseRectStartX=evt.stageX;             

_mouseRectStartY=evt.stageY;             

this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);         

}         private function mouseUpHandler(evt:MouseEvent):void {//mouse_up                         

//_currentDragClip&&();             
_imageClipDraging&&(_currentDragClip.stopDrag(),_imageClipDraging=false,_currentDragClip.alpha=1)
||(cutImage(checkIntersection()),_mouseRectContainer.graphics.clear(),this.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler))                     }        

 private function mouseMoveHandler(evt:MouseEvent):void {//mouse_move             

evt.updateAfterEvent();             

var minX:Number=Math.min(evt.stageX,_mouseRectStartX)             

var minY:Number=Math.min(evt.stageY,_mouseRectStartY)             

var maxX:Number=Math.max(evt.stageX,_mouseRectStartX)             

var maxY:Number=Math.max(evt.stageY,_mouseRectStartY) 

with(_mouseRectContainer.graphics){  

           clear();            

 lineStyle(0);             

beginFill(0xffff00,.5);             

drawRect(0,0,maxX-minX,maxY-minY);}            

 _mouseRectContainer.x=minX;             

_mouseRectContainer.y=minY;         

}         

/************************************************************************/         

/**************************drag  handler*******************************/         

private function clipMouseDownHandler(evt:MouseEvent):void {//mouse_down             

var target:Sprite=evt.target as Sprite;             

_currentDragClip=target;             

_currentDragClip.alpha=.5;             

_imageClipDraging=true;             

addChild(target);             

_currentDragClip.startDrag(false);         

}         

/************************************************************************/         

private function checkIntersection():Rectangle {             

var intersectRect:Rectangle=_imageBitmapData.rect.intersection(new Rectangle(_mouseRectContainer.x-_imageBitmap.x,_mouseRectContainer.y-_imageBitmap.y,_mouseRectContainer.width,_mouseRectContainer.height));             trace("与源图BitmapData相交范围:"+intersectRect);             

if (intersectRect.width==0 || intersectRect.height==0) {                 return null;             } 

 var bitmapData:BitmapData=new BitmapData(intersectRect.width,intersectRect.height,true,0);             bitmapData.draw(_imageHotAreaData,new Matrix(1,0,0,1,-intersectRect.x,-intersectRect.y),null,null,new Rectangle(0,0,intersectRect.width,intersectRect.height));             

var intersectHotAreaRect:Rectangle=bitmapData.getColorBoundsRect(0xFFFF0000, 0xFFFF0000,true);             

trace("最终切图块的范围:"+intersectHotAreaRect);             

if (intersectHotAreaRect.width==0 || intersectHotAreaRect.height==0) {                                                 return null;             }  

           //扩展范围避免误差             

intersectHotAreaRect.x-=1            

 intersectHotAreaRect.y-=1            

 intersectHotAreaRect.width+=2             

intersectHotAreaRect.height+=2             

return intersectHotAreaRect;        

 }         

private function cutImage(rect:Rectangle):void {//关键的切图部分            

 if (!rect) {                 return;             }             

var clipBitmapData:BitmapData=new BitmapData(rect.width,rect.height,true,0);             

varcliptX:Number=(_mouseRectContainer.x=_mouseRectContainer.x<_imageBitmap.x?0:_mouseRectContainer.x-_imageBitmap.x)+rect.x;             varcliptY:Number=(_mouseRectContainer.y=_mouseRectContainer.y<_imageBitmap.y?0:_mouseRectContainer.y-_imageBitmap.y)+rect.y;             clipBitmapData.draw(_imageBitmapData,new Matrix(1,0,0,1,-cliptX,-cliptY),null,null,new Rectangle(0,0,rect.width,rect.height));//intersectHotAreaRect)   

          var clipBitmap:Bitmap=new Bitmap(clipBitmapData);            

 clipBitmap.filters=[new GlowFilter(0,1,2,2,10,1)];             

var sprite:Sprite=new Sprite            

 with(sprite.graphics){            

 lineStyle(0);             

lineTo(rect.width,0);            

 lineTo(rect.width,rect.height);             

lineTo(0,rect.height);             

lineTo(0,0);}            

 sprite.x=_mouseRectContainer.x+rect.x+_imageBitmap.x            

 sprite.y=_mouseRectContainer.y+rect.y+_imageBitmap.y            
 sprite.addEventListener(MouseEvent.MOUSE_DOWN,clipMouseDownHandler);             

Sprite(addChild(sprite)).addChild(clipBitmap)            

 var fillRect:Rectangle=new Rectangle(sprite.x-_imageBitmap.x,sprite.y-_imageBitmap.y,rect.width,rect.height);             _imageBitmapData.fillRect(fillRect,0);             

_imageHotAreaData.fillRect(fillRect,0);             

  clibImg = clipBitmap;// 剪切图片      

   } 

    } 

} 

/--------------------------------------------------------------结束------- ---------------------------------------------------------------------/
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值