转:关于android中图片裁剪以及PorterDuffXfermode的使用经验小结
原文:关于android中图片裁剪以及PorterDuffXfermode的使用经验小结
1.关于图片”裁剪”出现锯齿的问题
使用canvas
的clipXxx
函数,可以获取只显露出某一区域的图形,但是有锯齿,即使paint
使用了setAntiAlias(true)
函数依然无法消除锯齿问题。
解决方案:
使用shader
方案,即:
paint.setShader(mBitmapShader);
canvas.drawCircle(mCenterX, mCenterY, mRadius, paint);
其中mBitmapShader的声明与实现是:
BitmapShader mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//如果要实现位置变换等,可以添加如下代码:
mBitmapShader.setLocalMatrix(matrix);
具体的实现,可见AvatarImageView项目中,多字裁剪的实现方式。
2.PorterDuffXfermode实现方式
PorterDuffXfermode
主要用于获取两张图片取“并集/交集”等的效果。这里的取“交集/并集”是根据图片A和图片B的某个像素点的颜色值来确定的。
假设代码的实现为如下方式:
- 首先,画出A-des。这里的A-des不一定必须是
bitmap
,可以是path
等。 - 其次,设置
paint
的Xfermode
为
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
- 最后,画出B-src。与第一步中的A-des相似,这里的B-src不一定必须是
bitmap
,可以是path
等。
根据上面的三个步骤,分析绘出的图的某一个像素点的颜色值情况:
- 如果在
(x,y)
像素点处,A的颜色值为透明或者没有设定,而B的不为0,那么此点的颜色值为0x00000000
。因为A为0了,而SRC_IN
的效果就是最后要显示的图片取交集,并且后画的显示在交集上,而交集为0(底部颜色为0,可以认为最后颜色的透明度为两者相乘),所以就将B图变成透明的了。如果A的透明度为0.5,那么SRC_IN
后的图片的相当于B*0.5透明度。 - 最后生成的图像,是对两个图像的每一个像素点分别计算交集获取的结果,与图像的“区域”无关。
举例说明:
仿微信聊天中带有三角凸起的图片的代码片段:
public static Bitmap canvasTriangle(Bitmap bitmapimg, int direct) {
Bitmap output = Bitmap.createBitmap(bitmapimg.getWidth(),
bitmapimg.getHeight(), Bitmap.Config.ARGB_4444);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmapimg.getWidth(),
bitmapimg.getHeight());
// paint.setStrokeWidth(30);
// paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(0x66000000);
//可以使用canvas.drawRect() + canvas.drawPath()等方式多个区域合并后进行绘制
//path只是用来绘制像素的透明度的。如果paint的透明度为0,那么相当于没有画任何东西,如果paint的透明度为0.3,那么最后的图片的透明度为0.3
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(bitmapimg.getWidth() - 15, 0);
path.lineTo(bitmapimg.getWidth() - 15, 10);
path.lineTo(bitmapimg.getWidth(), 20);
path.lineTo(bitmapimg.getWidth() - 15, 30);
path.lineTo(bitmapimg.getWidth() - 15, bitmapimg.getHeight());
path.lineTo(0, bitmapimg.getHeight());
path.close();
canvas.drawPath(path, paint);//(DES)
//两层绘制交集。显示上层
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmapimg, rect, rect, paint);//(SRC)
return output;
}
网友评论