Android语言基础教程（168）Android图形图像处理技术绘制2D图像之绘制图片：Android绘图秘籍：掌握2D图像绘制，让你的应用“炫”出天际！

你以为Android绘图只是简单的涂涂画画？掌握这些核心技巧，让你的应用界面从“勉强能用”升级到“惊艳全场”！

在Android应用开发中，一个漂亮的界面往往能立刻吸引用户的眼球。无论是精致的图标、流畅的动画还是独特的视觉效果，这些都离不开Android强大的2D图形绘制能力。

想象一下，你是一名画家，Canvas就是你的画布，Paint就是你的画笔，而Bitmap则是你的颜料。掌握这些工具的使用方法，你就能在Android应用的画布上创造出令人惊叹的视觉作品。

一、Android绘图基础：画布、画笔和颜料

在深入探讨如何绘制图片之前，我们先来了解Android绘图系统的三个核心组件：Canvas（画布）、Paint（画笔）和Bitmap（位图）。

Canvas就像是你作画的画纸，提供了各种绘制方法：drawLine、drawRect、drawCircle、drawOval、drawArc等基本形状，以及drawPath用于绘制自定义路径，drawBitmap用于绘制位图图像，drawText用于绘制文本。

Paint则决定了你绘画的样式和颜色，包括颜色、透明度、样式、阴影等图形属性，以及字体、大小、对齐方式等文本属性。

可以把Android绘图系统想象成现实世界中的画图过程：Canvas（画布）是你的画纸，而Paint就是拿在手中的画笔。

Bitmap是存储像素数据的对象，它可以来自资源文件、网络或手动创建。在Android中绘制图片，本质上就是将Bitmap绘制到Canvas上。

二、搭建绘图框架：从零开始

在Android中绘图只需要继承View类，并重写它的onDraw()方法就可以了。下面是一个基本的绘图框架：

public class GameView extends View {
  public GameView(Context context) {
    super(context);
  }
  
  protected void onDraw(Canvas canvas) {
    // 用户自己的绘图代码
  }
}

然后在Activity中使用这个自定义View：

public class ViewFrameActivity extends Activity {
  private GameView mGameView = null;
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mGameView = new GameView(this);
    setContentView(mGameView); // 设置显示为我们自定义的视图GameView
  }
}

这个框架为我们提供了绘图的基础环境。需要注意的是，对于动态图形（如游戏），我们需要处理屏幕刷新问题。切记，不要直接在非UI线程中调用invalidate()，而应该使用postInvalidate()方法，因为它是在我们自己的线程中调用，通过调用它可以通知UI线程刷新屏幕，是主动调用UI线程的。

三、绘制图片：核心技术与实战代码

绘制图片是Android图形处理中最常见的需求之一。让我们通过一个完整的示例来掌握图片绘制的核心技术：

private static class SampleView extends View {
  private Bitmap mBitmap;
  private Bitmap mBitmap2;
  private Bitmap mBitmap3;
  private Shader mShader;
  
  public SampleView(Context context) {
    super(context);
    setFocusable(true);
    
    // 方法一：从资源加载位图
    InputStream is = context.getResources().openRawResource(R.drawable.app_sample_code);
    mBitmap = BitmapFactory.decodeStream(is); // 解码位图文件到Bitmap
    
    // 方法二：提取原始位图的透明通道
    mBitmap2 = mBitmap.extractAlpha(); // 提取位图的透明通道
    
    // 方法三：创建自定义位图并在上面绘制
    mBitmap3 = Bitmap.createBitmap(200, 200, Bitmap.Config.ALPHA_8);
    drawIntoBitmap(mBitmap3); // 调用自己实现的drawIntoBitmap()
    
    // 创建渐变效果
    mShader = new LinearGradient(0, 0, 100, 70, new int[] { 
      Color.RED, Color.GREEN, Color.BLUE }, 
      null, Shader.TileMode.MIRROR);
  }
  
  private static void drawIntoBitmap(Bitmap bm) {
    float x = bm.getWidth();
    float y = bm.getHeight();
    Canvas c = new Canvas(bm);
    Paint p = new Paint();
    p.setAntiAlias(true); // 开启抗锯齿
    
    // 绘制半透明圆
    p.setAlpha(0x80); // 设置透明度
    c.drawCircle(x/2, y/2, x/2, p);
    
    // 设置混合模式
    p.setAlpha(0x30);
    p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
    
    // 绘制文本
    p.setTextSize(60);
    p.setTextAlign(Paint.Align.CENTER);
    Paint.FontMetrics fm = p.getFontMetrics();
    c.drawText("Alpha", x/2, (y - fm.ascent) / 2, p);
  }
  
  @Override 
  protected void onDraw(Canvas canvas) {
    canvas.drawColor(Color.WHITE); // 清除画布为白色
    
    Paint p = new Paint();
    float y = 10; // 设置纵坐标
    
    p.setColor(Color.RED); // 设置画笔为红色
    // 绘制第1个位图（原始图像）
    canvas.drawBitmap(mBitmap, 10, y, p); 
    y += mBitmap.getHeight() + 10; // 纵坐标增加
    
    // 绘制第2个位图（根据红色的画笔）
    canvas.drawBitmap(mBitmap2, 10, y, p); 
    y += mBitmap2.getHeight() + 10; // 纵坐标增加
    
    p.setShader(mShader); // 设置阴影
    // 绘制第3个位图
    canvas.drawBitmap(mBitmap3, 10, y, p); 
  }
}

这个示例展示了三种不同的位图绘制方式：

四、图片处理高级技巧：让你的图片“炫”起来

掌握了基本的图片绘制后，让我们来看看一些高级技巧，这些技巧能让你的图片效果更加出色。

1. 渐变效果

Android提供了多种渐变效果，如线性渐变、径向渐变和扫描渐变。

 
// 创建线性渐变
Shader shader = new LinearGradient(0, 0, 150, 70, new int[] {
  Color.RED, Color.GREEN, Color.BLUE }, 
  null, Shader.TileMode.MIRROR);
paint.setShader(shader);
canvas.drawBitmap(bitmap, 10, y, paint);

2. 图片变换

使用Matrix类可以对图片进行旋转、缩放、平移等变换：

Matrix matrix = new Matrix();
matrix.postRotate(45); // 旋转45度
matrix.postScale(0.5f, 0.5f); // 缩放为原来的一半
 
canvas.drawBitmap(bitmap, matrix, paint);

3. 圆角图片和圆形头像

实现圆角图片或圆形头像是常见的UI需求：

public class AvatarView extends View {
  private Paint paint;
  private Bitmap avatarBitmap;
  private int centerX, centerY, radius;
  
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    
    // 创建圆形裁剪路径
    Path path = new Path();
    path.addCircle(centerX, centerY, radius, Path.Direction.CW);
    
    // 裁剪画布为圆形
    canvas.clipPath(path);
    
    // 绘制头像
    paint.setStyle(Paint.Style.FILL);
    canvas.drawBitmap(avatarBitmap, centerX - radius, centerY - radius, paint);
    
    // 绘制边框
    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(Color.BLUE);
    paint.setStrokeWidth(5f);
    canvas.drawCircle(centerX, centerY, radius, paint);
  }
}

看到没？同样的Paint对象，切换个style就能变身，比美图秀秀还方便！

五、性能优化：流畅绘制的秘诀

在Android中绘制图片时，性能是一个非常重要的考量因素。以下是几个关键的优化技巧：

1. 对象复用原则

避免在onDraw()方法内创建Paint对象，应在初始化阶段创建并复用。

// 错误做法 - 不要在onDraw中这样做！
protected void onDraw(Canvas canvas) {
  Paint paint = new Paint(); // 每次重绘都创建新对象 - 浪费！
  // ... 绘制代码
}
 
// 正确做法
public class MyView extends View {
  private Paint paint; // 作为成员变量
  
  public MyView(Context context) {
    super(context);
    paint = new Paint(); // 只创建一次
    // ... 其他初始化
  }
  
  protected void onDraw(Canvas canvas) {
    // 使用已有的paint
  }
}

2. 图片内存管理

Bitmap是Android中最消耗内存的对象之一，必须谨慎处理：

3. 使用离屏缓冲

对于复杂的绘制操作，可以使用离屏缓冲（Layer）来提升性能：

// 开启离屏缓冲
setLayerType(View.LAYER_TYPE_HARDWARE, null);
 
// 绘制操作...
 
// 关闭离屏缓冲（如必要）
setLayerType(View.LAYER_TYPE_NONE, null);

六、实战：绘制Android机器人

让我们通过一个完整的示例——绘制Android机器人，来综合运用前面学到的知识：

public class MyView extends View {
  public MyView(Context context) {
    super(context);
  }
  
  @Override
  protected void onDraw(Canvas canvas) {
    Paint paint = new Paint();
    paint.setAntiAlias(true); // 使用抗锯齿功能
    paint.setColor(Color.GREEN);
    
    // 绘制机器人的头
    RectF rectf_head = new RectF(10, 10, 100, 100);
    rectf_head.offset(100, 20); // 设置在X轴上偏移100像素，Y轴上偏移20像素
    canvas.drawArc(rectf_head, -10, -160, false, paint); // 绘制弧
    
    // 绘制眼睛
    paint.setColor(Color.WHITE);
    canvas.drawCircle(135, 53, 4, paint); // 绘制圆 
    canvas.drawCircle(175, 53, 4, paint); // 绘制圆
    
    paint.setColor(Color.GREEN);
    // 绘制天线
    paint.setStrokeWidth(2); // 设置触笔的宽度
    canvas.drawLine(120, 15, 135, 35, paint); // 绘制线
    canvas.drawLine(190, 15, 175, 35, paint); // 绘制线
    
    // 绘制身体
    canvas.drawRect(110, 75, 200, 150, paint); // 绘制矩形
    RectF rectf_body = new RectF(110, 140, 200, 160);
    canvas.drawRoundRect(rectf_body, 10, 10, paint); // 绘制圆角矩形
    
    // 绘制胳膊
    RectF rectf_arm = new RectF(85, 75, 105, 140);
    canvas.drawRoundRect(rectf_arm, 10, 10, paint);
    rectf_arm.offset(120, 0); // 设置在X轴上偏移120像素
    canvas.drawRoundRect(rectf_arm, 10, 10, paint);
    
    // 绘制腿
    RectF rectf_leg = new RectF(125, 150, 145, 200);
    canvas.drawRoundRect(rectf_leg, 10, 10, paint);
    rectf_leg.offset(40, 0); // 设置在X轴上偏移40像素
    canvas.drawRoundRect(rectf_leg, 10, 10, paint);
    
    super.onDraw(canvas);
  }
}

七、常见陷阱与解决方案

在Android绘图过程中，开发者常会遇到一些陷阱，以下是几个常见问题及解决方案：

结语

Android的2D图像绘制功能强大而灵活，从简单的图形绘制到复杂的图像处理，都能找到合适的解决方案。记住，掌握Paint的精细控制是实现专业视觉效果的关键。

通过不断练习和探索，你将能够在Android应用的画布上创造出令人惊叹的视觉作品，让你的应用在众多竞争对手中脱颖而出。

现在，拿起你的"画笔"，开始创造吧！