Matrix图片变换
主要讲解一下如何处理对一个Bitmap对象进行处理,包括:缩放、旋转、位移、倾斜等。在最后将以一个简单的Demo来演示图片特效的变换。
Matrix
对于一个图片变换的处理,需要Matrix类的支持,它位于"android.graphics.Matrix"包下,是Android提供的一个矩阵工具类,它本身不能对图像或View进行变换,但它可与其他API结合来控制图形、View的变换,如Canvas。
Matrix提供了一些方法来控制图片变换:
setTranslate(float dx,float dy):控制Matrix进行位移。
setSkew(float kx,float ky):控制Matrix进行倾斜,kx、ky为X、Y方向上的比例。
setSkew(float kx,float ky,float px,floatpy):控制Matrix以px、py为轴心进行倾斜,kx、ky为X、Y方向上的倾斜比例。
setRotate(float degrees):控制Matrix进行depress角度的旋转,轴心为(0,0)。
setRotate(float degrees,float px,floatpy):控制Matrix进行depress角度的旋转,轴心为(px,py)。
setScale(float sx,float sy):设置Matrix进行缩放,sx、sy为X、Y方向上的缩放比例。
setScale(float sx,float sy,floatpx,float py):设置Matrix以(px,py)为轴心进行缩放,sx、sy为X、Y方向上的缩放比例。
图片在内存中存放的就是一个一个的像素点,而对于图片的变换主要是处理图片的每个像素点,对每个像素点进行相应的变换,即可完成对图像的变换。
Matrix缩放
/** * 缩放图片 */ protected void bitmapScale(float x, float y) { // 因为要将图片放大,所以要根据放大的尺寸重新创建Bitmap Bitmap afterBitmap = Bitmap.createBitmap( (int) (baseBitmap.getWidth() * x), (int) (baseBitmap.getHeight() * y), baseBitmap.getConfig()); Canvas canvas = new Canvas(afterBitmap); // 初始化Matrix对象 Matrix matrix = new Matrix(); // 根据传入的参数设置缩放比例 matrix.setScale(x, y); // 根据缩放比例,把图片draw到Canvas上 canvas.drawBitmap(baseBitmap, matrix, paint); iv_after.setImageBitmap(afterBitmap); }
效果展示:
Matrix旋转
/** * 图片旋转 */ protected void bitmapRotate(float degrees) { // 创建一个和原图一样大小的图片 Bitmap afterBitmap = Bitmap.createBitmap(baseBitmap.getWidth(), baseBitmap.getHeight(), baseBitmap.getConfig()); Canvas canvas = new Canvas(afterBitmap); Matrix matrix = new Matrix(); // 根据原图的中心位置旋转 matrix.setRotate(degrees, baseBitmap.getWidth() / 2, baseBitmap.getHeight() / 2); canvas.drawBitmap(baseBitmap, matrix, paint); iv_after.setImageBitmap(afterBitmap); }
效果展示:
Matrix位移
/** * 图片移动 */ protected void bitmapTranslate(float dx, float dy) { // 需要根据移动的距离来创建图片的拷贝图大小 Bitmap afterBitmap = Bitmap.createBitmap( (int) (baseBitmap.getWidth() * dx), (int) (baseBitmap.getHeight() * dy), baseBitmap.getConfig()); Canvas canvas = new Canvas(afterBitmap); Matrix matrix = new Matrix(); // 设置移动的距离 matrix.setTranslate(dx, dy); canvas.drawBitmap(baseBitmap, matrix, paint); iv_after.setImageBitmap(afterBitmap); }
效果展示:
Matrix倾斜
/** * 倾斜图片 */ protected void bitmapSkew(float dx, float dy) { // 根据图片的倾斜比例,计算变换后图片的大小, Bitmap afterBitmap = Bitmap.createBitmap(baseBitmap.getWidth() + (int) (baseBitmap.getWidth() * dx), baseBitmap.getHeight() + (int) (baseBitmap.getHeight() * dy), baseBitmap.getConfig()); Canvas canvas = new Canvas(afterBitmap); Matrix matrix = new Matrix(); // 设置图片倾斜的比例 matrix.setSkew(dx, dy); canvas.drawBitmap(baseBitmap, matrix, paint); iv_after.setImageBitmap(afterBitmap); }
效果展示:
Matrix变换注意事项
上面几个小方法演示了如何使用Matrix进行变换,但是还有几点需要额外注意一下:
1、对于一个从BitmapFactory.decodeXxx()方法加载的Bitmap对象而言,它是一个只读的,无法对其进行处理,必须使用Bitmap.createBitmap()方法重新创建一个Bitmap对象的拷贝,才可以对拷贝的Bitmap进行处理。
2、因为图像的变换是针对每一个像素点的,所以有些变换可能发生像素点的丢失,这里需要使用Paint.setAnitiAlias(boolean)设置来消除锯齿,这样图片变换后的效果会好很多。
3、在重新创建一个Bitmap对象的拷贝的时候,需要注意它的宽高,如果设置不妥,很可能变换后的像素点已经移动到图片之外去了。
Paint的效果研究在Paint中有很多的属性可以设置,比如可以设置阴影,颜色过滤等等,这些会产生不同的奇妙效果,今天就对各种属性探索一下。
方法一:
//设置绘制的颜色,a代表透明度,r、g、b代表颜色值。 setARGB(int a,int r,int g,int b);
这个不多说了,还有两个类似的方法,将设置alpha和rgb分割开来了。注意的是这里的a值是0~255的范围,不是小数。
方法二:
//设置是否使用抗锯齿功能,会消耗较大资源,绘制图形速度会变慢。 setAntiAlias(boolean aa);
也不多说,你可以试验一下效果,设置后会平滑一些;
方法三:
//设定是否使用图像抖动处理,会使绘制出来的图片颜色更加平滑和饱满,图像更加清晰 setDither(boolean dither);
方法四:
//设置MaskFilter,可以用不同的MaskFilter实现滤镜的效果,如滤化,立体等 setMaskFilter(MaskFilter maskfilter);
MaskFilter类可以为Paint分配边缘效果。对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。Android包含了下面几种MaskFilter:
BlurMaskFilter:指定了一个模糊的样式和半径来处理Paint的边缘。
EmbossMaskFilter:指定了光源的方向和环境光强度来添加浮雕效果。
要应用一个MaskFilter,可以使用setMaskFilter方法,并传递给它一个MaskFilter对象。下面的例子是对一个已经存在的Paint应用一个EmbossMaskFilter:
// 设置光源的方向 float[] direction = new float[]{ 1, 1, 1 }; //设置环境光亮度 float light = 0.4f; // 选择要应用的反射等级 float specular = 6; // 向mask应用一定级别的模糊 float blur = 3.5f; EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur); // 应用mask myPaint.setMaskFilter(emboss);
再看下面使用BlurMaskFilter:
//前面一个控制阴影的宽度,后面一个参数控制阴影效果 maskFilter = new BlurMaskFilter(10, BlurMaskFilter.Blur.SOLID);
方法五:
//设置颜色过滤器,可以在绘制颜色时实现不用颜色的变换效果 setColorFilter(ColorFilter colorfilter);
这个方法也值得试验一下:
MaskFilter是对一个Paint的alpha通道的转换,而ColorFilter则是对每一个RGB通道应用转换。所有由ColorFilter所派生的类在执行它们的转换时,都会忽略alpha通道。
方法六:
//设置绘制路径的效果,如点画线等 setPathEffect(PathEffect effect);
又是一个很好玩的方法:
到目前为止,所有的效应都会影响到Paint填充图像的方式;PathEffect是用来控制绘制轮廓(线条)的方式。PathEffect对于绘制Path基本图形特别有用,但是它们也可以应用到任何Paint中从而影响线条绘制的方式。
使用PathEffect,可以改变一个形状的边角的外观并且控制轮廓的外表。Android包含了多个PathEffect,包括:
1)CornerPathEffect:可以使用圆角来代替尖锐的角从而对基本图形的形状尖锐的边角进行平滑。
2)DashPathEffect:可以使用DashPathEffect来创建一个虚线的轮廓(短横线/小圆点),而不是使用实线。你还可以指定任意的虚/实线段的重复模式。
3)DiscretePathEffect 与DashPathEffect相似,但是添加了随机性。当绘制它的时候,需要指定每一段的长度和与原始路径的偏离度。
4)PathDashPathEffect:这种效果可以定义一个新的形状(路径)并将其用作原始路径的轮廓标记。
下面的效果可以在一个Paint中组合使用多个Path Effect。
1)SumPathEffect:顺序地在一条路径中添加两种效果,这样每一种效果都可以应用到原始路径中,而且两种结果可以结合起来。
2)ComposePathEffect:将两种效果组合起来应用,先使用第一种效果,然后在这种效果的基础上应用第二种效果。
对象形状的PathEffect的改变会影响到形状的区域。这就能够保证应用到相同形状的填充效果将会绘制到新的边界中。
使用setPathEffect方法可以把PathEffect应用到Paint对象中,如下所示:
paint.setPathEffect(new CornerPathEffect(10));
其他效果懒得测试了,这个在模拟器上跑的时候效果也不明显,但是真机上跑的时候的确圆滑了许多,看上去很舒服。
方法七:
//设置图形重叠时的处理方式,如合并,取交集或并集,经常用来制作橡皮的擦除效果 setXfermode(Xfermode xfermode);
可以通过修改Paint的Xfermode来影响在Canvas已有的图像上面绘制新的颜色的方式。
在正常的情况下,在已有的图像上绘图将会在其上面添加一层新的形状。如果新的Paint是完全不透明的,那么它将完全遮挡住下面的Paint;如果它是部分透明的,那么它将会被染上下面的颜色。下面的Xfermode子类可以改变这种行为:
1)AvoidXfermode:指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图)。
2)PixelXorXfermode:当覆盖已有的颜色时,应用一个简单的像素XOR操作。
3)PorterDuffXfermode:这是一个非常强大的转换模式,使用它,可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。
要应用转换模式,可以使用setXferMode方法,如下所示:
AvoidXfermode avoid = newAvoidXfermode(Color.BLUE, 10, AvoidXfermode.Mode. AVOID); borderPen.setXfermode(avoid);
这里可以实现完美的橡皮擦功能!代码异常简单:
Xfermode xFermode = newPorterDuffXfermode(PorterDuff.Mode.CLEAR); paint.setXfermode(xFermode);
这是使用的最后一个子类,关于16条Porter-Duff规则,如下:
private static final Xfermode[] sModes = { new PorterDuffXfermode(PorterDuff.Mode.CLEAR), new PorterDuffXfermode(PorterDuff.Mode.SRC), new PorterDuffXfermode(PorterDuff.Mode.DST), new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER), new PorterDuffXfermode(PorterDuff.Mode.DST_OVER), new PorterDuffXfermode(PorterDuff.Mode.SRC_IN), new PorterDuffXfermode(PorterDuff.Mode.DST_IN), new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT), new PorterDuffXfermode(PorterDuff.Mode.DST_OUT), new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP), new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP), new PorterDuffXfermode(PorterDuff.Mode.XOR), new PorterDuffXfermode(PorterDuff.Mode.DARKEN), new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN), new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY), new PorterDuffXfermode(PorterDuff.Mode.SCREEN) };
它们每个显示的效果具体如下:
PorterDuff.Mode.CLEAR:清除画布上图像
PorterDuff.Mode.SRC:显示上层图像
PorterDuff.Mode.DST:显示下层图像
PorterDuff.Mode.SRC_OVER:上下层图像都显示,上层居上显示
PorterDuff.Mode.DST_OVER:上下层都显示,下层居上显示
PorterDuff.Mode.SRC_IN:取两层图像交集部门,只显示上层图像
PorterDuff.Mode.DST_IN:取两层图像交集部门,只显示下层图像
PorterDuff.Mode.SRC_OUT:取上层图像非交集部门
PorterDuff.Mode.DST_OUT:取下层图像非交集部门
PorterDuff.Mode.SRC_ATOP:取下层图像非交集部门与上层图像交集部门
PorterDuff.Mode.DST_ATOP:取上层图像非交集部门与下层图像交集部门
PorterDuff.Mode.XOR:取两层图像的非交集部门
RoundImageView使用了自定义View实现,重点重写了onDraw方法,使用了paint、canvas,这两个自定义View必须掌握的两个基础工具,这里就不多写了。