在上一篇文章Canvas之畫布操作中我們瞭解了畫布的一些基本操作方法，本次瞭解一些繪製圖片文字相關的內容。如果你對前幾篇文章講述的內容熟練掌握的話，那麼恭喜你，本篇結束之後，大部分的自定義View已經難不倒你了，當然了，這並不是終點，接下來還會有更加炫酷的技能。

一.Canvas的常用操作速查表

操作型別	相關API	備註
繪製顏色	drawColor, drawRGB, drawARGB	使用單一顏色填充整個畫布
繪製基本形狀	drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc	依次為 點、線、矩形、圓角矩形、橢圓、圓、圓弧
繪製圖片	drawBitmap, drawPicture	繪製點陣圖和圖片
繪製文字	drawText, drawPosText, drawTextOnPath	依次為 繪製文字、繪製文字時指定每個文字位置、根據路徑繪製文字
繪製路徑	drawPath	繪製路徑，繪製貝塞爾曲線時也需要用到該函式
頂點操作	drawVertices, drawBitmapMesh	通過對頂點操作可以使影象形變，drawVertices直接對畫布作用、 drawBitmapMesh只對繪製的Bitmap作用
畫布剪裁	clipPath, clipRect	設定畫布的顯示區域
畫布快照	save, restore, saveLayerXxx, restoreToCount, getSaveCount	依次為 儲存當前狀態、 回滾到上一次儲存的狀態、 儲存圖層狀態、 回滾到指定狀態、 獲取儲存次數
畫布變換	translate, scale, rotate, skew	依次為 位移、縮放、 旋轉、傾斜
Matrix(矩陣)	getMatrix, setMatrix, concat	實際上畫布的位移，縮放等操作的都是影象矩陣Matrix， 只不過Matrix比較難以理解和使用，故封裝了一些常用的方法。

二.Canvas基本操作詳解

1.繪製圖片

繪製有兩種方法，drawPicture(向量圖) 和 drawBitmap(點陣圖),接下來我們一一瞭解。

(1)drawPicture

使用Picture前請關閉硬體加速，以免引起不必要的問題！
使用Picture前請關閉硬體加速，以免引起不必要的問題！
使用Picture前請關閉硬體加速，以免引起不必要的問題！

在AndroidMenifest檔案中application節點下添上 android:hardwareAccelerated=”false”以關閉整個應用的硬體加速。
更多請參考這裡：Android的硬體加速及可能導致的問題

關於drawPicture一開始還是挺讓人費解的，不過嘛，我們接下來慢慢研究一下它的用途。

既然是drawPicture就要了解一下什麼是Picture。 顧名思義，Picture的意思是圖片。

不過嘛，我覺得這麼用圖片這個名詞解釋Picture是不合適的，為何這麼說？請看其官方文件對Picture的解釋：

A Picture records drawing calls (via the canvas returned by beginRecording) and can then play them back into Canvas (via draw(Canvas) or drawPicture(Picture)).For most content (e.g. text, lines, rectangles), drawing a sequence from a picture can be faster than the equivalent API calls, since the picture performs its playback without incurring any method-call overhead.

好吧，我知道很多人對這段鳥語是看不懂的，至於為什麼要放在這裡，僅僅是為了顯得更加專業(偷笑)。

下面我就對這段不明覺厲的鳥語用通俗的話翻譯一下:

某一天小萌想在朋友面前顯擺一下，於是在單槓上來了一個後空翻,動作姿勢請參照下圖：

朋友都說 恩，很不錯。 想再看一遍 (〃ω〃)。ヽ(〃∀〃)ﾉ。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

於是小萌又來了一遍，如是幾次之後，小萌累的吐血三升。

於是小萌機智的想，我何不能用手機將我是颯爽英姿錄下來呢，直接儲存成為後空翻.avi 下次想顯擺的時候直接拿出手機，點一下播放就行了，省時省力。

小萌被自己的機智深深的折服了，然後Picture就誕生啦。(╯‵□′)╯︵┻━┻掀桌，坑爹呢，這劇情跳躍也忒大了吧。

好吧，言歸正傳，這次我們瞭解的Picture和上文中的錄影功能是類似的，只不過我們Picture錄的是Canvas中繪製的內容。

我們把Canvas繪製點，線，矩形等諸多操作用Picture錄製下來，下次需要的時候拿來就能用，使用Picture相比於再次呼叫繪圖API，開銷是比較小的，也就是說對於重複的操作可以更加省時省力。

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

瞭解了Picture的概念之後，我們再瞭解一下Picture的相關方法。

