flex 实现的多点切割+mask蒙版+自动识别非透明区域+自适应图片大小
- 博客分类:
- 技术杂绘
先上代码: width="650" height="520" creationComplete="init()"> 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)); } ]]--> width="606" text="无敌切割" color="#ffffff" fontWeight="bold" x="10" y="11"/> width="600" height="450" horizontalCenter="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" > width="100%" height="100%" /> >>完成" 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,可自行拷贝代码运行,上面代码中是完整的。
只能看我实际应用的效果了:点击预览效果
设计器上面上传图片然后选择-切割功能(点击图片后,在图片下面的工具栏上)
发表评论
-
常见的字符串和数的转换(C)
2012-07-06 09:51 7341. 字符串转换为数字:头文件 #include at ... -
数据验证--正则表达式验证RegularExpressionValidator
2012-07-06 09:45 645RegularExpressionValidator控件用 ... -
Oracle 正则表达式
2012-07-06 09:37 674Oracle正则表达式 周末学习正则表达式,将搜集的资 ... -
DevExpress皮肤引用的办法
2012-07-06 09:30 947procedure TFrmMain.SetSkin(sk ... -
JS操作iframe里的dom,js iframe
2012-07-05 20:45 647直接赋值如下代码测试即可明白: 1.html: ... -
RSS Reader实例开发之使用Service组件
2012-07-03 13:43 665到目前为止,我们已经实现了RSS Reader的基本功能, ... -
Flex事件机制二
2012-07-02 10:36 665三: dispatcherEvent EventDispa ... -
as与js相互通信(flex中调用js函数)
2012-07-02 10:36 658Flex中As调用Js的方法是: 1、导入包 (i ... -
flex的数据验证!
2012-07-02 10:36 57219.3.2 如何使用数 ... -
flex使用翻译串流程
2012-07-01 00:13 658== 翻译串流程 == 如果在本地进行翻译串编译, ... -
[ActionScript3.0][My flex]读书笔记三之 模块化编程
2012-07-01 00:13 5831.加载mxml模块 第一步: 新建mxml模块:Data ... -
flex与C# Socket通信
2012-07-01 00:13 583Socket 通信没什么好说,一个服务端,多个客户端,很容 ... -
Flex组件自动获取输入焦点
2012-07-01 00:12 617浏览器加载swf后,Flex组件自动获取输入焦点。 1.在 ... -
Flex中使用HttpService和WebService方式通信
2012-07-01 00:12 834HttpService、WebService、Remote ...
相关推荐
java实现图片上传并添加水印效果(文字水印,蒙版,logo图片),自动进行文字大小行数位置匹配,文字自动换行
moviepy音视频剪辑:使用mask遮罩实现视频叠加透明效果.rar
js 动态获取图片上的矩形热区,可随意选择区域。鼠标经过该区域时,会出现一半透明蒙版,显示该区域的位置大小。点击可超链接。创建的热区可修改链接,也可以动态删除热区
Android蒙版+Bannar广告自动无限轮播的Demo实现
moviepy音视频剪辑:使用mask遮罩剪辑实现叠加透明效果详解.rar
兼容谷歌、火狐、IE7.0以上版本的所有浏览器的透明边框弹窗,带半透明蒙版,参考购物网站实例制作
很简单的一个教程,可以学一下哦,简单处理一下数码相机拍出来人像美眉图片!
Topaz Mask AI(图片蒙版工具)是一款非常好用的图片蒙版工具,相较于PS,Topaz Mask AI不需要繁琐的笔刷就能获得高质量的蒙版,只需要用工具勾勒出图片的轮廓就能快速实现图片蒙版效果,软件适用于非常多的场景,非常...
Topaz Mask AI(图片蒙版工具)是一款非常好用的图片蒙版工具,相较于PS,Topaz Mask AI不需要繁琐的笔刷就能获得高质量的蒙版,只需要用工具勾勒出图片的轮廓就能快速实现图片蒙版效果,软件适用于非常多的场景,非常...
VB.net源码,通过HLSL shader对图像进行灰度变成不透明度的处理。通过自定义控件利用MediaPlayer播放透明通道视频。利用ShaderEffect实时处理的视频帧作为OpacityMask蒙版。
Unity5的unitypackage 利用UI Mask 实现对Sprite精灵遮罩处理。不是插件
Android指引蒙版的实现。
js鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容
jquery实现蒙版效果,可以用在微信诱导点击等等
html,css.css3.js,利用mask蒙版实现展示图片的动画
使用单窗体实现透明窗体或蒙板效果,可用于窗体美化或其他特殊用途,具体操作简单,使用方便,效果突出,可自定义扩展。
地图导航类APP半透明黑色蒙版的透明度阈限研究.pdf
在以下图片中,显示了此过滤器的结果,并且半径大小设置为14。 原始图片 结果图片 锐化蒙版滤镜 结果图片 FILTER PARAMETER: radius = 5 unsharp mask value = 4 坎尼边缘检测器 结果图片 FILTER PARAMETER: low ...
滑动列表时,超出范围,隐藏列表项中的特效,实现特效的mask功能, 滑动列表时,超出范围,隐藏列表项中的特效,实现特效的mask功能 滑动列表时,超出范围,隐藏列表项中的特效,实现特效的mask功能 滑动列表时,...
安卓Android实现蒙版引导功能,自定义实现透明蒙版 需求:博主前段时间做的教育类型APP,需要引导用户(低龄化小朋友),播放器的播放,页面可以左右滑动,以及右上方进入答题卡入口