Flex 抠图程序

最新推荐文章于 2022-06-22 16:02:41 发布

yuanpan

最新推荐文章于 2022-06-22 16:02:41 发布

阅读量1k

点赞数

文章标签： flex function import image null matrix

本文链接：https://blog.csdn.net/yuanpan/article/details/5098966

版权

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

   }

    }

}

/--------------------------------------------------------------结束------- ---------------------------------------------------------------------/