前言

Android是通過(guò)graphics類來(lái)顯示2D圖形的。其中g(shù)raphics中包括了Canvas、Paint、Color、Bitmap等類。graphics具有繪制點(diǎn)、線、顏色、2D幾何圖形、圖像處理等功能。其中Color和Bitmap是很常用的類，本文主要要講的是Canvas和Paint。顧名思義就是畫布和畫筆。

Canvas類

Canvas即畫布，我們需要做的就是使用之前設(shè)置好的Paint來(lái)繪制圖形。系統(tǒng)通過(guò) Canvas 為我們提供了一些基礎(chǔ)的繪圖 API ：　　

1、canvas.drawPoint(float x, float y, @NonNull Paint paint);

作用：繪制點(diǎn)。

參數(shù)：繪制點(diǎn)的 x 坐標(biāo)，y 坐標(biāo)，畫筆參數(shù)

2、canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint);

作用：繪制線。

參數(shù)：起點(diǎn)的 x 坐標(biāo)，起點(diǎn) y 坐標(biāo)，終點(diǎn) x 坐標(biāo)，終點(diǎn) y 坐標(biāo)，畫筆

3、canvas.drawRect(@NonNull RectF rect, @NonNull Paint paint);

作用：繪制矩形。

參數(shù)：矩形參數(shù)，畫筆參數(shù)

矩形參數(shù)構(gòu)造方法：如下代碼，分別為矩形的上下左右的坐標(biāo)

public RectF(float left, float top, float right, float bottom) {}

4、canvas.drawVertices();

作用：繪制多邊形。

參數(shù)：

5、canvas.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint);

作用：繪制弧線。

參數(shù)：左端，上端，右端，底部，開始的角度，掃過(guò)的角度，圓弧的兩段是否與圓心連線，畫筆參數(shù)

6、canvas.drawCircle(float cx, float cy, float radius, @NonNull Paint paint);

作用：繪制圓。

參數(shù)：圓心 x 坐標(biāo)，圓心 y 坐標(biāo)，半徑，畫筆參數(shù)

7、canvas.drawText();

作用：繪制文字

參數(shù)：文字左下角 x 坐標(biāo)，文字左下角 y 坐標(biāo)，

8、canvas.drawOval(float left, float top, float right, float bottom, @NonNull Paint paint);

作用：繪制橢圓

參數(shù)：左端，上端，右端，下端，畫筆參數(shù)

9、canvas.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,@NonNull Paint paint);

作用：繪制圓角矩形

參數(shù)：左端，上端，右端，下端，x軸上的圓角半徑，y 軸上的圓角半徑，畫筆參數(shù)

系統(tǒng)畫筆工具所提供的 API ：

1、mPaint.setAntiAlias();

設(shè)置反鋸齒

參數(shù)：true，false

2、mPaint.setColor();

設(shè)置畫筆顏色

參數(shù)：顏色值

3、mPaint.setARGB();

設(shè)置畫筆的 A,R,G,B

參數(shù)：A,R,G,B

4、mPaint.setAlpha();

設(shè)置畫筆的透明度

參數(shù)：取值范圍在 0 - 255 之間

5、mPaint.setTextSize();

設(shè)置畫筆文字的大小

參數(shù)：必須大于 0

6、mPaint.setStyle();

設(shè)置畫筆的風(fēng)格（填充和描邊）

參數(shù)：Paint.Style.FILL(填充)，Paint.Style.STROKE(描邊)，Paint.Style.FILL_AND_STROKE(填充和描邊)

7、mPaint.setStrokeWidth();

設(shè)置畫筆描邊時(shí)的寬度

參數(shù)：浮點(diǎn)型

Paint類

和日常繪圖一樣，要繪制圖形，首先得選擇合適的畫筆。那么同理android中繪圖首先得調(diào)整畫筆，按照自己的需要設(shè)置畫筆的相關(guān)屬性，系統(tǒng)給我提供的常用API如下：

