`

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

 
阅读更多

  先上代码:    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;i598||_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,可自行拷贝代码运行,上面代码中是完整的。
  只能看我实际应用的效果了:点击预览效果
  设计器上面上传图片然后选择-切割功能(点击图片后,在图片下面的工具栏上)
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics