目錄

從0到1Android自定義View（三） 畫(huà)圖的五個(gè)元素組件.png

一、畫(huà)圖五個(gè)元素組件簡(jiǎn)介

Android Framework 提供了一些 2D 畫(huà)圖的 API，android.graphics 包就是其中之一。

通常我們?cè)谧远x View 中需要畫(huà)一些東西，那么基本就是需要 5 個(gè)元素組件協(xié)同來(lái)完成的。這 5 個(gè)組件分別是：

顏色：Color

位圖：Bitmap 來(lái)保持（hold）那些像素，通過(guò) Matrix 來(lái)使圖像變換，如平移、旋轉(zhuǎn)、縮放、扭曲等

畫(huà)布：Canvas 來(lái)響應(yīng)畫(huà)畫(huà)（draw）的調(diào)用（并將其寫(xiě)入 bitmap）

畫(huà)筆：Paint 描述畫(huà)畫(huà)的顏色和樣式等

路徑：Path 根據(jù)路徑繪制文本和剪裁畫(huà)布

其實(shí)這也很好理解，編程其實(shí)就是根據(jù)生活哲學(xué)創(chuàng)造的。比如 JAVA 的編程思想就是：萬(wàn)事萬(wàn)物皆對(duì)象。在現(xiàn)實(shí)生活中，我們需要畫(huà)一些東西，也是需要畫(huà)紙，畫(huà)筆，顏料等等，因此自定義 View 中，我們需要畫(huà)一些東西，也是離不開(kāi)畫(huà)布（Canvas），畫(huà)筆（paint），其中我們可以調(diào)整畫(huà)布的顏色和畫(huà)筆的顏色。

下面我們一個(gè)一個(gè)類的看下相關(guān)的知識(shí)點(diǎn)，雖然會(huì)有點(diǎn)悶，可是感覺(jué)這又是必需的，過(guò)完這些知識(shí)點(diǎn)后，就開(kāi)始一些實(shí)戰(zhàn)的運(yùn)用了。

二、顏色：Color 類

Color 我們應(yīng)該是接觸的比較多的，因此只是簡(jiǎn)單的介紹一下使用方式。Android 系統(tǒng)中顏色的常用表示方法有以下 3 種：

1、int color = Color.BLUE;

2、int color = Color.argb(150,200,0,100);

3、在xml文件中定義顏色；

三、位圖：Bitmap 類

1、Bitmap 類在自定義 View 中的簡(jiǎn)介

Bitmap (android.graphics.Bitmap)，是 Android 系統(tǒng)中的圖像處理的最重要類之一。用它可以獲取圖像文件信息，進(jìn)行圖像剪切、旋轉(zhuǎn)、縮放等操作，并可以指定格式保存圖像文件。

當(dāng)然，在自定義 View 中使用最多的操作大概就是一些剪切，旋轉(zhuǎn)等動(dòng)畫(huà)功能了。因?yàn)?Bitmap 涉及的方面挺廣的，因?yàn)檫@是自定義 View 系列，主要是介紹如何通過(guò) Matrix 在 Android 中的使圖像（ Bitmap ）變換，如平移、旋轉(zhuǎn)、縮放、扭曲等。

2、Matrix 簡(jiǎn)介

Matrix 內(nèi)部通過(guò)維護(hù)一個(gè) float[9] 的數(shù)組來(lái)構(gòu)成 3x3 矩陣的形式，而實(shí)際上所有的變換方法說(shuō)到底就是通過(guò)更改數(shù)組中某個(gè)或某幾個(gè)位置的數(shù)值。Matrix 提供了 setValues() 和 getValues() 方法來(lái)操作數(shù)組。

Matrix 矩陣格式.png

實(shí)際上我們平常利用 Matrix 來(lái)進(jìn)行 Translate（平移）、Scale（縮放）、Rotate（旋轉(zhuǎn)）的操作，就是在操作著這個(gè)矩陣中元素的數(shù)值來(lái)達(dá)到我們想要的效果。但是現(xiàn)在問(wèn)題來(lái)了，上面提到的平移、縮放、旋轉(zhuǎn)操作中，旋轉(zhuǎn)和縮放可以用乘法表示，而平移就只能用加法表示，而且 Matrix 是一個(gè) 3 X 3 的矩陣，實(shí)際上表示這些操作 2 X 2 的矩陣足矣！

Matrix的平移、縮放、旋轉(zhuǎn)的矩陣.png

如上，可以依次看到平移、縮放、旋轉(zhuǎn)的矩陣，其中

（x'，y'）表示執(zhí)行操作后的點(diǎn)的坐標(biāo)

（x，y）表示執(zhí)行操作前的點(diǎn)的坐標(biāo)

tx、ty 分別表示 x 軸、y 軸上平移的距離

Sx、Sy 分別表示x軸、y軸上的縮放比例

θ 則表示旋轉(zhuǎn)角度

