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 的使用是非常重要的。