Canvas中的繪圖師講解與實戰——Android高階UI

猛猛的小盆友發表於2019-05-14

目錄
一、前言
二、如何畫好一幅圖
三、Canvas的圖形API
四、畫布儲存狀態API
五、實戰——時鐘與指標
六、寫在最後

一、前言

在上一篇文章中，我們只是分享了裁剪型別的API，今天接著分享繪圖部分API。話不多說，老規矩，先上實戰圖。

時鐘與指標

二、如何畫好一幅圖

我們在上一篇文章中講到了，繪製一幅圖的工具和座標系。我們繼續思考，在現實中使用一張紙繪製時，我們會對這張紙進行旋轉一定角度來方便自己繪製，有時為了繪製一些細節，會進行放大，有時也會進行移動這張紙。而這些操作，在canvas中也有各自對應的操作。

1、rotate 旋轉

（1）第一個rotate函式

public void rotate(float degrees)
複製程式碼

描述： 以原點為旋轉中心，旋轉畫布 degrees 角度。正數為順時針旋轉，負數為逆時針旋轉。

舉個例子

mPaint.setColor(Color.RED);
canvas.drawRect(mRectF, mPaint);

canvas.rotate(30);

mPaint.setColor(Color.BLUE);
canvas.drawRect(mRectF, mPaint);
複製程式碼

效果圖

紅色為原圖，藍色為旋轉後繪製的圖。

（2）第二個rotate函式

public final void rotate(float degrees, float px, float py)
複製程式碼

描述： 以 (px, py) 為旋轉中心，將畫布旋轉 degrees 角度。正數為順時針旋轉，負數為逆時針旋轉。

舉個例子

mPaint.setColor(Color.RED);
canvas.drawRect(mRectF, mPaint);

canvas.rotate(30, 200, 300);

mPaint.setColor(Color.BLUE);
canvas.drawRect(mRectF, mPaint);
複製程式碼

效果圖

紅色為原圖，藍色為旋轉後繪製的圖。

2、scale 縮放

（1）第一個scale函式

public void scale(float sx, float sy)
複製程式碼

描述： 以原點進行縮放畫布，x軸縮放 sx 倍，y軸縮放 sy 倍。

舉個例子

mPaint.setColor(Color.RED);
canvas.drawRect(mRectF, mPaint);

canvas.scale(0.5f,0.33f);

mPaint.setColor(Color.BLUE);
canvas.drawRect(mRectF, mPaint);
複製程式碼

效果圖

紅色為原圖，藍色為縮放後繪製的圖。

（2）第二個scale函式

public final void scale(float sx, float sy, float px, float py)
複製程式碼

描述： 以 (px, py) 進行縮放畫布，x軸縮放 sx 倍，y軸縮放 sy 倍。

舉個例子

mPaint.setColor(Color.RED);
canvas.drawRect(mRectF, mPaint);

canvas.scale(0.5f, 0.33f, 200, 300);

mPaint.setColor(Color.BLUE);
canvas.drawRect(mRectF, mPaint);
複製程式碼

效果圖

紅色為原圖，藍色為縮放後繪製的圖。

3、skew 斜切

public void skew(float sx, float sy)
複製程式碼

描述： 進行 x 軸和 y軸的拉伸。

拉伸規則 當一個點為（x, y）時，進行斜切變換(sx, sy)，得到的結果（rx, ry）

rx = x + sx * y;
ry = y + sy * x;

舉個例子

mPaint.setColor(Color.RED);
canvas.drawRect(mRectF, mPaint);

canvas.skew(1, 0.5f);

mPaint.setColor(Color.BLUE);
canvas.drawRect(mRectF, mPaint);
複製程式碼

效果圖

紅色為原圖，藍色為斜切後繪製的圖。

可以使用上面的 “拉伸規則” ，將紅色框的點帶入便可得到藍色框對應的點。

4、translate 偏移

public void translate(float dx, float dy)
複製程式碼

描述： 將畫布水平移動 dx 個畫素，垂直移動 dy 個畫素。