其實(shí)在計(jì)算機(jī)圖形應(yīng)用涉及到幾何變換，主要包括平移、旋轉(zhuǎn)、縮放。以矩陣表達(dá)式來(lái)計(jì)算這些變換時(shí)，平移是矩陣相加，旋轉(zhuǎn)和縮放則是矩陣相乘。不過(guò)，通過(guò)齊次坐標(biāo)（齊次坐標(biāo)有著廣泛的應(yīng)用，包括電腦圖形及 3D 電腦視覺(jué)。使用齊次坐標(biāo)可讓電腦進(jìn)行仿射變換，并通常，其投影變換能簡(jiǎn)單地使用矩陣來(lái)表示。），將平移的加法合并用乘法表示。

3、Matrix 9 個(gè)元素的作用

上面都提到了 Matrix 是一個(gè) 3 X 3 的矩陣，也就是說(shuō)一個(gè) Matrix 共有 9 個(gè)元素，那么它每個(gè)元素的值發(fā)生改變會(huì)起到什么作用呢？

Matrix 基本變換有 4 種: 平移(translate)、縮放(scale)、旋轉(zhuǎn)(rotate) 和 錯(cuò)切(skew)。這 4 種變換都是由矩陣中的 9 個(gè)元素參數(shù)控制的

Matrix 9 個(gè)元素的作用.png

上面提到了平移(translate)、縮放(scale)、旋轉(zhuǎn)(rotate) 和 錯(cuò)切(skew) 都是由這 9 個(gè)元素控制的，當(dāng)然，Android 給我們提供了一系列的方法函數(shù)，且這些變換操作，每一種操作在 Matrix 均有三類,前乘(pre)，后乘(post)和設(shè)置(set)

常用API包括下面的組合形式

setprepost

translatesetTranslatepreTranslatepostTranslate

scalesetScalepreScalepostScale

rotatesetRotatepreRotatepostRotate

我們用translate來(lái)講

setTranslate()指定了移動(dòng)的位置，不需要通過(guò)左乘右乘

postTranslate()在方法內(nèi)部進(jìn)行的是M' = T(dx, dy) * M，t 左乘m

preTranslate()在方法內(nèi)部進(jìn)行的是M' = M * T(dx, dy)，m左乘t

post,pre的乘法計(jì)算順序是相反的，矩陣乘法不滿足交換律，所以計(jì)算結(jié)果幾乎是不同的。

可能不太好理解，不過(guò)先要知道有這回事，之后通過(guò)實(shí)踐就能很好的理解了。當(dāng)然，Matrix 提供的 API 方法還有很多，羅列出來(lái)給各位看，效果也不是很好，主要是 API 方法是會(huì)變的，因此我們最重要的技能還是學(xué)會(huì)在編程中看 API 方法，查看源碼或者源碼中的解釋介紹來(lái)看和了解相關(guān)方法的作用。

四、畫(huà)布： Canvas 類

1、Canvas 類簡(jiǎn)介

Canvas，畫(huà)布，能夠在上面繪制各種東西，是安卓平臺(tái) 2D 圖形繪制的基礎(chǔ)。因?yàn)?Canvas 類是構(gòu)成上層的基礎(chǔ)，所以它的可操作性強(qiáng)，里面提供的方法也是相對(duì)基礎(chǔ)的，因此想弄成復(fù)雜一點(diǎn)的圖像是有一定的難度的。

2、Canvas 類提供的 API

其實(shí)我的看法跟上面一樣，不全列出來(lái) Canvas 類提供的 API 方法，因?yàn)樘嗔耍谐鰜?lái)，相信各位也不會(huì)細(xì)看，太多的話，更不容易讓各位了解記憶。所以大概總結(jié)一下， 用到可以打關(guān)鍵字，就能在 AS 或者 Eclpise 中查到相關(guān)的方法了。

Canvas 提供的繪制圖形的方法，基本都是以 draw 開(kāi)頭的。好，我們只要知道這個(gè)，我們只要打出關(guān)鍵字就可以知道相關(guān)的方法了，例如：

Canvas draw方法.png

從上面方法的名字看來(lái)我們可以知道 Canvas 可以繪制的對(duì)象有：弧線(arcs)、填充顏色(argb 和color)、 Bitmap、圓(circle 和 oval)、點(diǎn)(point)、線(line)、矩形(Rect)、圖片(Picture)、圓角矩形 (RoundRect)、文本(text)、頂點(diǎn)(Vertices)、路徑(path)。

