先上代码: 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,unscaledHeig ht); dopaint(); } private function dopaint():void{ maskcan.graphics.clear(); maskcan.graphics.beginFill(0xffffff,bkf); maskcan.graphics.drawRect(0,0,maskcan.width,maskca n.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;iArray(); for(var j:uint=0;jArray(); this.invalidateDisplayList(); } private function ok():void{ btn2.enabled=false; btn1.enabled=false; if(points.length598||_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)); } ]]--> >>完成" y="483" toolTip="保存当前剪裁区域到设计器并退出" click="{ok()}" styleName="primaryButton" color="0x000000" width="78" x="547"/> 功能如下:
能按任意多边形剪裁一个图片,多边形的点由用户添加和控制,最终切割出来的图应该是有色区域部分最小的图,透明的多余边缘可过滤。
还有几个细节:切割过程中切割区域外要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,可自行拷贝代码运行,上面代码中是完整的。
只能看我实际应用的效果了:点击预览效果
设计器上面上传图片然后选择-切割功能(点击图片后,在图片下面的工具栏上)
能按任意多边形剪裁一个图片,多边形的点由用户添加和控制,最终切割出来的图应该是有色区域部分最小的图,透明的多余边缘可过滤。
还有几个细节:切割过程中切割区域外要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,可自行拷贝代码运行,上面代码中是完整的。
只能看我实际应用的效果了:点击预览效果
设计器上面上传图片然后选择-切割功能(点击图片后,在图片下面的工具栏上)