Android 2D繪圖初步，android2d繪圖

Android 2D繪圖初步，android2d繪圖

      Android是通過graphics類來顯示2D圖形的。其中graphics中包括了Canvas、Paint、Color、Bitmap等類。graphics具有繪製點、線、顏色、2D幾何圖形、影像處理等功能。其中Color和Bitmap是很常用的類，我要講的是Canvas和Paint。顧名思義就是畫布和畫筆。接下來我將通過繪製太極圖來學習Android繪圖機制。 

      Paint類 
　　和日常繪圖一樣，要繪製圖形，首先得選擇合適的畫筆。那麼同理android中繪圖首先得調整畫筆，按照自己的需要設定畫筆的相關屬性，系統給我提供的常用API如下： 
　　setColor(); //設定畫筆的顏色 
　　setAntiAlias(); //設定畫筆的鋸齒效果 
　　setARGB(); //設定畫筆的A、R、G、B值 
　　setAlpha(); //設定畫筆的Alpha值 
　　setTextSize(); //設定字型的尺寸 
　　setStyle(); //設定畫筆的風格（空心或實心） 
　　setStrokeWidth(); //設定空心邊框的寬度 
　　getColor(); //擷取畫筆的顏色

　　Canvas 
　　Canvas即畫布，我們需要做的就是使用之前設定好的Paint來繪製圖形。那麼我們先看看系統給我們提供的方法： 
　　canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint);//繪製直線 
　　canvas.drawRect(float left, float top, float right, float bottom, Paint paint);//繪製矩形 
　　canvas.drawCircle(float cx, float cy, float radius, Paint paint);//繪製圓 
　　canvas.drawArc(float cx, float cy, float radius, Paint paint);//繪製弧形、和扇形 
　   canvas.drawText(String text, float x, float y, Paint paint);//　繪製字元 
　　canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint);//繪製Bitmap

      介紹完這些函數，下面通過繪製太極圖來看看怎麼使用它們： 
　　先看看太極圖： 

                           

     現在就要開始一步一步的將他畫出來， 我們可以借鑒圖層的概念。首先繪製最底部的圖層，為了方便我們將其左，右兩邊分別設定白色和黑色： 

           

     圖中（x，y）是圓心座標。這裡我設定的x=getWidth() / 2；y=getHeight() / 2；半徑r=getHeight() / 2； 
　　現在我們就來看看代碼，在定義View的OnDraw（Canvas canvas）方法中： 

 

//繪製最外層大圓        mPaint.setColor(Color.BLACK);//設定畫筆顏色為黑色        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//設定畫筆style實心        RectF rect= new RectF(getWidth() / 2 - getHeight() / 2,                0, getWidth() / 2 + getHeight() / 2, getHeight());//圓弧的外接矩形        canvas.drawArc(rect, 270, 180, false, mPaint);        mPaint.setColor(Color.WHITE);//設定畫筆顏色為白色        canvas.drawArc(rect, 90, 180, false, mPaint);

      代碼中rect即圓的外接四邊形，其建構函式RectF(float left, float top, float right, float bottom)的四個參數分別對應四邊形最左邊的x座標值；左上邊的y座標值；最右邊的x座標值；最下邊的y座標值。可以看出代碼中： 
      left=getWidth() / 2 - getHeight() / 2； 
      top=0； 
      right=getWidth() / 2 + getHeight() / 2； 
      bottom=getHeight()； 
      四個值確定了圓的外接四邊形。 
　　canvas.drawArc(rect, 90, 180, false, mPaint);第一個參數即是我們上邊確定的地區，第二個參數是開始繪製的角度（90度，ｘ軸方向順時針旋轉），第三個參數掃描的度數，第四個參數設定好的畫筆Paint。 
　　接下來我們要著手繪製中間圖層，中間圖層可以看做是兩個上下外切的半圓，上邊白色右半圓，下邊黑色左半圓： 

                           

      同理，我們應該也是先確定外接四邊形的地區，然後在畫圓弧這裡就不再詳述。 

