本文轉自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html
Android中使用圖形處理引擎,2D部分是android SDK內部自己提供,3D部分是用Open GL ES 1.0。今天我們主要要了解的是2D相關的,如果你想看3D的話那么可以跳過這篇文章。
大部分2D使用的api都在android.graphics和android.graphics.drawable包中。他們提供了圖形處理相關的: Canvas、ColorFilter、Point(點)和RetcF(矩形)等,還有一些動畫相關的:AnimationDrawable、 BitmapDrawable和TransitionDrawable等。以圖形處理來說,我們最常用到的就是在一個View上畫一些圖片、形狀或者自定義的文本內容,這里我們都是使用Canvas來實現的。你可以獲取View中的Canvas對象,繪制一些自定義形狀,然后調用View. invalidate方法讓View重新刷新,然后繪制一個新的形狀,這樣達到2D動畫效果。下面我們就主要來了解下Canvas的使用方法。
Canvas對象的獲取方式有兩種:一種我們通過重寫View.onDraw方法,View中的Canvas對象會被當做參數傳遞過來,我們操作這個Canvas,效果會直接反應在View中。另一種就是當你想創建一個Canvas對象時使用的方法:
- Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
- Canvas c = new Canvas(b);
上面代碼創建了一個尺寸是100*100的Bitmap,使用它作為Canvas操作的對象,這時候的Canvas就是使用創建的方式。當你使用創建的Canvas在bitmap上執行繪制方法后,你還可以將繪制的結果提交給另外一個Canvas,這樣就可以達到兩個Canvas協作完成的效果,簡化邏輯。但是android SDK建議使用View.onDraw參數里提供的Canvas就好,沒必要自己創建一個新的Canvas對象。接下來我們看看Canvas提供我們哪些繪制圖形的方法。我們創建一個自定義View對象,使用onDraw方法提供的Canvas進行繪制圖形。
MyCustomView.java:
- public class MyCustomView extends View {
-
- private Paint paint;
-
- public MyCustomView(Context context, AttributeSet attrs) {
- super(context, attrs);
- }
-
- public MyCustomView(Context context) {
- super(context);
- paint = new Paint(); // 設置一個筆刷大小是3的黃色的畫筆
- paint.setColor(Color.YELLOW);
- paint.setStrokeJoin(Paint.Join.ROUND);
- paint.setStrokeCap(Paint.Cap.ROUND);
- paint.setStrokeWidth(3);
- }
-
- @Override
- protected void onDraw(Canvas canvas) {
- // TODO Auto-generated method stub
- super.onDraw(canvas);
- }
- }
activity_main.xml
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:id="@+id/main_root_ll"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
-
- <com.example.testcustomview.MyCustomView
- android:id="@+id/custom_view"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
-
- </LinearLayout>
運行發現一片空白,因為在自定義的MyCustomView中,我們沒有做任何的繪制操作。canvas提供的繪制圖形的方法都是以draw開頭的,我們可以查看api:
從上面方法的名字看來我們可以知道Canvas可以繪制的對象有:
arcs
弧線argb和color
填充顏色Bitmap
位圖circle和oval
圓point
點line
線Rect
矩形Picture
圖片RoundRect
圓角矩形text
文本Vertices
頂點path
路徑
通過組合這些對象我們可以畫出一些簡單有趣的界面出來,但是光有這些功能還是不夠的,如果我要畫一個儀表盤(數字圍繞顯示在一個圓圈中)呢? 幸好Android還提供了一些對Canvas位置轉換的方法:rorate、scale、translate、skew(扭曲)等,而且它允許你通過獲得它的轉換矩陣對象直接操作它。這些操作就像是雖然你的筆還是原來的地方畫,但是畫紙旋轉或者移動了,所以你畫的東西的方位就產生變化。為了方便一些轉換操作,Canvas還提供了保存和回滾屬性的方法(save和restore),比如你可以先保存目前畫紙的位置(save),然后旋轉90度,向下移動100像素后畫一些圖形,畫完后調用restore方法返回到剛才保存的位置。下面我們就演示下canvas的一些簡單用法:
一些簡單用法
- protected void onDraw(Canvas canvas) {
- canvas.drawCircle(100, 100, 90, paint);
- }
效果是:
- @Override
- protected void onDraw(Canvas canvas) {
- //繪制弧線區域
- RectF rect = new RectF(0, 0, 100, 100);
- canvas.drawArc(rect, //弧線所使用的矩形區域大小
- 0, //開始角度
- 90, //掃過的角度
- false, //是否使用中心
- paint);
- }
效果是:
- protected void onDraw(Canvas canvas) {
- //繪制弧線區域
- RectF rect = new RectF(0, 0, 100, 100);
- canvas.drawArc(rect, //弧線所使用的矩形區域大小
- 0, //開始角度
- 90, //掃過的角度
- true, //是否使用中心
- paint);
- }
效果是:
兩圖對比我們可以發現,當 drawArcs(rect,startAngel,sweepAngel,useCenter,paint)中的useCenter為false時,弧線區域是用弧線開始角度和結束角度直接連接起來的,當useCenter為true時,是弧線開始角度和結束角度都與中心點連接,形成一個扇形。
- protected void onDraw(Canvas canvas) {
- canvas.drawColor(Color.BLUE);
- }
效果是:
canvas.drawColor是直接將View顯示區域用某個顏色填充滿。
- @Override
- protected void onDraw(Canvas canvas) {
- //畫一條線
- canvas.drawLine(10, 10, 100, 100, paint);
- }
效果是:
- @Override
- protected void onDraw(Canvas canvas) {
- //定義一個矩形區域
- RectF oval = new RectF(0,0,200,300);
- //矩形區域內切橢圓
- canvas.drawOval(oval, paint);
- }
效果是:
- @Override
- protected void onDraw(Canvas canvas) {
- //按照既定點 繪制文本內容
- canvas.drawPosText("Android777", new float[]{
- 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);
- }
效果是:
- @Override
- protected void onDraw(Canvas canvas) {
- RectF rect = new RectF(50, 50, 200, 200);
- canvas.drawRect(rect, paint);
- }
- }
效果是:
- @Override
- protected void onDraw(Canvas canvas) {
- RectF rect = new RectF(50, 50, 200, 200);
- canvas.drawRoundRect(rect,
- 30, //x軸的半徑
- 30, //y軸的半徑
- paint);
- }
效果是:
- @Override
- protected void onDraw(Canvas canvas) {
- Path path = new Path(); //定義一條路徑
- path.moveTo(10, 10); //移動到 坐標10,10
- path.lineTo(50, 60);
- path.lineTo(200,80);
- path.lineTo(10, 10);
- canvas.drawPath(path, paint);
- }
效果是:
- @Override
- protected void onDraw(Canvas canvas) {
- Path path = new Path(); //定義一條路徑
- 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開發者博客", path, 10, 10, paint);
- }
效果是:
Canvas的其他方法
canvas.save
用來保存Canvas的狀態。save之后,可以調用Canvas的平移、放縮、旋轉、錯切、裁剪等操作。canvas.restore
用來恢復Canvas之前保存的狀態。防止save后對Canvas執行的操作對后續的繪制有影響。canvas.translate(x,y)
平移,將畫布的坐標原點向左右方向移動x,向上下方向移動y;canvas的默認位置是在(0,0)canvas.rotate
旋轉,將畫布以圓心為圓點旋轉
下一篇畫一個復雜一些的