舉個例子

mPaint.setColor(Color.RED);
canvas.drawRect(mRectF, mPaint);

canvas.translate(100, 200);

mPaint.setColor(Color.BLUE);
canvas.drawRect(mRectF, mPaint);
複製程式碼

效果圖

紅色為原圖，藍色為移動後繪製的圖。

5、setMatrix 矩陣

public void setMatrix(@Nullable Matrix matrix)
複製程式碼

描述： 將矩陣作用於畫布。

舉個例子

mPaint.setColor(Color.RED);
canvas.drawRect(mRectF, mPaint);

mMatrix.preTranslate(getWidth() / 2, getHeight() / 2);
mMatrix.preScale(2, 1);

canvas.setMatrix(mMatrix);
mPaint.setColor(Color.BLUE);
canvas.drawRect(mRectF, mPaint);
複製程式碼

效果圖

紅色為原圖，藍色為使用矩陣後繪製的圖。

值得一提

矩陣的內容比較多，這裡只是略帶一提，如果想見識見識他的真正威力，可以看看在小盆友另一篇博文放蕩不羈SVG講解與實戰實戰中的使用，具體程式碼請進傳送門。

三、Canvas的圖形API

1、drawCircle 畫圓

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
複製程式碼

描述： 在座標為 (cx,cy) 的地方繪製半徑為 radius 的圓。

舉個例子

// 在 原點處 畫半徑為100的圓
canvas.drawCircle(0, 0, 100, mPaint);
複製程式碼

效果圖

2、drawOval 畫橢圓

（1）第一個drawOval函式

public void drawOval(@NonNull RectF oval, @NonNull Paint paint)
複製程式碼

描述： 在 oval 的矩形範圍內，繪製橢圓。

舉個例子

RectF mRectF = new RectF();
mRectF.left = -150;
mRectF.top = -150;
mRectF.right = 400;
mRectF.bottom = 150;

canvas.drawOval(mRectF, mPaint);
複製程式碼

效果圖

橘色部分則為我們繪製的橢圓，而紫色框（為了方便觀看而繪製出來）則是我們的 oval 的範圍。

（2）第二個drawOval函式

public void drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)
複製程式碼

描述： 在 左上(left,top) 和右下(right,bottom) 形成的矩形範圍內，繪製橢圓。

值得注意的是，這個方法只能在 API21 以上的版本才能使用，所以建議使用第一個函式。

舉個例子

canvas.drawOval(-150, -150, 400, 150, mPaint);
複製程式碼

效果圖

橘色部分則為我們繪製的橢圓，而紫色框（為了方便觀看而繪製出來）則是我們的 oval 的範圍。

兩個函式效果完全一樣，只是前一個函式將兩個座標點封裝在 Rect 中，而後一函式展示在函式引數中。

3、drawLine 畫線

（1）drawLine函式

public void drawLine(float startX, float startY, float stopX, float stopY,
            @NonNull Paint paint)         
複製程式碼

描述： 在座標 (startX, startY) 和 (stopX, stopY) 中繪製一條直線。

舉個例子

canvas.drawLine(-200, -200,0, 0, mPaint);
複製程式碼

效果圖

（2）第一個drawLines函式

public void drawLines(@Size(multiple = 4) @NonNull float[] pts, @NonNull Paint paint)
複製程式碼

描述： pts陣列中每四個數構成一條直線，每四個數中前兩個為起始座標，後兩個為終止座標。如果不夠四個數，則這一組不進行繪製。

舉個例子

private float[] pts = new float[]{
            0, -400, 200, -400, // 構成上面的線
            -300, 0, -300, 300, // 構成左邊的線
            0, 400, 300, 400    // 構成右邊的線
    };

canvas.drawLines(pts, mPaint);
複製程式碼

效果圖

（3）第二個drawLines函式（帶偏移）

public void drawLines(@Size(multiple = 4) @NonNull float[] pts, int offset, int count,
            @NonNull Paint paint) 
複製程式碼

描述： 該方法比上一個方法多加兩個引數，即偏移量和數量。偏移量offset為一時，則從pts的下標為1的地方開始進行讀數，count則決定了多少個數。

舉個例子

private float[] pts = new float[]{
            0, -400, 200, -400, 
            -300, 0, -300, 300, 
            0, 400, 300, 400    
    };

canvas.drawLines(pts, 2, 8, mPaint);
複製程式碼

效果圖

pts陣列中，從下標為2的數字開始，每四個數構成一條線，直到下標為 10 (由8+2得來) 的數為止。第一條線為上面的線，第二條線為下面的線。

4、drawArc 畫弧

（1）第一個drawArc函式

public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
            @NonNull Paint paint)
複製程式碼

描述： 在 oval矩形範圍內，繪製從startAngle角度到 sweepAngle角度的圓弧。

引數說明： 1）oval：圓弧所繪的矩形範圍區域。 2）startAngle：起始角度。0度時，指向為座標系中的x軸正半軸。 3）sweepAngle：基於 startAngle 角度，掃過的角度範圍，正數則按順時針方向，負數則按逆時針方向。 4）useCenter：弧的兩端是否要連線中心點。true連線中心點，false不連線中心點。 5）paint：畫筆。

舉個例子

RectF mRectF = new RectF();
mRectF.left = -150;
mRectF.top = -150;
mRectF.right = 400;
mRectF.bottom = 150;

canvas.drawArc(mRectF, 0, 120, true, mPaint);
複製程式碼

效果圖

橘色部分則為弧線部分，紫色則為矩形範圍（為了方便檢視才繪出）。

（2）第二個drawArc函式

public void drawArc(float left, float top, float right, float bottom, float startAngle,
            float sweepAngle, boolean useCenter, @NonNull Paint paint)
複製程式碼

描述： 該方法和上一方法功能完全一樣，只是用四個 float 表示矩形的端點。

舉個例子

canvas.drawArc(-150, -150, 400, 150, 0, 120, false, mPaint);
複製程式碼

效果圖

橘色為圓弧，紫色為矩形範圍

5、drawPoint 畫點

（1）drawPoint函式

public void drawPoint(float x, float y, @NonNull Paint paint)
複製程式碼

描述： 在座標為 (x,y) 處繪製點

舉個例子

mPaint.setColor(mColor1);
mPaint.setStrokeWidth(dpToPx(5));
canvas.drawPoint(100, 100, mPaint);
複製程式碼

效果圖

（2）第一個drawPoints函式

public void drawPoints(@Size(multiple = 2) @NonNull float[] pts, @NonNull Paint paint)
複製程式碼

描述： pts陣列中每兩個數構成一個座標(前者為x，後者為y)，並在該座標處點。

舉個例子

private float[] pts = new float[]{
        0, -400,
        200, -400,
        -300, 0
};

mPaint.setColor(mColor2);
mPaint.setStrokeWidth(dpToPx(5));
canvas.drawPoints(pts, mPaint);
複製程式碼

效果圖

（3）第二個drawPoints函式（帶偏移）

public void drawPoints(@Size(multiple = 2) float[] pts, int offset, int count,
            @NonNull Paint paint)
複製程式碼

描述： 這個方法和上面的方法大致相同，唯一區別在於從下標為offset開始讀取座標，讀取長度個數為count。

舉個例子

private float[] pts = new float[]{
        0, -400,
        200, -400,
        -300, 0
};

mPaint.setColor(mColor2);
mPaint.setStrokeWidth(dpToPx(5));
canvas.drawPoints(pts, 1, pts.length - 1, mPaint);
複製程式碼

效果圖

6、drawRect 畫矩形

（1）drawRect函式

public void drawRect(@NonNull RectF rect, @NonNull Paint paint)
public void drawRect(@NonNull Rect r, @NonNull Paint paint)
複製程式碼

描述： 在 rect 的範圍內繪製矩形，兩個方法的唯一區別在於第一個引數型別分別為 RectF 和 Rect。

RectF 和 Rect 的區別：

精度不同：RectF 四個點為浮點數，Rect 四個點為整型
所包含的方法不完全相同。

舉個例子

RectF mRectF = new RectF();
mRectF.left = -150;
mRectF.top = -150;
mRectF.right = 400;
mRectF.bottom = 150;

canvas.drawRect(mRectF, mPaint);
複製程式碼

效果圖

（2）drawRect函式

public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) 
複製程式碼

描述： 在 (left,top) 和 (right,bottom) 形成的矩形範圍內繪製矩形。

舉個例子

canvas.drawRect(-150, -150, 400, 150, mPaint);
複製程式碼

效果圖

7、drawRoundRect 畫圓角矩形

（1）第一個drawRoundRect函式

public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
複製程式碼

描述： 在 rect 範圍內，繪製圓角矩形。

引數說明： 1）rx：水平方向的半徑，下圖中的橘色部分 2）ry：豎直方向的半徑，下圖中的紅色部分

舉個例子

canvas.drawRoundRect(mRectF, 80, 100, mPaint);
複製程式碼

效果圖

（2）第二個drawRoundRect函式

public void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,
            @NonNull Paint paint)
複製程式碼

描述： 與上述的方法功能完全相同，只是繪製範圍由四個浮點數進行確定。

舉個例子

canvas.drawRoundRect(-150, -150, 400, 150, 100, 50, mPaint);
複製程式碼

效果圖

8、drawColor 給畫布點顏色

（1）第一個drawColor函式

public void drawColor(@ColorInt int color)
複製程式碼

描述： 給畫布繪製color顏色值。

舉個例子

canvas.drawColor(Color.parseColor("#ffffff"));
複製程式碼

比較簡單就不上效果圖了。

（2）第二個drawColor函式

public void drawColor(@ColorInt int color, @NonNull PorterDuff.Mode mode) 
複製程式碼

描述： 給畫布繪製顏色，會與之前的圖形有 mode 的作用。

舉個例子

Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.logo);

Matrix mMatrix = new Matrix();
mMatrix.setScale(0.25f, 0.25f);

canvas.drawBitmap(mBitmap, mMatrix, mPaint);
canvas.drawColor(Color.parseColor("#88880000"),
                PorterDuff.Mode.DST_OVER);
複製程式碼

效果圖

值得一提

我們所介紹的第一個 drawColor(@ColorInt int color) 函式，其實最後使用了 PorterDuff.Mode.SRC_OVER 模式。

至於 PorterDuff.Mode 的具體使用，請看小盆友的另一篇博文：影像操縱大師Xfermode講解與實戰

9、drawRGB 給畫布點顏色

（1）drawRGB函式

public void drawRGB(int r, int g, int b)
複製程式碼

描述： 給畫布繪製顏色，按照紅(r)，綠(g)，藍(b) 三原色進行組合

舉個例子

canvas.drawARGB(255, 217, 142);
複製程式碼

（2）drawARGB函式

public void drawARGB(int a, int r, int g, int b)
複製程式碼

描述： 給畫布繪製顏色，按照透明度(a)，紅(r)，綠(g)，藍(b) 三原色進行組合

舉個例子

canvas.drawARGB(200, 255, 217, 142);
複製程式碼

10、drawPath 繪製路徑

public void drawPath(@NonNull Path path, @NonNull Paint paint)
複製程式碼

描述： 將路徑path 繪製在畫布上。

舉個例子 這個方法使用的地方非常之多，例如我們繪製一個 “心” 形

mPaint.setColor(mColor1);
mPaint.setStyle(Paint.Style.FILL);
// 路徑的構建，移步github
canvas.drawPath(mPath, mPaint);
複製程式碼

效果圖

值得一提

心形路徑的構建使用了 貝塞爾曲線，對 貝塞爾曲線 有興趣的童鞋，可以移步小盆友的另一篇博文：自帶美感的貝塞爾曲線原理與實戰

四、畫布儲存狀態API

1、狀態值

在進行 API 講解前，我們需要先說明狀態值，他控制著我們要儲存什麼資訊。

