Android Canvas繪圖詳解

1、.android canvas繪圖詳解（圖文）摘要 android中使用圖形處理引擎，2d部分是android sdk內(nèi)部自己提供，3d部分是用open gl es 1.0。今天我們主要要了解的是2d相關(guān)的，如果你想看3d的話那么可以跳過這篇文章。 大部分2d使用的api都在android.graphics和android.graphics.drawable包中。他們提供了圖android中使用圖形處理引擎，2d部分是android sdk內(nèi)部自己提供，3d部分是用open gl es 1.0。今天我們主要要了解的是2d相關(guān)的，如果你想看3d的話那么可以跳過這篇文章。大部分2d使用的api都在

2、android.graphics和android.graphics.drawable包中。他們提供了圖形處理相關(guān)的： canvas、colorfilter、point(點)和retcf(矩形)等，還有一些動畫相關(guān)的：animationdrawable、 bitmapdrawable和transitiondrawable等。以圖形處理來說，我們最常用到的就是在一個view上畫一些圖片、形狀或者自定義的文本內(nèi)容，這里我們都是使用canvas來實現(xiàn)的。你可以獲取view中的canvas對象，繪制一些自定義形狀，然后調(diào)用view. invalidate方法讓view重新刷新，然后繪制一個新的形狀，這樣

3、達到2d動畫效果。下面我們就主要來了解下canvas的使用方法。canvas對象的獲取方式有兩種：一種我們通過重寫view.ondraw方法，view中的canvas對象會被當(dāng)做參數(shù)傳遞過來，我們操作這個canvas，效果會直接反應(yīng)在view中。另一種就是當(dāng)你想創(chuàng)建一個canvas對象時使用的方法：12bitmap b = bitmap.createbitmap(100, 100, bitmap.config.argb_8888); canvas c =newcanvas(b);上面代碼創(chuàng)建了一個尺寸是100*100的bitmap，使用它作為canvas操作的對象，這時候的canvas就是使用

4、創(chuàng)建的方式。當(dāng)你使用創(chuàng)建的canvas在bitmap上執(zhí)行繪制方法后，你還可以將繪制的結(jié)果提交給另外一個canvas，這樣就可以達到兩個canvas協(xié)作完成的效果，簡化邏輯。但是android sdk建議使用view.ondraw參數(shù)里提供的canvas就好，沒必要自己創(chuàng)建一個新的canvas對象。接下來我們看看canvas提供我們哪些繪制圖形的方法。我們創(chuàng)建一個自定義view對象，使用ondraw方法提供的canvas進行繪制圖形。canvasdemoactivity.java：123456789101112131415161718192021222324252627282930313233

5、3435363738394041424344454647package com.android777.demo.uicontroller.graphics; import android.app.activity; import android.content.context; import android.graphics.canvas; import android.graphics.color; import android.graphics.paint; import android.os.bundle; import android.view.view; public class c

6、anvasdemoactivity extends activity override protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(newcustomview1(this); /* * 使用內(nèi)部類 自定義一個簡單的view * author administrator * */ class customview1 extends view paint paint; public customview1(context context)

7、super(context); paint =newpaint();/設(shè)置一個筆刷大小是3的黃色的畫筆 paint.setcolor(color.yellow); paint.setstrokejoin(paint.join.round); paint.setstrokecap(paint.cap.round); paint.setstrokewidth(3); /在這里我們將測試canvas提供的繪制圖形方法 override protected void ondraw(canvas canvas) 執(zhí)行結(jié)果是一片黑色的區(qū)域，因為在自定義的customview1中，我們沒有做任何的繪制操作。

8、canvas提供的繪制圖形的方法都是以draw開頭的。從上面方法的名字看來我們可以知道canvas可以繪制的對象有：弧線(arcs)、填充顏色(argb和color)、 bitmap、圓(circle和oval)、點(point)、線(line)、矩形(rect)、圖片(picture)、圓角矩形 (roundrect)、文本(text)、頂點(vertices)、路徑(path)。通過組合這些對象我們可以畫出一些簡單有趣的界面出來，但是光有這些功能還是不夠的，如果我要畫一個儀表盤(數(shù)字圍繞顯示在一個圓圈中)呢？ 幸好android還提供了一些對canvas位置轉(zhuǎn)換的方法：rorate、sca

9、le、translate、skew(扭曲)等，而且它允許你通過獲得它的轉(zhuǎn)換矩陣對象(getmatrix方法，不知道什么是轉(zhuǎn)換矩陣？看這里) 直接操作它。這些操作就像是雖然你的筆還是原來的地方畫，但是畫紙旋轉(zhuǎn)或者移動了，所以你畫的東西的方位就產(chǎn)生變化。為了方便一些轉(zhuǎn)換操作，canvas 還提供了保存和回滾屬性的方法(save和restore)，比如你可以先保存目前畫紙的位置(save)，然后旋轉(zhuǎn)90度，向下移動100像素后畫一些圖形，畫完后調(diào)用restore方法返回到剛才保存的位置。下面我們就演示下canvas的一些簡單用法：1234protected void ondraw(canvas ca

10、nvas) canvas.drawcircle(100, 100, 90, paint); 效果是：1234567891011121314override protected void ondraw(canvas canvas) /繪制弧線區(qū)域 rectf rect =newrectf(0, 0, 100, 100); canvas.drawarc(rect,/弧線所使用的矩形區(qū)域大小 0, /開始角度 90,/掃過的角度 false,/是否使用中心 paint); 使用下面的代碼：12345678910111213protected void ondraw(canvas canvas) /繪

11、制弧線區(qū)域 rectf rect =newrectf(0, 0, 100, 100); canvas.drawarc(rect,/弧線所使用的矩形區(qū)域大小 0, /開始角度 90,/掃過的角度 true,/是否使用中心 paint); 兩圖對比我們可以發(fā)現(xiàn)，當(dāng) drawarcs(rect,startangel,sweepangel,usecenter,paint)中的usecenter為false時，弧線區(qū)域是用弧線開始角度和結(jié)束角度直接連接起來的，當(dāng)usecenter為true時，是弧線開始角度和結(jié)束角度都與中心點連接，形成一個扇形。12345protected void ondraw(ca

12、nvas canvas) canvas.drawcolor(color.blue); canvas.drawcolor是直接將view顯示區(qū)域用某個顏色填充滿。1234567override protected void ondraw(canvas canvas) /畫一條線 canvas.drawline(10, 10, 100, 100, paint); canvas.drawoval：123456789override protected void ondraw(canvas canvas) /定義一個矩形區(qū)域 rectf oval =newrectf(0,0,200,300); /矩形

13、區(qū)域內(nèi)切橢圓 canvas.drawoval(oval, paint); canvas.drawpostext：123456789101112131415161718override protected void ondraw(canvas canvas) /按照既定點 繪制文本內(nèi)容 canvas.drawpostext(android777,newfloat 10,10,/第一個字母在坐標10,10 20,20,/第二個字母在坐標20,20 30,30,/. 40,40, 50,50, 60,60, 70,70, 80,80, 90,90, 100,100 , paint); canvas.

14、drawrect：12345678910override protected void ondraw(canvas canvas) rectf rect =newrectf(50, 50, 200, 200); canvas.drawrect(rect, paint); canvas.drawroundrect：1234567891011override protected void ondraw(canvas canvas) rectf rect =newrectf(50, 50, 200, 200); canvas.drawroundrect(rect, 30,/x軸的半徑 30,/y軸的

15、半徑 paint); canvas.drawpath：123456789101112override protected void ondraw(canvas canvas) path path =newpath();/定義一條路徑 path.moveto(10, 10);/移動到 坐標10,10 path.lineto(50, 60); path.lineto(200,80); path.lineto(10, 10); canvas.drawpath(path, paint); canvas.drawtextonpath：12345678910111213override protected

16、 void ondraw(canvas canvas) path path =newpath();/定義一條路徑 path.moveto(10, 10);/移動到 坐標10,10 path.lineto(50, 60); path.lineto(200,80); path.lineto(10, 10); / canvas.drawpath(path, paint); canvas.drawtextonpath(android777開發(fā)者博客, path, 10, 10, paint); 位置轉(zhuǎn)換方法，canvas.rorate和canvas.translate： 123456789101112

17、13141516171819202122232425262728293031323334353637383940414243444546override protected void ondraw(canvas canvas) paint.setantialias(true); paint.setstyle(style.stroke); canvas.translate(canvas.getwidth()/2, 200);/將位置移動畫紙的坐標點:150,150 canvas.drawcircle(0, 0, 100, paint);/畫圓圈 /使用path繪制路徑文字 canvas.save

18、(); canvas.translate(-75, -75); path path =newpath(); path.addarc(newrectf(0,0,150,150), -180, 180); paint citepaint =newpaint(paint); citepaint.settextsize(14); citepaint.setstrokewidth(1); canvas.drawtextonpath(, path, 28, 0, citepaint); canvas.restore(); paint tmppaint =ne

19、wpaint(paint);/小刻度畫筆對象 tmppaint.setstrokewidth(1); float y=100; int count = 60;/總刻度數(shù) for(int i=0 ; i count ; i+) if(i%5 = 0) canvas.drawline(0f, y, 0, y+12f, paint); canvas.drawtext(string.valueof(i/5+1), -4f, y+25f, tmppaint); else canvas.drawline(0f, y, 0f, y +5f, tmppaint); canvas.rotate(360/coun

20、t,0f,0f);/旋轉(zhuǎn)畫紙 /繪制指針 tmppaint.setcolor(color.gray); tmppaint.setstrokewidth(4); canvas.drawcircle(0, 0, 7, tmppaint); tmppaint.setstyle(style.fill); tmppaint.setcolor(color.yellow); canvas.drawcircle(0, 0, 5, tmppaint); canvas.drawline(0, 10, 0, -65, paint); 上面幾個例子基本已經(jīng)將常用的canvas.draw*方法測試過了，我們結(jié)合一些事件

21、，做一些有用戶交互的應(yīng)用：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667package com.android777.demo.uicontroller.graphics; import java.util.arraylist; import android.app.activity; import android.content.context; import android.graphic

22、s.canvas; import android.graphics.color; import android.graphics.paint; import android.graphics.pointf; import android.os.bundle; import android.view.motionevent; import android.view.view; public class canvasdemoactivity extends activity override protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentv