Android Canvas 开发详解

Android Canvas 是 Android 系统中一个非常重要的绘图工具，它允许我们在 Android 应用程序中创建自定义的 2D 和 3D 绘图。本文将介绍 Android Canvas 的各种用法，包括平移缩放、画圆写字、抛物效果、.rotate、绘制 Z 轴、地球代码、绘制 XYZ 轴、画圆 Path 写字等方面。

一、android Canvas 平移缩放

平移和缩放是 Android 中画图的基本操作，下面我们来看看如何使用 Android Canvas 进行平移和缩放操作。

1、平移操作

我们可以使用 canvas.translate(dx, dy) 方法来对画布进行平移操作。

canvas.drawText("Hello, world!", 50, 50, mPaint); // 绘制文本
canvas.translate(100, 100); // 平移画布
canvas.drawText("Hello, world!", 50, 50, mPaint); // 绘制文本

上面的代码将会在画布上分别绘制两行文本，第一行文本在 (50, 50) 处绘制，第二行文本会在画布上向右平移 100，向下平移 100 后绘制（也就是在 (150, 150) 处绘制）。

2、缩放操作

另外，我们可以使用 canvas.scale(sx, sy) 来对画布进行缩放操作。

canvas.drawText("Hello, world!", 50, 50, mPaint); // 绘制文本
canvas.scale(2f, 2f); // 缩放画布
canvas.drawText("Hello, world!", 50, 50, mPaint); // 绘制文本

上面的代码将会绘制两行文本，第一行文本在 (50, 50) 处绘制，第二行文本会在画布上将字体放大 2 倍后绘制。

二、android Canvas 画圆写字

Android Canvas 可以非常轻松地绘制一些 2D 图形，本小节介绍如何使用 Android Canvas 绘制圆形和绘制文字。

1、绘制圆形

使用 canvas.drawCircle(x, y, radius, paint) 方法来绘制一个圆形：

canvas.drawCircle(100, 100, 50, mPaint); // 绘制一个半径为 50 的圆形

上面的代码将在画布上绘制一个坐标为 (100, 100) 的圆形，半径为 50，使用当前画笔（mPaint）进行绘制。

2、绘制文字

使用 canvas.drawText(text, x, y, paint) 方法来绘制文字。

canvas.drawText("Hello, world!", 100, 100, mPaint); // 在坐标 (100, 100) 处绘制 "Hello, world!" 文字

上面的代码将在画布上绘制一行文字 “Hello, world!”，坐标为 (100, 100)，使用当前画笔（mPaint）进行绘制。

三、android Canvas 抛物效果

抛物线是计算机绘图中经常使用的一个曲线，可以模拟仿真很多物理场景，下面我们来看看如何使用 Android Canvas 实现抛物效果。

private int mRadius = 20; // 小球半径
private int mDeltaX = 5; // 每次水平移动的距离
private int mDeltaY = 5; // 每次垂直移动的距离
private int mScreenWidth; // 屏幕宽度
private int mScreenHeight; // 屏幕高度

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.WHITE);

    int x = getWidth() / 2;
    int y = getHeight() / 2;
    canvas.drawCircle(x, y, mRadius, mPaint);

    // 计算小球下一次的位置
    mDeltaY += 1;
    x += mDeltaX;
    y += mDeltaY;

    // 判断是否撞击到边界
    if (x = mScreenWidth - mRadius) {
        mDeltaX = -mDeltaX;
    }
    if (y = mScreenHeight - mRadius) {
        mDeltaY = -mDeltaY;
    }

    postInvalidateDelayed(10); // 刷新界面
}

上面代码实现了一个小球抛物的动画效果，启动该 View 后，小球会按照一定的速度移动并弹跳，直到撞到屏幕边界才会回弹。

四、android Canvas 的.rotate

Canvas 的 .rotate(float degrees, float px, float py) 方法可以对绘图进行旋转操作，其中 (px, py) 表示旋转的中心点。

canvas.drawRect(0, 0, 200, 200, mPaint); // 绘制一个矩形

canvas.translate(100, 100); // 将原点移动到 (100, 100)
canvas.rotate(45); // 以 (100, 100) 为中心点进行旋转
canvas.drawRect(0, 0, 200, 200, mPaint); // 绘制一个旋转后的矩形