相關方法	簡介
public int getWidth ()	獲取寬度
public int getHeight ()	獲取高度
public Canvas beginRecording (int width, int height)	開始錄製 (返回一個Canvas，在Canvas中所有的繪製都會儲存在Picture中)
public void endRecording ()	結束錄製
public void draw (Canvas canvas)	將Picture中內容繪製到Canvas中
public static Picture createFromStream (InputStream stream)	(已廢棄)通過輸入流建立一個Picture
public void writeToStream (OutputStream stream)	(已廢棄)將Picture中內容寫出到輸出流中

上面表格中基本上已經列出了Picture的所有方法，其中getWidth和getHeight沒什麼好說的，最後兩個已經廢棄也自然就不用關注了，排除了這些方法之後，只剩三個方法了，接下來我們就比較詳細的瞭解一下：

很明顯，beginRecording 和 endRecording 是成對使用的，一個開始錄製，一個是結束錄製，兩者之間的操作將會儲存在Picture中。

使用示例：

準備工作:

錄製內容，即將一些Canvas操作用Picture儲存起來，錄製的內容是不會直接顯示在螢幕上的，只是儲存起來了而已。

// 1.建立Picture private Picture mPicture = new Picture(); --------------------------------------------------------------- // 2.錄製內容方法 private void recording() { // 開始錄製 (接收返回值Canvas) Canvas canvas = mPicture.beginRecording(500, 500); // 建立一個畫筆 Paint paint = new Paint(); paint.setColor(Color.BLUE); paint.setStyle(Paint.Style.FILL); // 在Canvas中具體操作 // 位移 canvas.translate(250,250); // 繪製一個圓 canvas.drawCircle(0,0,100,paint); mPicture.endRecording(); } --------------------------------------------------------------- // 3.在使用前呼叫(我在建構函式中呼叫了) public Canvas3(Context context, AttributeSet attrs) { super(context, attrs); recording(); // 呼叫錄製 }

12345678910111213141516171819202122232425262728293031

// 1.建立PictureprivatePicture mPicture=newPicture();---------------------------------------------------------------// 2.錄製內容方法privatevoidrecording(){// 開始錄製 (接收返回值Canvas)Canvas canvas=mPicture.beginRecording(500,500);// 建立一個畫筆Paint paint=newPaint();paint.setColor(Color.BLUE);paint.setStyle(Paint.Style.FILL);// 在Canvas中具體操作// 位移canvas.translate(250,250);// 繪製一個圓canvas.drawCircle(0,0,100,paint);mPicture.endRecording();}---------------------------------------------------------------// 3.在使用前呼叫(我在建構函式中呼叫了)publicCanvas3(Context context,AttributeSet attrs){super(context,attrs);recording();// 呼叫錄製}

具體使用:

Picture雖然方法就那麼幾個，但是具體使用起來還是分很多情況的，由於錄製的內容不會直接顯示，就像儲存的視訊不點選播放不會自動播放一樣，同樣，想要將Picture中的內容顯示出來就需要手動呼叫播放(繪製)，將Picture中的內容繪製出來可以有以下幾種方法：

序號	簡介
1	使用Picture提供的draw方法繪製。
2	使用Canvas提供的drawPicture方法繪製。
3	將Picture包裝成為PictureDrawable，使用PictureDrawable的draw方法繪製。

以上幾種方法主要區別：

主要區別	分類	簡介
是否對Canvas有影響	1有影響 2,3不影響	此處指繪製完成後是否會影響Canvas的狀態(Matrix clip等)
可操作性強弱	1可操作性較弱 2,3可操作性較強	此處的可操作性可以簡單理解為對繪製結果可控程度。

幾種方法簡介和主要區別基本就這麼多了，接下來對於各種使用方法一一詳細介紹：

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

// 將Picture中的內容繪製在Canvas上 mPicture.draw(canvas);

12	// 將Picture中的內容繪製在Canvas上mPicture.draw(canvas);

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)

12345

publicvoiddrawPicture(Picture picture)publicvoiddrawPicture(Picture picture,Rect dst)publicvoiddrawPicture(Picture picture,RectF dst)

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

簡單示例:

canvas.drawPicture(mPicture,new RectF(0,0,mPicture.getWidth(),200));

1	canvas.drawPicture(mPicture,newRectF(0,0,mPicture.getWidth(),200));

*PS:對照上一張圖片，可以比較明顯的看出，繪製的內容根據選區進行了縮放。 *

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

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

123456

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

PS:此處setBounds是設定在畫布上的繪製區域，並非根據該區域進行縮放，也不是剪裁Picture，每次都從Picture的左上角開始繪製。

