一.Canvas的常用操作速查表

二.Canvas基本操作詳解

1.繪制圖片

繪制有兩種方法，drawPicture(矢量圖) 和 drawBitmap(位圖)。

(1)drawPicture

使用Picture前請關閉硬件加速，以免引起不必要的問題！
在AndroidMenifest文件中application節點下添上 android:hardwareAccelerated=”false”以關閉整個應用的硬件加速。 更多請參考這里：Android的硬件加速及可能導致的問題

PS：你可以把Picture看作是一個錄制Canvas操作的錄像機。

Picture的相關方法：

 public CustomView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        // 調用錄制
        recording();
    }

 private void recording()
    {
        // 開始錄制
        Canvas canvas = mPicture.beginRecording(500, 500);
        // 創建一個畫筆
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        // 在Canvas中具體操作
        canvas.translate(250,250);
        // 繪制一個圓
        canvas.drawCircle(0,0,100,paint);
        //結束錄制
        mPicture.endRecording();
    }

   @Override
    protected void onDraw(Canvas canvas)
    {
        mPicture.draw(canvas);
     }

a.jpg

將Picture中的內容繪制出來可以有以下幾種方法：

1.使用Picture提供的draw方法繪制:

 @Override
    protected void onDraw(Canvas canvas)
    {
        mPicture.draw(canvas);
     }

a.jpg

PS：這種方法在比較低版本的系統上繪制后可能會影響Canvas狀態，所以這種方法一般不會使用。

2.使用Canvas提供的drawPicture方法繪制

drawPicture有三種方法：

public void drawPicture (Picture picture)

public void drawPicture (Picture picture, Rect dst)

public void drawPicture (Picture picture, RectF dst)

和使用Picture的draw方法不同，Canvas的drawPicture不會影響Canvas狀態。

 @Override
    protected void onDraw(Canvas canvas)
    {
          canvas.drawPicture(mPicture,new RectF(0,0,mPicture.getWidth(),200));
     }

b.jpg

3.將Picture包裝成為PictureDrawable，使用PictureDrawable的draw方法繪制。

   // 包裝成為Drawable
   PictureDrawable drawable = new PictureDrawable(mPicture);
   // 設置繪制區域 -- 注意此處所繪制的實際內容不會縮放    
   drawable.setBounds(0,0,250,mPicture.getHeight());
   // 繪制
   drawable.draw(canvas);

c.jpg

(2)drawBitmap

獲取Bitmap方式:

通過BitmapFactory從不同位置獲取Bitmap:
資源文件(drawable/mipmap/ic_launcher):

Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(),R.mipmap.ic_launcher);

資源文件(assets):

Bitmap bitmap=null;
try {
    InputStream is = mContext.getAssets().open("bitmap.png");
    bitmap = BitmapFactory.decodeStream(is);
    is.close();
} catch (IOException e) {
    e.printStackTrace();
}

內存卡文件:

Bitmap bitmap = BitmapFactory.decodeFile("/sdcard/bitmap.png");

網絡文件:

Bitmap bitmap = BitmapFactory.decodeStream(is);
is.close();

drawBitmap的常用方法：

// 第一種
public void drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint)

// 第二種
public void drawBitmap (Bitmap bitmap, float left, float top, Paint paint)

// 第三種
public void drawBitmap (Bitmap bitmap, Rect src, Rect dst, Paint paint)
public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint)

第一種方法中后兩個參數(matrix, paint)是在繪制的時候對圖片進行一些改變，如果只是需要將圖片內容繪制出來只需要如下操作就可以了：
圖片左上角位置默認為坐標原點。

canvas.drawBitmap(bitmap,new Matrix(),new Paint());
    

d.jpg

第二種方法就是在繪制時指定了圖片左上角的坐標(距離坐標原點的距離)：

注意：此處指定的是與坐標原點的距離

canvas.drawBitmap(bitmap,300,300,new Paint());

e.jpg

第三種方法，上面多了兩個矩形區域(src,dst),這兩個矩形選區是干什么用的？

        // 將畫布坐標系移動到畫布中央
        canvas.translate(width/2,height/2);
        // 指定圖片繪制區域(左上角的四分之一)
        Rect src = new Rect(0,0,bitmap.getWidth()/2,bitmap.getHeight()/2);
        // 指定圖片在屏幕上顯示的區域
        Rect dst = new Rect(0,0,200,200);
        // 繪制圖片
        canvas.drawBitmap(bitmap,src,dst,null);

f.jpg

2.繪制文字

// 第一類
public void drawText (String text, float x, float y, Paint paint)
public void drawText (String text, int start, int end, float x, float y, Paint paint)
public void drawText (CharSequence text, int start, int end, float x, float y, Paint paint)
public void drawText (char[] text, int index, int count, float x, float y, Paint paint)

// 第二類
public void drawPosText (String text, float[] pos, Paint paint)
public void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)

// 第三類
public void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)
public void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

繪制文字部分大致可以分為三類：

第一類只能指定文本基線位置
第二類可以分別指定每個文字的位置。
第三類是指定一個路徑，根據路徑繪制文字。

Paint文本相關常用方法表

為了繪制文本，我們先創建一個文本畫筆：

 private void initPaint()
 {
  // 創建畫筆
  Paint textPaint = new Paint();   
  // 設置顏色
  textPaint.setColor(Color.BLACK);     
  // 設置樣式
   textPaint.setStyle(Paint.Style.FILL);  
   textPaint.setTextSize(50);             

 }

第一類(drawText)

 // 文本(要繪制的內容)
 String str = "TEXTTEXT";
 // 參數分別為 (文本 基線x 基線y 畫筆)
 canvas.drawText(str,230,600,textPaint);

g.jpg

  //參數分別為 (字符串 開始截取位置 結束截取位置 基線x 基線y 畫筆)
  canvas.drawText(str,1,3,300,600,textPaint);

h.jpg

第二類(drawPosText)

可以給每一個字符指定位置(不推薦使用)

   String str = "TEXTTEXT";
   canvas.drawPosText(str,new float[]{
                100,100,    // 第一個字符位置
                150,200,    // 第二個字符位置
                200,300,    // ...
                250,400,
                300,500,
                350,600,
                400,700,
                450,800
        },textPaint);

i.jpg

參考文章

@GcsSloop:安卓自定義View進階-Canvas之圖片文字

源碼下載

源碼下載：https://github.com/zeke123/MyView