MATRIX_SAVE_FLAG：儲存圖層的 Matrix矩陣資訊
CLIP_SAVE_FLAG：儲存裁剪資訊
HAS_ALPHA_LAYER_SAVE_FLAG：儲存該圖層的透明度
FULL_COLOR_LAYER_SAVE_FLAG：完全保留該圖層顏色
CLIP_TO_LAYER_SAVE_FLAG：建立圖層時，會把canvas（所有圖層）裁剪到引數指定的範圍，如果省略這個flag將導致圖層開銷巨大，效能不好。
ALL_SAVE_FLAG：儲存所有資訊

敲黑板了！！！ 雖然羅列了這麼多，但1-5的FLAG已經全部被遺棄，只剩 ALL_SAVE_FLAG 這個FLAG。

2、save

public int save()
複製程式碼

描述： 這個函式用於儲存圖層狀態，儲存此刻的 canvas 畫布的所有狀態（例如：原點位置，旋轉角度，一切我們對canvas的操作都被儲存）。

3、saveLayer

// saveFlags 只能是 Canvas.ALL_SAVE_FLAG
public int saveLayer(float left, float top, float right, float bottom, @Nullable Paint paint,
            @Saveflags int saveFlags)
      
// saveFlags 只能是 Canvas.ALL_SAVE_FLAG      
public int saveLayer(@Nullable RectF bounds, @Nullable Paint paint, @Saveflags int saveFlags)

// API21及以上才可使用
public int saveLayer(float left, float top, float right, float bottom, @Nullable Paint paint)
// API21及以上才可使用
public int saveLayer(@Nullable RectF bounds, @Nullable Paint paint) 
複製程式碼

描述： 該方法與 save 一樣會儲存進狀態棧，然後通過 restore 或 restoreToCount 進行恢復。不同的是該方法會建立一個新的圖層。

這裡建立的圖層，我們可以類比為PS中的圖層概念，存在意義是不會影響到其他圖層的資料。例如我們在XFermode的博文中的刮刮卡的實戰中，就有用到這一概念，否則我們需要看到的圖片也會被一同清除。

4、saveLayerAlpha

// saveFlags 只能是 Canvas.ALL_SAVE_FLAG
public int saveLayerAlpha(@Nullable RectF bounds, int alpha, @Saveflags int saveFlags)
      
// saveFlags 只能是 Canvas.ALL_SAVE_FLAG  
public int saveLayerAlpha(float left, float top, float right, float bottom, int alpha,
            @Saveflags int saveFlags)

// API21及以上才可使用
public int saveLayerAlpha(@Nullable RectF bounds, int alpha) 
// API21及以上才可使用
public int saveLayerAlpha(float left, float top, float right, float bottom, int alpha)
複製程式碼

描述： 與 saveLayer 相同的是會存進狀態棧和建立一個圖層，然後通過 restore 或 restoreToCount 進行恢復。不同的是建立的圖層是具有透明度的，而透明度由 alpha 決定，範圍為 0-255。

5、恢復

// 恢復
public void restore()

// 恢復至指定的 狀態棧層數
public void restoreToCount(int saveCount)
複製程式碼

描述： 這兩個方法，是將上面三種方法儲存的函式進行恢復。而區別在於 restore 每次從狀態棧中恢復拿出一個狀態恢復，而 restoreToCount 是 恢復到指定的狀態棧層數（該層也會被出棧），這個 saveCount 引數在上面三種型別的方法呼叫後都會進行返回各自對應的層數。

6、小結

先舉個例子彙總一下這幾個方法：

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

    log(canvas);

    int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(),
            mPaint, Canvas.ALL_SAVE_FLAG);
    log(canvas);

    canvas.save();
    log(canvas);

    canvas.saveLayer(0, 0, getWidth(), getHeight(),
            mPaint, Canvas.ALL_SAVE_FLAG);
    log(canvas);

    canvas.saveLayerAlpha(0, 0, getWidth(), getHeight(),
            50, Canvas.ALL_SAVE_FLAG);
    log(canvas);

    canvas.translate(getWidth() / 2, getHeight() / 2);
    canvas.drawRect(mRect, mPaint);

    canvas.restore();
    log(canvas);

    canvas.restoreToCount(layer);
    log(canvas);

}

private void log(Canvas canvas) {
    Log.i("canvas", "canvas count:" + canvas.getSaveCount());
}
複製程式碼

輸出結果

我們從程式碼和輸出結果可以得出以下幾個結論：

初始狀態下，狀態棧中便有一個預設的狀態；
在不建立圖層的情況下，所有操作都是作用於預設圖層；
使用 restoreToCount(x) 進行恢復，會連同x層出棧；

一圖勝千言：

將上面的程式碼轉換成圖，就如下效果

五、實戰——時鐘與指標

1、效果圖

github地址：傳送門

2、程式設計思路

我們先拆解下這幅圖，其實構成的為三部分：

一個圓圈
刻度
指標

我們逐一解決：

（1）一個圓圈

這個我們信手拈來，canvas就有繪製圓的 API，我們在第三節的一小點就講到了

canvas.drawCircle(0, 0, width / 2, mPaint);
複製程式碼

（2）刻度

對於刻度，其實有兩種畫法：

第一種：是聽起來比較 “高大上” ，使用三角函式算出每個刻度的起始座標和終止座標，然後進行繪製。
第二種：較為機靈，使用我們在 第二小節的第一點 介紹的 rotate 進行一點點的旋轉畫布，然後繪製線。

（3）指標

我們需要先構建下圖中藍色的路徑作為指標，由一段圓弧和兩條線構成。

構建思路：

第一步：在紅色的矩形內，繪製圓弧（使用了第三小節第四點）第二步：從圓弧的左點繪製線到圖中紅色頂點第三部：從紅色頂點繪製線到圓弧右點，最後關閉路徑path

具體程式碼如下：

mPointerPath.moveTo(mPointerRadius, 0);
// 第一步
mPointerPath.addArc(mPointerRectF, 0, 180);
// 第二步
mPointerPath.lineTo(0, -width / 4);
// 第三步
mPointerPath.lineTo(mPointerRadius, 0);
mPointerPath.close();
複製程式碼

（4）開啟旋轉

我們只需要通過屬性動畫，讓指標動起來即可。而指標的旋轉只需要通過讓畫布旋轉即可，也就是用到第二小節第一點的rotate。

canvas.save();
canvas.rotate(mCurAngle);

... 省略建立指標

mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mPointerColor);
canvas.drawPath(mPointerPath, mPaint);
canvas.restore();
複製程式碼

時鐘與指標 完整程式碼：傳送門

六、寫在最後

這次介紹的是canvas最為基礎的API操作，但其實越為基礎的東西，越容易被忽略也越是進階中最需要的部分。這次寫的時間耗時較久，主要是API較多，寫demo和截圖比較頻繁。

如果你覺得文章對你有所幫助，請給我一個贊並關注我吧。如果發現有那些欠妥的地方，請留言區與我討論，我們共同進步。

高階UI系列的Github地址：請進入傳送門，如果喜歡的話給我一個star吧?

歡迎加我微信，我們可以進行更多更有趣的交流

