一.Canvas簡介

Canvas我們可以稱之為畫布，能夠在上面繪制各種東西，是Android平臺2D圖形繪制的基礎。

二.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)位移操作

注意：位移是基于當前位置移動，而不是每次基于屏幕左上角的(0,0)點移動。

//位移操作

// 在坐標原點繪制一個白色圓形

mPaint.setColor(Color.WHITE);

canvas.translate(200,200);

canvas.drawCircle(0,0,100,mPaint);

// 在坐標原點繪制一個藍色圓形

mPaint.setColor(Color.BLUE);

canvas.translate(400,200);

canvas.drawCircle(0,0,100,mPaint);

a.jpg

⑵縮放操作(scale)

縮放提供了兩個方法：

public void scale (float sx, float sy)

public final void scale (float sx, float sy, float px, float py)

這兩個方法中前兩個參數是相同的分別為x軸和y軸的縮放比例。而第二種方法比前一種多了兩個參數，用來控制縮放中心位置的。

注意：縮放的中心默認為坐標原點,而縮放中心軸就是坐標軸

//縮放操作

// 將坐標系原點移動到屏幕正中心

canvas.translate(width / 2, height / 2);

// 矩形區域

RectF rect = new RectF(0,-300,300,0);

// 繪制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 畫布縮放(縮放中心是屏幕正中心)

canvas.scale(0.5f,0.5f);

// 繪制藍色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

b.jpg

改變縮放中心位置：

canvas.translate(width / 2, height / 2);

// 矩形區域

RectF rect = new RectF(0,-300,300,0);

// 繪制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 畫布縮放(縮放中心向右移動150px)

canvas.scale(0.5f,0.5f,150,0);

// 繪制藍色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

c.jpg

當縮放比例為負數的時候會根據縮放中心軸進行翻轉

canvas.translate(width / 2, height / 2);

// 矩形區域

RectF rect = new RectF(0,-300,300,0);

// 繪制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 畫布縮放(縮放中心是屏幕正中心，縮放比例為負數)

canvas.scale(-0.5f,-0.5f);

// 繪制藍色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

d.jpg

縮放中心的改變

canvas.translate(width / 2, height / 2);

// 矩形區域

RectF rect = new RectF(0,-300,300,0);

// 繪制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 畫布縮放(縮放中心向右移動150px，縮放比例為負數)

canvas.scale(-0.5f,-0.5f,150,0);

// 繪制藍色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

e.jpg

位移(translate)一樣，縮放也是可以疊加的,可以利用這一特性，做出特殊的圖形

注意：要把畫筆的模式改為STROKE

//設置畫筆模式

mPaint.setStyle(Paint.Style.STROKE);

canvas.translate(width / 2, height / 2);

// 矩形區域

RectF rect = new RectF(-380,-380,380,380);

for (int i=0; i<=20; i++)

{

canvas.scale(0.9f,0.9f);

canvas.drawRect(rect,mPaint);

}

f.jpg

⑶旋轉(rotate)

旋轉提供了兩種方法：

public void rotate (float degrees)

public final void rotate (float degrees, float px, float py)

和縮放一樣，第二種方法多出來的兩個參數依舊是控制旋轉中心點的。

默認的旋轉中心依舊是坐標原點

// 將坐標系原點移動到畫布正中心

canvas.translate(width / 2, height / 2);

// 矩形區域

RectF rect = new RectF(0,-300,300,0);

// 繪制黑色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

// 旋轉180度

canvas.rotate(180);

// 繪制藍色矩形

mPaint.setColor(Color.BLUE);

canvas.drawRect(rect,mPaint);

g.jpg

改變旋轉中心位置

// 將坐標系原點移動到畫布正中心

canvas.translate(width / 2, height / 2);

// 矩形區域

RectF rect = new RectF(0,-200,200,0);

// 繪制黑色矩形

mPaint.setColor(Color.BLACK);

canvas.drawRect(rect,mPaint);

// 旋轉180度

canvas.rotate(180,100,0);

// 繪制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

h.jpg

旋轉也是可疊加的

canvas.translate(width / 2, height / 2);

// 繪制兩個圓形

canvas.drawCircle(0,0,350,mPaint);

canvas.drawCircle(0,0,330,mPaint);

for (int i=0; i<=360; i+=10){

// 繪制圓形之間的連接線

canvas.drawLine(0,330,0,350,mPaint);

canvas.rotate(10);

}

i.jpg

(4)歪斜(skew)

歪斜只提供了一種方法

public void skew (float sx, float sy)

參數含義：

float sx:將畫布在x方向上傾斜相應的角度，sx傾斜角度的tan值。

float sy:將畫布在y軸方向上傾斜相應的角度，sy為傾斜角度的tan值。

// 將坐標系原點移動到畫布正中心

canvas.translate(width / 2, height / 2);

// 矩形區域

RectF rect = new RectF(0,0,150,150);

// 繪制黑色矩形

mPaint.setColor(Color.BLACK);

canvas.drawRect(rect,mPaint);

// x軸方向歪斜

canvas.skew(1,0);

// 繪制白色矩形

mPaint.setColor(Color.WHITE);

canvas.drawRect(rect,mPaint);

j.jpg

參考文章

源碼下載

總結

以上是生活随笔為你收集整理的android画布设置最外层,Android自定义View高级(三)-Canvas之画布操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。