flex 实现的多点切割+mask蒙版+自动识别非透明区域+自适应图片大小

先上代码：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="650" height="520" creationComplete="init()"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; import mx.graphics.ImageSnapshot; [Bindable] [Embed(source="page-1.jpg")] private static var LOGO:Class; [Bindable] public var _w:int; [Bindable] public var _h:int; [Bindable] public var loc:Point; private var points:Array; private var pointvs:Array; private var showline:Sprite; private var dic:Dictionary; private var bkf:Number = 0.2; //made by ljwhx2002 //http://2188sys.appspot.com private function init():void{ points = new Array(); pointvs = new Array(); showline = new Sprite(); //showline.x = 3; //showline.y = 3; dic = new Dictionary(true); content.rawChildren.addChild(showline); addpoint(); addpoint(); addpoint(); } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ super.updateDisplayList(unscaledWidth,unscaledHeight); dopaint(); } private function dopaint():void{ maskcan.graphics.clear(); maskcan.graphics.beginFill(0xffffff,bkf); maskcan.graphics.drawRect(0,0,maskcan.width,maskcan.height); maskcan.graphics.endFill(); if(showline)showline.graphics.clear(); if(points!=null && points.length>1){ maskcan.graphics.beginFill(0xff0000); showline.graphics.moveTo(points[0].x,points[0].y); maskcan.graphics.moveTo(points[0].x,points[0].y); var b:Boolean = true; for(var i:uint=1;i<points.length;i++){ if(b)showline.graphics.lineStyle(2,0xff0000); if(!b)showline.graphics.lineStyle(2,0x0000ff); maskcan.graphics.lineTo(points[i].x,points[i].y); showline.graphics.lineTo(points[i].x,points[i].y); b=!b; } showline.graphics.lineStyle(2,0x00ff00); maskcan.graphics.moveTo(points[0].x,points[0].y); showline.graphics.lineTo(points[0].x,points[0].y); maskcan.graphics.endFill(); } } private function addpoint():void{ var box:Sprite = new Sprite(); box.graphics.beginFill(0xff6600,0.9); box.graphics.drawCircle(0,0,5); box.graphics.endFill(); switch(points.length){ case 0: box.x = 100; box.y = 100; break; case 1: box.x = 400; box.y = 100; break; case 2: box.x = 400; box.y = 400; break; case 3: box.x = 100; box.y = 400; break; default: box.x = 100; box.y = points[points.length-1].y-(points[points.length-1].y-100)/5; break; } showline.addChild(box); pointvs.push(box); dic[box]=new Point(box.x,box.y); points.push(dic[box]); box.addEventListener(MouseEvent.MOUSE_DOWN,boxdown); this.addEventListener(MouseEvent.MOUSE_UP,boxup); this.addEventListener(MouseEvent.MOUSE_MOVE,boxmove); this.invalidateDisplayList(); } private var curbox:DisplayObject; private function boxdown(e:MouseEvent):void{ e.preventDefault(); curbox = e.currentTarget as DisplayObject; } private function boxmove(e:MouseEvent):void{ if(curbox){ curbox.x = content.mouseX; curbox.y = content.mouseY; dic[curbox].x=curbox.x; dic[curbox].y = curbox.y; this.invalidateDisplayList(); } } private function boxup(e:MouseEvent):void{ curbox = null; } private function redo():void{ points = new Array(); for(var j:uint=0;j<pointvs.length;j++){ dic[pointvs[j]]=null; showline.removeChild(pointvs[j] as DisplayObject); } pointvs = new Array(); this.invalidateDisplayList(); } private function ok():void{ btn2.enabled=false; btn1.enabled=false; if(points.length<=2){ Alert.show("您未剪裁任何区域,请增加切点进行剪裁"); return; } bkf = 0; dopaint(); showline.graphics.clear(); for(var j:uint=0;j<pointvs.length;j++){ showline.removeChild(pointvs[j] as DisplayObject); } var scale:Number = 1; if(_w<=0){ _w=img.content.width; } if(_h<=0){ _h = img.content.height; } if(_w>598||_h>445){ scale = Math.max(_w/598,_h/445); } //var p:Point = new Point(rect.topLeft.x/2,rect.topLeft.y/2); //识别有色区域 var bmd:BitmapData = ImageSnapshot.captureBitmapData(content,new Matrix(scale,0,0,scale),null,null,null,true); var rect:Rectangle = bmd.getColorBoundsRect(0xff000000,0x00000000,false); var bmd2:BitmapData = new BitmapData(rect.width,rect.height,true,0xff000000); bmd2.copyPixels(bmd,rect,new Point(0,0)); } ]]--> </mx:Script> <mx:Label width="606" text="无敌切割" color="#ffffff" fontWeight="bold" x="10" y="11"/> <mx:Canvas id="content" y="30" width="600" height="450" horizontalCenter="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" > <mx:Canvas id="maskcan" cacheAsBitmap="true" width="100%" height="100%" /> <mx:Image source="{LOGO}" id="img" maxWidth="598" maxHeight="445" mouseDown="{img.startDrag()}" cacheAsBitmap="true" mouseUp="{img.stopDrag()}" buttonMode="true" mask="{maskcan}" /> </mx:Canvas> <mx:Label bottom="10" text="增加切点可剪裁任意形状多边形，可拖动切点的位置来控制区域." color="#3366CC" x="11"/> <mx:Button id="btn1" label="增加切点" y="483" toolTip="增加剪裁的边点，可自由拖动" click="{addpoint()}" styleName="primaryButton" x="363"/> <mx:Button id="btn2" label="重新来过" y="483" toolTip="清除当前剪裁点" click="{redo()}" styleName="primaryButton" x="455"/> <mx:Button id="btn4" label=">>>完成" y="483" toolTip="保存当前剪裁区域到设计器并退出" click="{ok()}" styleName="primaryButton" color="0x000000" width="78" x="547"/> </mx:Application>

 

 

功能如下：

   

      能按任意多边形剪裁一个图片，多边形的点由用户添加和控制，最终切割出来的图应该是有色区域部分最小的图，透明的多余边缘可过滤。

     还有几个细节：切割过程中切割区域外要50%透明显示，内部是100%可见的，和ps的切割效果类似，只不过切点可以自由增加；用户切割操作时候应该是小屏幕，而切割后是按原图比例的。比如一个2000×2000的图片，切割屏幕只有100×100的话，要能适应。

 

代码说明：

其中切割拖动过程主区域和其它区域的区别都是用mask实现的，

 

整个的切割流程：

 

    底图使用mask，mask本身是一个canvas，里面用graphics控制，拖动切点后重新渲染一把。

 

   渲染路径算法： 按次序简单的绘制2点间路程，这个算法目前简单，每增加一个切点默认加在首尾间。

 

 

最终切割过滤有色边缘算法如下，主要是通过bitmapdata的getColorBoundsRect完成：

 

//识别有色区域
       var bmd:BitmapData = ImageSnapshot.captureBitmapData(content,new Matrix(scale,0,0,scale),null,null,null,true);
    var rect:Rectangle = bmd.getColorBoundsRect(0xff000000,0x00000000,false);
    var bmd2:BitmapData = new BitmapData(rect.width,rect.height,true,0xff000000);
    bmd2.copyPixels(bmd,rect,new Point(0,0));

 

附件demo：

 

·········奥晕，不能传swf，可自行拷贝代码运行，上面代码中是完整的。

 

只能看我实际应用的效果了：点击预览效果

设计器上面上传图片然后选择-切割功能（点击图片后，在图片下面的工具栏上）