Android中绘制圆角矩形图片及任意形状图片

圆角矩形图片在苹果的产品中很流行，相比于普通的矩形，很多人都喜欢圆角矩形的图片，因为它避开了直角的生硬，带来更好的用户体验，下面是几个设计的例子：

下面在Android中实现将普通的矩形图片绘制成圆角矩形。首先看最终效果：

代码清单：

1. package com.example.phototest;
2. import android.os.Bundle;
3. import android.app.Activity;
4. import android.graphics.Bitmap;
5. import android.graphics.BitmapFactory;
6. import android.graphics.Canvas;
7. import android.graphics.Color;
8. import android.graphics.Paint;
9. import android.graphics.Path;
10. import android.graphics.PorterDuffXfermode;
11. import android.graphics.PorterDuff;
12. import android.graphics.RectF;
13. import android.graphics.drawable.BitmapDrawable;
14. import android.graphics.drawable.Drawable;
15. import android.view.Menu;
16. import android.widget.ImageView;
17. public class MainActivity extends Activity {
18. private ImageView myImageView;
19. @Override
20. public void onCreate(Bundle savedInstanceState) {
21. super.onCreate(savedInstanceState);
22. setContentView(R.layout.activity_main);
23. myImageView=(ImageView)findViewById(R.id.imageView1);
24. Bitmap photo = BitmapFactory.decodeResource(getResources(), R.drawable.photo1);
25. myImageView.setImageBitmap(createFramedPhoto(500,400,photo,20));
26. //myImageView.setImageBitmap(createStarPhoto(500,400,photo));
27. }
28. @Override
29. public boolean onCreateOptionsMenu(Menu menu) {
30. getMenuInflater().inflate(R.menu.activity_main, menu);
31. return true;
32. }
33. private Bitmap createFramedPhoto(int x, int y, Bitmap image, float outerRadiusRat) {
34. //根据源文件新建一个darwable对象
35. Drawable imageDrawable = new BitmapDrawable(image);
36. // 新建一个新的输出图片
37. Bitmap output = Bitmap.createBitmap(x, y, Bitmap.Config.ARGB_8888);
38. Canvas canvas = new Canvas(output);
39. // 新建一个矩形
40. RectF outerRect = new RectF(0, 0, x, y);
41. // 产生一个红色的圆角矩形
42. Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
43. paint.setColor(Color.RED);
44. canvas.drawRoundRect(outerRect, outerRadiusRat, outerRadiusRat, paint);
45. // 将源图片绘制到这个圆角矩形上
46. //详解见http://lipeng88213.iteye.com/blog/1189452
47. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
48. imageDrawable.setBounds(0, 0, x, y);
49. canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG);
50. imageDrawable.draw(canvas);
51. canvas.restore();
52. return output;
53. }
54. }

实现原理：通过在一个Canvas中绘制一个最终的输出形状，然后通过类似于遮罩的方式将图形显示出来，最终的图片形状就是先前绘制的图形的形状。具体起作用的函数是这个：

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

用来设置叠加模式的。

通过这个原理，我能就能够绘制各种各样形状的图片，比如：

代码：

1. private Bitmap createStarPhoto(int x, int y, Bitmap image)
2. {
3. //根据源文件新建一个darwable对象
4. Drawable imageDrawable = new BitmapDrawable(image);
5. // 新建一个新的输出图片
6. Bitmap output = Bitmap.createBitmap(x, y, Bitmap.Config.ARGB_8888);
7. Canvas canvas = new Canvas(output);
8. // 新建一个矩形
9. RectF outerRect = new RectF(0, 0, x, y);
10. Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
11. paint.setColor(Color.RED);
12. Path path = new Path();
13. //绘制三角形
14. //path.moveTo(0, 0);
15. //path.lineTo(320, 250);
16. //path.lineTo(400, 0);
17. //绘制正无边形
18. long tmpX,tmpY;
19. path.moveTo(200, 200);// 此点为多边形的起点
20. for(int i=0;i<=5;i++)
21. {
22. tmpX =(long)(200+200*Math.sin((i*72+36)*2*Math.PI/360));
23. tmpY =(long)(200+200*Math.cos((i*72+36)*2*Math.PI/360));
24. path.lineTo(tmpX, tmpY);
25. }
26. path.close(); // 使这些点构成封闭的多边形
27. canvas.drawPath(path, paint);
28. //canvas.drawCircle(100, 100, 100, paint);
29. // 将源图片绘制到这个圆角矩形上
30. // 产生一个红色的圆角矩形
31. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
32. imageDrawable.setBounds(0, 0, x, y);
33. canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG);
34. imageDrawable.draw(canvas);
35. canvas.restore();
36. return output;
37. }