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(點(diǎn))和retcf(矩形)等，還有一些動(dòng)畫相關(guān)的：animationdrawable、 bitmapdrawable和transitiondrawable等。以圖形處理來說，我們最常用到的就是在一個(gè)view上畫一些圖片、形狀或者自定義的文本內(nèi)容，這里我們都是使用canvas來實(shí)現(xiàn)的。你可以獲取view中的canvas對(duì)象，繪制一些自定義形狀，然后調(diào)用view. invalidate方法讓view重新刷新，然后繪制一個(gè)新的形狀，這樣

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

4、創(chuàng)建的方式。當(dāng)你使用創(chuàng)建的canvas在bitmap上執(zhí)行繪制方法后，你還可以將繪制的結(jié)果提交給另外一個(gè)canvas，這樣就可以達(dá)到兩個(gè)canvas協(xié)作完成的效果，簡(jiǎn)化邏輯。但是android sdk建議使用view.ondraw參數(shù)里提供的canvas就好，沒必要自己創(chuàng)建一個(gè)新的canvas對(duì)象。接下來我們看看canvas提供我們哪些繪制圖形的方法。我們創(chuàng)建一個(gè)自定義view對(duì)象，使用ondraw方法提供的canvas進(jìn)行繪制圖形。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)部類 自定義一個(gè)簡(jiǎn)單的view * author administrator * */ class customview1 extends view paint paint; public customview1(context context)

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

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

9、le、translate、skew(扭曲)等，而且它允許你通過獲得它的轉(zhuǎn)換矩陣對(duì)象(getmatrix方法，不知道什么是轉(zhuǎn)換矩陣？看這里) 直接操作它。這些操作就像是雖然你的筆還是原來的地方畫，但是畫紙旋轉(zhuǎn)或者移動(dòng)了，所以你畫的東西的方位就產(chǎn)生變化。為了方便一些轉(zhuǎn)換操作，canvas 還提供了保存和回滾屬性的方法(save和restore)，比如你可以先保存目前畫紙的位置(save)，然后旋轉(zhuǎn)90度，向下移動(dòng)100像素后畫一些圖形，畫完后調(diào)用restore方法返回到剛才保存的位置。下面我們就演示下canvas的一些簡(jiǎn)單用法：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); 兩圖對(duì)比我們可以發(fā)現(xiàn)，當(dāng) drawarcs(rect,startangel,sweepangel,usecenter,paint)中的usecenter為false時(shí)，弧線區(qū)域是用弧線開始角度和結(jié)束角度直接連接起來的，當(dāng)usecenter為true時(shí)，是弧線開始角度和結(jié)束角度都與中心點(diǎn)連接，形成一個(gè)扇形。12345protected void ondraw(ca

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

13、區(qū)域內(nèi)切橢圓 canvas.drawoval(oval, paint); canvas.drawpostext：123456789101112131415161718override protected void ondraw(canvas canvas) /按照既定點(diǎn) 繪制文本內(nèi)容 canvas.drawpostext(android777,newfloat 10,10,/第一個(gè)字母在坐標(biāo)10,10 20,20,/第二個(gè)字母在坐標(biāo)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);/移動(dòng)到 坐標(biāo)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);/移動(dòng)到 坐標(biāo)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);/將位置移動(dòng)畫紙的坐標(biāo)點(diǎn):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);/小刻度畫筆對(duì)象 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); 上面幾個(gè)例子基本已經(jīng)將常用的canvas.draw*方法測(cè)試過了，我們結(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