//繪製中介層上邊圓        mPaint.setColor(Color.BLACK);        rect= new RectF(getWidth()/2-getHeight()/4,0,getWidth() / 2 + getHeight() / 4, getHeight() /2);        canvas.drawArc(rect, 90, 180, false, mPaint);        //繪製中介層下邊圓        mPaint.setColor(Color.WHITE);        rect= new RectF(getWidth()/2-getHeight() / 4, getHeight() / 2, getWidth() / 2 + getHeight() / 4, getHeight());        canvas.drawArc(rect, 270, 180, false, mPaint);

      最後，最上邊圖層上下兩個小圓 

//繪製最上層白色小圓        mPaint.setColor(Color.WHITE);        canvas.drawCircle(getWidth() / 2, getHeight() / 4, getHeight() / 10, mPaint);        //繪製最上層黑色小圓        mPaint.setColor(Color.BLACK);        mPaint.setStyle(Paint.Style.FILL);        canvas.drawCircle(getWidth() / 2, getHeight() * 3 / 4, getHeight() / 10, mPaint);

      canvas.drawCircle是用來畫圓的，第一個參數是圓心x座標值，第二個參數是y座標值，第三個座標是圓的半徑，第四個是設定的畫筆。 
　　到此就畫出了一個太極圖。 

      附上自訂View的代碼 ：

package com.chuck.mobile.changecountview.widget;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.RectF;import android.util.AttributeSet;import android.view.View;/** * 項目名稱：changecountview * 類描述： * 建立人：Administrator * 建立時間：2015/12/11 16:37 * 修改人：Administrator * 修改時間：2015/12/11 16:37 * 修改備忘： */public class CustomeView extends View{    private Paint mPaint=new Paint();    private Path path=new Path();    private float degress=90;    public CustomeView(Context context) {        super(context);    }    public CustomeView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public CustomeView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    @Override    protected void onDraw(Canvas canvas) {        //繪製最外層大圓        mPaint.setColor(Color.BLACK);//設定畫筆顏色為黑色        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//設定畫筆style實心        RectF rect= new RectF(getWidth() / 2 - getHeight() / 2,                0, getWidth() / 2 + getHeight() / 2, getHeight());//圓弧的外接矩形        canvas.drawArc(rect, 270, 180, false, mPaint);        mPaint.setColor(Color.WHITE);//設定畫筆顏色為白色        canvas.drawArc(rect, 90, 180, false, mPaint);        //繪製中介層上邊圓        mPaint.setColor(Color.BLACK);        rect= new RectF(getWidth()/2-getHeight()/4,0,getWidth() / 2 + getHeight() / 4, getHeight() /2);        canvas.drawArc(rect, 90, 180, false, mPaint);        //繪製中介層下邊圓        mPaint.setColor(Color.WHITE);        rect= new RectF(getWidth()/2-getHeight() / 4, getHeight() / 2, getWidth() / 2 + getHeight() / 4, getHeight());        canvas.drawArc(rect, 270, 180, false, mPaint);        //繪製最上層白色小圓        mPaint.setColor(Color.WHITE);        canvas.drawCircle(getWidth() / 2, getHeight() / 4, getHeight() / 10, mPaint);        //繪製最上層黑色小圓        mPaint.setColor(Color.BLACK);        mPaint.setStyle(Paint.Style.FILL);        canvas.drawCircle(getWidth() / 2, getHeight() * 3 / 4, getHeight() / 10, mPaint);    }}

     然後在布局檔案中使用自訂View

<com.chuck.mobile.changecountview.widget.CustomeView        android:layout_width="match_parent"        android:layout_height="250dp"        android:background="@color/gray"/>

     如果想讓這個太極圖轉起來，方法有很多，可以使用動畫也可以通過旋轉畫布的方式實現。我自己使用了通過線程在旋轉畫布的方法。大家掌握了Android 2D繪圖技巧就可以繪製自己感興趣的圖案。