• 　　setColor(); //設(shè)置畫筆的顏色
• 　　setAntiAlias(); //設(shè)置畫筆的鋸齒效果
• 　　setARGB(); //設(shè)置畫筆的A、R、G、B值
• 　　setAlpha(); //設(shè)置畫筆的Alpha值
• 　　setTextSize(); //設(shè)置字體的尺寸
• 　　setStyle(); //設(shè)置畫筆的風(fēng)格（空心或?qū)嵭模?/li>
• 　　setStrokeWidth(); //設(shè)置空心邊框的寬度
• 　　getColor(); //獲取畫筆的顏色

接下來(lái)我將通過(guò)繪制太極圖來(lái)學(xué)習(xí)Android繪圖機(jī)制。

先看看太極圖： 

現(xiàn)在就要開始一步一步的將他畫出來(lái)， 我們可以借鑒圖層的概念。首先繪制最底部的圖層，為了方便我們將其左，右兩邊分別設(shè)置白色和黑色： 

圖中（x，y）是圓心坐標(biāo)。這里我設(shè)置的x=getWidth() / 2；y=getHeight() / 2；半徑r=getHeight() / 2；

現(xiàn)在我們就來(lái)看看代碼，在定義View的OnDraw（Canvas canvas）方法中： 

//繪制最外層大圓
 mPaint.setColor(Color.BLACK);//設(shè)置畫筆顏色為黑色
 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//設(shè)置畫筆style實(shí)心
 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);//設(shè)置畫筆顏色為白色
 canvas.drawArc(rect, 90, 180, false, mPaint);

代碼中rect即圓的外接四邊形，其構(gòu)造函數(shù)RectF(float left, float top, float right, float bottom)的四個(gè)參數(shù)分別對(duì)應(yīng)四邊形最左邊的x坐標(biāo)值；左上邊的y坐標(biāo)值；最右邊的x坐標(biāo)值；最下邊的y坐標(biāo)值?？梢钥闯龃a中： 

 left=getWidth() / 2 - getHeight() / 2； 
 top=0； 
 right=getWidth() / 2 + getHeight() / 2； 
 bottom=getHeight()； 

四個(gè)值確定了圓的外接四邊形。

canvas.drawArc(rect, 90, 180, false, mPaint);第一個(gè)參數(shù)即是我們上邊確定的區(qū)域，第二個(gè)參數(shù)是開始繪制的角度（90度，ｘ軸方向順時(shí)針旋轉(zhuǎn)），第三個(gè)參數(shù)掃描的度數(shù)，第四個(gè)參數(shù)設(shè)置好的畫筆Paint。

接下來(lái)我們要著手繪制中間圖層，中間圖層可以看做是兩個(gè)上下外切的半圓，上邊白色右半圓，下邊黑色左半圓：

同理，我們應(yīng)該也是先確定外接四邊形的區(qū)域，然后在畫圓弧這里就不再詳述。

//繪制中間層上邊圓
 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);

最后，最上邊圖層上下兩個(gè)小圓

//繪制最上層白色小圓
 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是用來(lái)畫圓的，第一個(gè)參數(shù)是圓心x坐標(biāo)值，第二個(gè)參數(shù)是y坐標(biāo)值，第三個(gè)坐標(biāo)是圓的半徑，第四個(gè)是設(shè)置的畫筆。

到此就畫出了一個(gè)太極圖。

附上自定義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;

/**
 * 項(xiàng)目名稱：changecountview
 * 類描述：
 * 創(chuàng)建人：Administrator
 * 創(chuàng)建時(shí)間：2015/12/11 16:37
 * 修改人：Administrator
 * 修改時(shí)間：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);//設(shè)置畫筆顏色為黑色
 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//設(shè)置畫筆style實(shí)心
 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);//設(shè)置畫筆顏色為白色
 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"/>

如果想讓這個(gè)太極圖轉(zhuǎn)起來(lái)，方法有很多，可以使用動(dòng)畫也可以通過(guò)旋轉(zhuǎn)畫布的方式實(shí)現(xiàn)。我自己使用了通過(guò)線程在旋轉(zhuǎn)畫布的方法。大家掌握了Android 2D繪圖技巧就可以繪制自己感興趣的圖案。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)各位Android開發(fā)者們能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論