上面的代码将会绘制两个矩形，第一个矩形将被绘制在画布的左上角位置，红色边框；第二个矩形在进行了画布平移操作后，进行了一次 45 度的旋转，并且以 (100, 100) 为中心点进行旋转操作。

五、android Canvas 缩放

Android Canvas 可以非常轻松地进行缩放操作，只需要对主函数进行的画布平移和旋转操作进行函数调用即可。

canvas.drawRect(0, 0, 200, 200, mPaint); // 绘制一个矩形

canvas.scale(0.5f, 0.5f); // 将画布缩小为原来的一半
canvas.drawRect(0, 0, 200, 200, mPaint); // 绘制一个缩小后的矩形

上面的代码将绘制两个矩形，第一个矩形位于画布的左上角，红色边框；第二个矩形进行了画布的缩放操作，缩小了一半。

六、android Canvas 绘制 Z 轴

在 3D 应用程序开发中，我们经常需要在屏幕上绘制一些 3D 图像，本小节将介绍如何使用 Android Canvas 绘制出 3D 空间中的 Z 轴。

Path path = new Path();
path.moveTo(0, 0);
path.lineTo(0, 200);
path.lineTo(20, 180);
path.lineTo(0, 200);
path.lineTo(-20, 180);

canvas.drawPath(path, mPaint);

上面的代码使用 canvas.drawPath() 方法来绘制 Z 轴，具体做法是先绘制垂直线段，然后绘制两条斜线段。

七、android Canvas 地球代码

下面提供一个 Android Canvas 绘制地球的实例代码，该代码使用 Bitmap、Matrix、Canvas 和 Paint 等多种 Android 绘图工具来完成，您可以将其复制到 Android 应用程序中进行测试。

public class EarthView extends View {
    private Bitmap mBgBitmap;
    private Bitmap mEarthBitmap;
    private Matrix mMatrix;
    private Paint mPaint;

    public EarthView(Context context) {
        super(context);
        init();
    }

    public EarthView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mBgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg_stars);
        mEarthBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_earth);
        mMatrix = new Matrix();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制背景
        canvas.drawBitmap(mBgBitmap, null, new RectF(0, 0, getWidth(), getHeight()), mPaint);

        // 计算旋转角度
        float degrees = (float) ((System.currentTimeMillis() / 10) % 360);
        mMatrix.setRotate(degrees, mEarthBitmap.getWidth() / 2f, mEarthBitmap.getHeight() / 2f);

        // 绘制地球
        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);
        canvas.drawBitmap(mEarthBitmap, mMatrix, mPaint);
        canvas.restore();

        invalidate(); // 刷新画面
    }
}

上面的代码实现了一个类似于地球自转效果，并在背景上绘制了一张星空背景。

八、android Canvas 绘制 XYZ 轴

下面的代码会绘制出一个全方位的 XYZ 坐标系，使用了 Line 和 Path 两种对象来绘制。该做法较为简单，使用者可以根据实际需求进行更改。

canvas.drawLine(0, 0, 500, 0, paint); // X 轴
canvas.drawLine(0, 0, 0, 500, paint); // Y 轴
canvas.save();
canvas.translate(0, 500);
canvas.rotate(-90);
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(20, 0);
path.lineTo(10, -20);
path.close();
canvas.drawPath(path, paint); // Z 轴
canvas.restore();

九、android Canvas 画圆 Path 写字

有时候我们也可以使用 Path 来帮助我们实现更加复杂的图案和文字等，下面的代码将绘制一个大圆饼图，并在圆心区域显示一段描述文字。

Path path = new Path();
path.addArc(new RectF(100, 100, 400, 400), -180, 180);
path.lineTo(250, 250);
path.close();

canvas.drawPath(path, paint); // 绘制扇形
canvas.drawTextOnPath("This is a message to show on the circle", path, 0, 0, mPaint); // 圆形中心文字

上面的代码绘制了一个具有描述文字的大圆饼图，并且使用了 Path 对象来绘制扇形。

本文介绍了 Android Canvas 的各种使用方法，包括平移缩放、画圆写字、抛物效果、.rotate、绘制 Z 轴、地球代码、绘制 XYZ 轴、画圆 Path 写字等方面，对于 Android 应用程序开发者而言，熟练掌握 Android Canvas 的使用是非常重要的。