注意：在使用Picture之前請關閉硬體加速，以免引起不必要的問題，如何關閉請參考這裡： Android的硬體加速及可能導致的問題

(2)drawBitmap

其實一開始知道要講Bitmap我是拒絕的，為什麼呢？因為Bitmap就是很多問題的根源啊有木有，Bitmap可能導致記憶體不足，記憶體洩露，ListView中的複用混亂等諸多問題。想完美的掌控Bitmap還真不是一件容易的事情。限於篇幅本文對於Bitmap不會過多的展開，只講解一些常用的功能，關於Bitmap詳細內容，以後開專題講解QAQ。

既然要繪製Bitmap，就要先獲取一個Bitmap，那麼如何獲取呢？

獲取Bitmap方式:

序號	獲取方式	備註
1	通過Bitmap建立	複製一個已有的Bitmap(新Bitmap狀態和原有的一致) 或者 建立一個空白的Bitmap(內容可改變)
2	通過BitmapDrawable獲取	從資原始檔 記憶體卡 網路等地方獲取一張圖片並轉換為內容不可變的Bitmap
3	通過BitmapFactory獲取	從資原始檔 記憶體卡 網路等地方獲取一張圖片並轉換為內容不可變的Bitmap

通常來說，我們繪製Bitmap都是讀取已有的圖片轉換為Bitmap繪製到Canvas上。
很明顯，第1種方式不能滿足我們的要求，暫時排除。
第2種方式雖然也可滿足我們的要求，但是我不推薦使用這種方式，至於為什麼在後續詳細講解Drawable的時候會說明,暫時排除。
第3種方法我們會比較詳細的說明一下如何從各個位置獲取圖片。

通過BitmapFactory從不同位置獲取Bitmap:

資原始檔(drawable/mipmap/raw):

Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(),R.raw.bitmap);

1	Bitmap bitmap=BitmapFactory.decodeResource(mContext.getResources(),R.raw.bitmap);

資原始檔(assets):

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

12345678

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

記憶體卡檔案:

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

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

網路檔案:

// 此處省略了獲取網路輸入流的程式碼 Bitmap bitmap = BitmapFactory.decodeStream(is); is.close();

123	// 此處省略了獲取網路輸入流的程式碼Bitmap bitmap=BitmapFactory.decodeStream(is);is.close();

既然已經獲得到了Bitmap，那麼就開始本文的重點了，將Bitmap繪製到畫布上。

繪製Bitmap：

依照慣例先預覽一下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)

123456789

// 第一種publicvoiddrawBitmap(Bitmap bitmap,Matrix matrix,Paint paint)// 第二種publicvoiddrawBitmap(Bitmap bitmap,floatleft,floattop,Paint paint)// 第三種publicvoiddrawBitmap(Bitmap bitmap,Rect src,Rect dst,Paint paint)publicvoiddrawBitmap(Bitmap bitmap,Rect src,RectF dst,Paint paint)

第一種方法中後兩個引數(matrix, paint)是在繪製的時候對圖片進行一些改變，如果只是需要將圖片內容繪製出來只需要如下操作就可以了：

PS:圖片左上角位置預設為座標原點。

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

1	canvas.drawBitmap(bitmap,newMatrix(),newPaint());

關於Matrix和Paint暫時略過吧，一展開又是囉囉嗦嗦一大段，反正挖坑已經是常態了，大家應該也習慣了(PAP).

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

注意：此處指定的是與座標原點的距離，並非是與螢幕頂部和左側的距離, 雖然預設狀態下兩者是重合的，但是也請注意分別兩者的不同。

canvas.drawBitmap(bitmap,200,500,new Paint());

1	canvas.drawBitmap(bitmap,200,500,newPaint());

第三種方法比較有意思，上面多了兩個矩形區域(src,dst),這兩個矩形選區是幹什麼用的？

名稱	作用
Rect src	指定繪製圖片的區域
Rect dst 或RectF dst	指定圖片在螢幕上顯示(繪製)的區域

示例：

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

1234567891011

// 將畫布座標系移動到畫布中央canvas.translate(mWidth/2,mHeight/2);// 指定圖片繪製區域(左上角的四分之一)Rect src=newRect(0,0,bitmap.getWidth()/2,bitmap.getHeight()/2);// 指定圖片在螢幕上顯示的區域Rect dst=newRect(0,0,200,400);// 繪製圖片canvas.drawBitmap(bitmap,src,dst,null);

詳解：

上面是以繪製該圖為例，用src指定了圖片繪製部分的區域，即下圖中紅色方框標註的區域。

相關推薦