我個(gè)人是比較不提倡死記硬背有哪些 API 方法的，通過(guò)思考，猜想 Google 的工程師可能會(huì)提供什么方法出來(lái)，比如，上面的，Canvas 類提供了可以繪制的對(duì)象，可是只有這些，還是不夠的，為什么？因?yàn)槲覀兛吹降淖远x View 都是附帶一些動(dòng)畫(huà)的，比如選擇等等，所以我們可以知道，Android 會(huì)提供了一些對(duì) Canvas 位置轉(zhuǎn)換的方法：rorate、scale、translate、skew(扭曲)等。而且它允許你通過(guò)獲得它的轉(zhuǎn)換矩陣對(duì)象，也就是上面所介紹的。這些操作就像是雖然你的筆還是原來(lái)的地方畫(huà)，但是畫(huà)紙旋轉(zhuǎn)或者移動(dòng)了，所以你畫(huà)的東西的方位就產(chǎn)生變化。為了方便一些轉(zhuǎn)換操作，Canvas 還提供了保存和回滾屬性的方法( save 和 restore )，比如你可以先保存目前畫(huà)紙的位置(save)，然后旋轉(zhuǎn) 90 度，向下移動(dòng) 100 像素后畫(huà)一些圖形，畫(huà)完后調(diào)用 restore 方法返回到剛才保存的位置。

五、畫(huà)筆： Paint 類

1、Paint 類簡(jiǎn)介

Paint 類包含有用來(lái)畫(huà)幾何圖形、文本、位圖的類型和顏色等信息，如果把 Canvas 類看作是畫(huà)板，那我們可以把 Paint類 看做是畫(huà)筆，可以根據(jù)需要畫(huà)出不同顏色和樣式的圖形、文本等內(nèi)容。其實(shí)基本 Paint 類和 Canvas 類都是結(jié)合使用的。

2、Paint 類提供的 API

Paint 類提供了很多方法來(lái)設(shè)置和獲取 Paint 對(duì)象的屬性，像上面提到的觀點(diǎn)一樣，猜下會(huì)提供什么 API 方法，竟然是畫(huà)筆，我們現(xiàn)實(shí)中有不同的顏色的畫(huà)筆，所以 API 提供了的很多方法來(lái)設(shè)置和獲取Paint 對(duì)象的屬性，像剛提到的顏色值（setColor），Alpha 值（setAlpha），字體尺寸（setTextSize）和畫(huà)筆風(fēng)格，空心或者實(shí)心（setStyle）等等。當(dāng)然有 set 方法肯定也會(huì)有對(duì)應(yīng)的 get 方法。

六、路徑：Path 類

1、Path 類簡(jiǎn)介

Path 類的官方定義：路徑，即無(wú)數(shù)個(gè)點(diǎn)連起來(lái)的線。其實(shí)也就是說(shuō) Path 類封裝了由直線和曲線構(gòu)成的幾何路徑。

2、Path 類作用

上面提到的繪制都是簡(jiǎn)單圖形(如 矩形 圓 圓弧等)，而對(duì)于那些復(fù)雜一點(diǎn)的圖形則沒(méi)法去繪制(如繪制一個(gè)心形 正多邊形 五角星等)，而使用 Path 不僅能夠繪制簡(jiǎn)單圖形，也可以繪制這些比較復(fù)雜的圖形。另外，根據(jù)路徑繪制文本和剪裁畫(huà)布都會(huì)用到 Path。

3、Path 類提供的 API

Path 類相對(duì)來(lái)說(shuō)，提供的方法不是三言兩語(yǔ)就能說(shuō)明白的，需要通過(guò)實(shí)踐來(lái)體會(huì)，這里只是簡(jiǎn)單的提下，還是要通過(guò)往后實(shí)踐來(lái)加深理解的。

Path 類，上面提到可以繪制復(fù)雜的圖形，因此會(huì)有基本繪圖方法。比如繪制圓形（addCircle），繪制直線（lineTo）和繪制圓角矩形（addRoundRect）。這時(shí)我們就會(huì)想到，不是繪制復(fù)雜的圖形嗎，這些都是基本的圖形啊。那么怎么繪制復(fù)雜的圖形呢，當(dāng)然復(fù)雜的圖形都是有基本的圖形演變來(lái)的，那么 Path 提供了什么特別的 API 嗎？所以 Path 提供了 lineTo,moveTo,quadTo,cubicTo 以及與之對(duì)應(yīng)的 rLineTo ，rMoveTo ，rQuadTo，rCubicTo的方法。比如 lineTo(float x, float y)，繪制一條 x 到 y 的直線，因?yàn)閮牲c(diǎn)決定一條直線，所以提供兩個(gè)點(diǎn)就行了。而 rLineTo 呢？rLineTo 方法是基于當(dāng)前繪制開(kāi)始點(diǎn)的offest。比如當(dāng)前 paint 位于 (100,100) 處， rLineTo(100,100) 方法繪制出來(lái)的直線是從 (100,100) 到 (200,200) 的。也就是 rXXX 方法方便用來(lái)基于之前的繪制作連續(xù)繪制。

當(dāng)然 Path 類還有一些其他的方法，比如移動(dòng)畫(huà)筆到 (x,y) 處：moveTo(float x,float y)，設(shè)置當(dāng)前 path 的終點(diǎn)： setLastPoint(float x,float y) 等等一些列的方法。

注：非原創(chuàng)，不裝逼，不虛假。