Canvas中的剪刀手講解與實戰——Android高階UI
2019-04-27
CanvasAndroidUI
影象操縱大師Xfermode講解與實戰——Android高階UI
2019-02-19
AndroidUI
影像操縱大師Xfermode講解與實戰——Android高階UI
2019-02-19
AndroidUI
PathMeasure的API講解與實戰——Android高階UI
2019-01-05
APIAndroidUI
放蕩不羈SVG講解與實戰——Android高階UI
2019-04-07
SVGAndroidUI
靈魂畫師，Android繪製流程——Android高階UI
2021-10-26
AndroidUI
讓控制元件如此絲滑Scroller和VelocityTracker的API講解與實戰——Android高階UI
2019-03-06
控制元件APIAndroidUI
Android 繪圖——Canvas
2017-12-26
Android繪圖Canvas
Android 中 Canvas 繪圖之 Shader 使用圖文詳解
2016-07-22
AndroidCanvas繪圖
Android中Canvas繪圖之Shader使用圖文詳解
2016-01-15
AndroidCanvas繪圖
帶有活力的屬性動畫原始碼分析與實戰——Android高階UI
2019-02-05
動畫原始碼AndroidUI
iOS開發-UI高階 Quartz 2D繪圖
2016-08-09
iOSUIquartz繪圖
Android 中 Canvas 繪圖之 PorterDuffXfermode 使用及工作原理詳解
2016-07-22
AndroidCanvas繪圖
Android中Canvas繪圖之PorterDuffXfermode使用及工作原理詳解
2016-01-11
AndroidCanvas繪圖
Nmap在實戰中的高階用法（詳解）
2020-08-18
Android 高階UI9 Canvas save和restore例項解析
2021-09-28
AndroidUICanvasREST
android位運算講解與實戰
2019-01-05
Android
Android中Canvas繪圖基礎詳解（附原始碼下載）
2015-11-11
AndroidCanvas繪圖原始碼
Android中Canvas繪圖之MaskFilter圖文詳解（附原始碼下載）
2015-11-17
AndroidCanvas繪圖Filter原始碼
【javascript】Canvas繪圖詳解
2017-12-29
JavaScriptCanvas繪圖
HTML5 Canvas（實戰：繪製餅圖2 Tooltip）
2018-05-21
HTMLCanvas
Android UI 繪圖基礎
2012-07-14
AndroidUI繪圖
Android高階進階之路【一】Android中View繪製流程淺析
2021-11-03
AndroidView
探究 canvas 繪圖中撤銷（undo）功能的實現方式
2018-04-29
Canvas繪圖
《HTML5Canvas遊戲開發實戰》——第3章　Canvas高階功能
2017-08-01
HTMLCanvas遊戲開發
現代 CSS 高階技巧，像 Canvas 一樣自由繪圖構建樣式！
2022-12-12
CSSCanvas繪圖
Android高階UI系列（2）-DecorView
2017-05-11
AndroidUIView
前端動效講解與實戰
2022-09-26
前端
Prometheus PromQL 講解與實戰操作
2024-08-24
PrometheusMQ
canvas在H5中的繪圖總結
2019-02-26
CanvasH5繪圖
高階 Android 工程師的進階之路
2018-07-13
Android工程師
高階圖形繪製軟體的原理猜想
2020-10-08
《HTML5遊戲程式設計核心技術與實戰》一第2章　Canvas繪圖
2017-05-02
HTML遊戲程式設計Canvas繪圖
canvas實現高階貝塞爾曲線
2017-12-29
Canvas
ElasticSearch實戰系列七: Logstash實戰使用-圖文講解
2020-08-17
Elasticsearch
Android高階之十三講之安全方案
2016-12-14
Android
canvas繪圖之鐘表
2019-02-23
Canvas繪圖
Canvas 繪製雷達圖
2019-05-28
Canvas

Canvas中的繪圖師講解與實戰——Android高階UI

一、前言

二、如何畫好一幅圖

1、rotate 旋轉

2、scale 縮放

3、skew 斜切

4、translate 偏移

5、setMatrix 矩陣

三、Canvas的圖形API

1、drawCircle 畫圓

2、drawOval 畫橢圓

3、drawLine 畫線

4、drawArc 畫弧

5、drawPoint 畫點

6、drawRect 畫矩形

7、drawRoundRect 畫圓角矩形

8、drawColor 給畫布點顏色

9、drawRGB 給畫布點顏色

10、drawPath 繪製路徑

四、畫布儲存狀態API

1、狀態值

2、save

3、saveLayer

4、saveLayerAlpha

5、恢復

6、小結

五、實戰——時鐘與指標

1、效果圖

2、程式設計思路

（1）一個圓圈

（2）刻度

（3）指標

（4）開啟旋轉

六、寫在最後

相關文章