Android學習教程之2D繪圖基礎(chǔ)及繪制太極圖
前言
Android是通過graphics類來顯示2D圖形的。其中g(shù)raphics中包括了Canvas、Paint、Color、Bitmap等類。graphics具有繪制點、線、顏色、2D幾何圖形、圖像處理等功能。其中Color和Bitmap是很常用的類，本文主要要講的是Canvas和Paint。顧名思義就是畫布和畫筆。
Canvas類
Canvas即畫布，我們需要做的就是使用之前設(shè)置好的Paint來繪制圖形。系統(tǒng)通過 Canvas 為我們提供了一些基礎(chǔ)的繪圖 API ：
1、canvas.drawPoint(float x, float y, @NonNull Paint paint);
作用：繪制點。
參數(shù)：繪制點的 x 坐標，y 坐標，畫筆參數(shù)
2、canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint);
作用：繪制線。
參數(shù)：起點的 x 坐標，起點 y 坐標，終點 x 坐標，終點 y 坐標，畫筆
3、canvas.drawRect(@NonNull RectF rect, @NonNull Paint paint);
作用：繪制矩形。
參數(shù)：矩形參數(shù)，畫筆參數(shù)
矩形參數(shù)構(gòu)造方法：如下代碼，分別為矩形的上下左右的坐標
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ù)：左端，上端，右端，底部，開始的角度，掃過的角度，圓弧的兩段是否與圓心連線，畫筆參數(shù)
6、canvas.drawCircle(float cx, float cy, float radius, @NonNull Paint paint);
作用：繪制圓。
參數(shù)：圓心 x 坐標，圓心 y 坐標，半徑，畫筆參數(shù)
7、canvas.drawText();
作用：繪制文字
參數(shù)：文字左下角 x 坐標，文字左下角 y 坐標，
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è)置畫筆的風格（填充和描邊）
參數(shù)：Paint.Style.FILL(填充)，Paint.Style.STROKE(描邊)，Paint.Style.FILL_AND_STROKE(填充和描邊)
7、mPaint.setStrokeWidth();
設(shè)置畫筆描邊時的寬度
參數(shù)：浮點型
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è)置畫筆的風格（空心或?qū)嵭模?/li>
- setStrokeWidth(); //設(shè)置空心邊框的寬度
- getColor(); //獲取畫筆的顏色
接下來我將通過繪制太極圖來學習Android繪圖機制。
先看看太極圖：
現(xiàn)在就要開始一步一步的將他畫出來， 我們可以借鑒圖層的概念。首先繪制最底部的圖層，為了方便我們將其左，右兩邊分別設(shè)置白色和黑色：
圖中（x，y）是圓心坐標。這里我設(shè)置的x=getWidth() / 2；y=getHeight() / 2；半徑r=getHeight() / 2；
現(xiàn)在我們就來看看代碼，在定義View的OnDraw（Canvas canvas）方法中：
//繪制最外層大圓 mPaint.setColor(Color.BLACK);//設(shè)置畫筆顏色為黑色 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//設(shè)置畫筆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);//設(shè)置畫筆顏色為白色 canvas.drawArc(rect, 90, 180, false, mPaint);
代碼中rect即圓的外接四邊形，其構(gòu)造函數(shù)RectF(float left, float top, float right, float bottom)的四個參數(shù)分別對應(yīng)四邊形最左邊的x坐標值；左上邊的y坐標值；最右邊的x坐標值；最下邊的y坐標值?？梢钥闯龃a中：
left=getWidth() / 2 - getHeight() / 2； top=0； right=getWidth() / 2 + getHeight() / 2； bottom=getHeight()；
四個值確定了圓的外接四邊形。
canvas.drawArc(rect, 90, 180, false, mPaint);第一個參數(shù)即是我們上邊確定的區(qū)域，第二個參數(shù)是開始繪制的角度（90度，ｘ軸方向順時針旋轉(zhuǎn)），第三個參數(shù)掃描的度數(shù)，第四個參數(shù)設(shè)置好的畫筆Paint。
接下來我們要著手繪制中間圖層，中間圖層可以看做是兩個上下外切的半圓，上邊白色右半圓，下邊黑色左半圓：
同理，我們應(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);
最后，最上邊圖層上下兩個小圓
//繪制最上層白色小圓 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是用來畫圓的，第一個參數(shù)是圓心x坐標值，第二個參數(shù)是y坐標值，第三個坐標是圓的半徑，第四個是設(shè)置的畫筆。
到此就畫出了一個太極圖。
附上自定義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
* 類描述：
* 創(chuàng)建人：Administrator
* 創(chuàng)建時間：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);//設(shè)置畫筆顏色為黑色
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//設(shè)置畫筆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);//設(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"/>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對各位Android開發(fā)者們能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Android權(quán)限HaloPermission詳細使用
這篇文章主要介紹了Android權(quán)限HaloPermission詳細使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Android開發(fā)ImageView圖片無法顯示解決過程
在Android中ImageView無法顯示加載的本地SDCard圖片：過程為先調(diào)用本地照相機程序攝像，然后將拍攝的圖片加載在ImageView中顯示，具體解決方法如下，感興趣的朋友可以參考下哈2013-06-06
Android Studio創(chuàng)建AIDL文件并實現(xiàn)進程間通訊實例
本篇文章主要介紹了Android Studio創(chuàng)建AIDL文件并實現(xiàn)進程間通訊實例，具有一定的參考價值，有興趣可以了解一下。2017-04-04
Android Tween動畫之RotateAnimation實現(xiàn)圖片不停旋轉(zhuǎn)效果實例介紹
Android中如何使用rotate實現(xiàn)圖片不停旋轉(zhuǎn)的效果，下面與大家共同分析下Tween動畫的rotate實現(xiàn)旋轉(zhuǎn)效果，感興趣的朋友可以參考下哈2013-05-05
Android基于BaseExpandableListAdapter實現(xiàn)的二級列表仿通話記錄功能詳解
這篇文章主要介紹了Android基于BaseExpandableListAdapter實現(xiàn)的二級列表仿通話記錄功能,結(jié)合具體實例形式分析了Android實現(xiàn)通話記錄功能的布局與功能相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
Android EditText默認不彈出輸入法的實現(xiàn)方法
下面小編就為大家分享一篇Android EditText默認不彈出輸入法的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Android自定義控件（實現(xiàn)視圖樹繪制指示器）
本文主要介紹了Android視圖樹繪制指示器的實現(xiàn)原理和具體步驟。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
基于android中讀取assets目錄下a.txt文件并進行解析的深入分析
本篇文章是對在android需要中讀取assets目錄下a.txt文件進行了詳細的分析介紹，需要的朋友參考下2013-05-05
android使用PullToRefresh實現(xiàn)下拉刷新和上拉加載
本篇文章主要介紹了android使用PullToRefresh實現(xiàn)下拉刷新和上拉加載，具有一定的參考價值，有興趣的可以了解一下。2016-12-12
Android開發(fā)之選項卡功能的實現(xiàn)方法示例
這篇文章主要介紹了Android開發(fā)之選項卡功能的實現(xiàn)方法,結(jié)合實例形式分析了Android選項卡功能的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2017-06-06