Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android 自定義控件之基礎幾何圖形繪制詳解

Android 自定義控件之基礎幾何圖形繪制詳解

編輯：關於Android編程

前言

距離寫上一篇自定義View文章已經大半年過去了，一直想繼續寫，但是無奈技術有限，生怕誤人子弟。這段時間項目剛剛完成，有點時間，跟著大神的腳步，鞏固下自定義View的相關基礎知識。

Canvas&Paint

Canvas和Paint可以理解為現實中的畫布和畫筆，這兩樣是繪圖必備，首先來詳細的了解下這兩個。

Paint常用函數

首先來看下Paint的常用函數：
* setColor(int color)：設置畫筆顏色。
* setStrokeWidth(float width)：設置畫筆寬度。
* setAntiAlias(boolean aa)：設置抗鋸齒。
* setStyle(Style style): 設置填充樣式。
* setShadowLayer(float radius, float dx, float dy, int shadowColor)：設置陰影。

設置畫筆顏色和畫筆寬度沒什麼可說的，設置抗鋸齒可以讓我們繪制的圖形更加圓滑，除了Paint的setAntiAlias()函數可以設置抗鋸齒外，也可以通過Canvas設置：

canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));

setStyle()

setStyle()函數可以設置如下參數：
* Paint.Style.STROKE：描邊。
* Paint.Style.FILL：填充內部。
* Paint.Style.FILL_AND_STROKE：填充內部和描邊。
新建個項目，在onDraw函數中分別繪制下，看下都有什麼區別：

protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.BLUE);
    mPaint.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(mLeftX, mLeftY, 100, mPaint);

    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(mLeftX * 4, mLeftY, 100, mPaint);

    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawCircle(mLeftX * 7, mLeftY, 100, mPaint);
}

運行結果：
這裡寫圖片描述

通過運行結果可以看到，貌似Paint.Style.FILL和Paint.Style.FILL_AND_STROKE其實並沒有什麼區別。
但是，如果把畫筆的寬度調寬一些：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> mPaint.setStrokeWidth(50); mPaint.setColor(Color.RED); mPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(mLeftX, mLeftY, 50, mPaint); mPaint.setColor(Color.BLACK); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); canvas.drawCircle(mLeftX * 4, mLeftY, 50, mPaint);

運行結果：
這裡寫圖片描述

可以看出看來，FILL_AND_STROKE其實會把寬度一起填充。

setShadowLayer()

setShadowLayer(float radius, float dx, float dy, int shadowColor)：
* radius：陰影傾斜度。
* dx：水平位移。
* dy：垂直位移。
* shadowColor：陰影顏色。
給文字繪制上陰影：

mPaint.setTextSize(50);
mPaint.setColor(Color.BLUE);
mPaint.setShadowLayer(5, 10, 10, Color.GREEN);
canvas.drawText("Airsaid", mLeftX, mLeftY, mPaint);

運行結果：
這裡寫圖片描述

Canvas常用函數

Canvas作為畫布，含有繪制各種圖形的函數，下面根據具體圖形來分類進行詳細講解。

繪制背景

drawColor(int)：繪制畫布背景。 drawRGB(int r, int g, int b)：同上。 drawARGB(int a, int r, int g, int b)：同上，四個參數取值范圍0~255。

繪制一條直線

drawLine(float startX, float startY,float stopX,float stopY,Paint paint)：
startX：開始x坐標。 startY：開始Y坐標。 stopX：結束x坐標。 stopY：結束Y坐標。 paint：繪制直線所用畫筆。
代碼實例： 
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
canvas.drawLine(0, 0, getWidth(), 0, mPaint);

運行結果：
這裡寫圖片描述

繪制多條直線

drawLines(float[] pts, Paint paint)：一般繪制多條直線。
pts：坐標點數據的集合，每４個為一組繪制一條直線。 paint：繪制直線所用畫筆。
代碼實例： 
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
float pts[] = {0, 10, getWidth(), 10, 0, 50, getWidth(), 50};
canvas.drawLines(pts, mPaint);

運行結果：
這裡寫圖片描述

drawLines(float[] pts, int offset, int count, Paint paint)：有選擇的繪制多條直線。
pts：坐標點數據的集合，每４個為一組繪制一條直線。 offset：跳過的數據個數，跳過的數據將不參與繪制過程。 conunt：實際參與繪制的數據個數。 paint：繪制直線所用畫筆。
代碼示例，跳過一條線的繪制： 
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
float pts[] = {0, 10, getWidth(), 10, 0, 50, getWidth(), 50};
canvas.drawLines(pts, 4, 4, mPaint);

運行結果：
這裡寫圖片描述

繪制單點

drawPoint(float x, float y,Paint paint)：繪制一個點。
x：點的x坐標。 y：點的y坐標。 paint：繪制點所用畫筆。
代碼示例： 
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
canvas.drawPoint(100, 100, mPaint);

運行結果：
這裡寫圖片描述

繪制多點

drawPoints(float[] pts, Paint paint)：繪制多個點。
pts：坐標點的數據集合，每兩個為一組繪制一個點。
代碼示例（繪制三個點）： 
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
float pts[] = {100, 100, 200, 100, 300, 100};
canvas.drawPoints(pts, mPaint);

運行結果：
這裡寫圖片描述

drawPoints(float[] pts, int offset, int count, Paint paint)： 有選擇的繪制多個點。
pts：參數同上，其他參數同繪制多條線一樣。
代碼示例（跳過第1個點，只繪制2個點）： 
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
float pts[] = {100, 100, 200, 100, 300, 100};
canvas.drawPoints(pts, 2, 4, mPaint);

運行結果：

這裡寫圖片描述

繪制矩形

drawRect(Rect r, Paint paint)：根據傳入的Rect繪制矩形。 drawRect(RectF rect, Paint paint)：根據傳入的RectF繪制矩形。 drawRect(float left, float top, float rigth, float bottom, Paint paint)：直接傳入矩形的四個點來繪制矩形。
代碼示例（分別使用以上函數繪制三個矩形）： 
mPaint.setColor(Color.RED);

Rect rect = new Rect(100, 30, 200, 100);
canvas.drawRect(rect, mPaint);

RectF rectF = new RectF(300, 30, 400, 100);
canvas.drawRect(rectF, mPaint);

canvas.drawRect(500, 30, 600, 100, mPaint);

其中Rect和RectF為矩形輔助類，可根據4個點構建一片矩形區域，用於幫助我們對矩形進行操作。

運行結果：
這裡寫圖片描述

繪制圓角矩形

drawRoundRect(RectF rect, float rx, float ry, Paint paint)： 根據傳入的RectF繪制圓角矩形。
rect：要繪制的矩形。 rx：x軸圓角橢圓半徑。 ry：y軸圓角橢圓半徑。 drawRoundRect(float left, float top, float rigth, float bottom, float rx, float ry, Paint paint)：直接傳入矩形的四個點來繪制圓角矩形，從API21開始提供。
參數同上。
代碼實例（根據以上函數分別繪制圓角矩形）： 
mPaint.setColor(Color.RED);
RectF rectF = new RectF(0, 0, 300, 100);
canvas.drawRoundRect(rectF, 30f, 30f, mPaint);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawRoundRect(400f, 0f, 700f, 100f, 30f, 30f, mPaint);
}

其中，由於直接傳入矩形的四個點來繪制圓角矩形的函數是在API21才開始提供，所以進行了判斷。
運行結果：
這裡寫圖片描述

繪制圓形

drawCircle(float cx,float cy,float radius,Paint paint)：
cx：圓心點x軸坐標。 cy：圓心點y軸坐標。 radius：圓的半徑。 paint：繪制圓形所用畫筆。
代碼示例： 
mPaint.setColor(Color.RED);
canvas.drawCircle(100f, 50f, 50f, mPaint);

運行結果：
這裡寫圖片描述

繪制橢圓

drawOval(RectF oval, Paint paint)：根據矩形對象繪制橢圓。
oval：矩形對象。橢圓根據該矩形對象生成，以矩形的長作為橢圓的x軸，寬為y軸。 drawOval(float left, float top, float rigth, float bottom, Paint paint)：直接傳入矩形的四個點來繪制橢圓，從API21開始提供。
參數同上。
代碼示例： 
mPaint.setColor(Color.RED);
RectF rectF = new RectF(50, 0, 200, 100);
canvas.drawOval(rectF, mPaint);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawOval(300, 0, 450, 100, mPaint);
}

運行結果：
這裡寫圖片描述

繪制弧形

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)：
oval：矩形對象。 startAngle：弧形開始的角度。 sweepAngle：弧形持續的角度。 useCenter：是否有弧形的兩邊。 paint：繪制弧形的畫筆。 drawArc(float left, float top, float rigth, float bottom,float startAngle, float sweepAngle, boolean useCenter, Paint paint)：
參數同上。
代碼實例： 
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.STROKE);
RectF rectF = new RectF(50, 0, 200, 100);
canvas.drawArc(rectF, 0f, 180f, false, mPaint);

RectF rectF2 = new RectF(250, 0, 400, 100);
canvas.drawArc(rectF2, 0f, 180f, true, mPaint);

RectF rectF3 = new RectF(450, 0, 600, 100);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawArc(rectF3, 0f, 180f, true, mPaint);

運行結果：
這裡寫圖片描述

參考鏈接

https://developer.android.com/ http://blog.csdn.net/harvic880925/article/details/38875149
  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
android自定義對話框工具類 魅藍e和魅藍note3哪個好 魅藍e和魅藍note3有什麼區別 很詳細的android序列化過程Parcelable Android中如何實現多行、水平滾動的分頁的Gridview？ 學習Android從0開始之背景篇-Android系統介紹 自定義點擊狀態欄返回
一步一步學android控件（之二十七）—— SlidingDrawer

對於SlidingDrawer，官網上是這樣解釋的：SlidingDra
如何寫一個正經的Android音樂播放器 一

以前寫過很多次音樂播放器，但是總有一些問題出現，例如： 1，音樂長時間播
Android TV開發 構建一個TVapp的焦點控制

github對應地址：https://github.com/hejunl
Android入門之ActivityGroup+GridView實現Tab分頁標簽的方法

在Android程序中很多客戶端軟件和浏覽器軟件都喜歡用Tab分頁標簽來
閱讀排行版
Copyright © Android教程網 All Rights Reserved