2. 程式人生 > >Android 自定義控制元件之基礎幾何圖形繪製詳解

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

阿新 • • 發佈：2019-01-30

前言

距離寫上一篇自定義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其實並沒有什麼區別。
但是，如果把畫筆的寬度調寬一些：

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);

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

參考連結

相關推薦

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

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

Android 自定義控制元件-Canvas和Paint繪圖詳解-手把手帶你繪製一個時鐘.

,Android - Paint基礎 在自定義控制元件時，經常需要使用canvas、paint等，在canvas類中，繪畫基本都是靠drawXXX()方法來完成的，在這些方法中，很多時候都需要用到paint型別的引數， Paint作為一個非常重要的元素,功能

Android自定義控制元件之區域性圖片放大鏡--BiggerView

零、前言： 本文的知識點一覽 1.自定義控制元件及自定義屬性的寫法，你也將對onMesure有更深的認識 2.關於bitmap的簡單處理，及canvas區域裁剪 3.本文會實現兩個自定義控制元件:FitImageView(圖片自適應)和BiggerView(放大鏡)，前者為後者作為鋪墊。 4.最後會

Android自定義控制元件之仿汽車之家下拉重新整理

關於下拉重新整理的實現原理我在上篇文章Android自定義控制元件之仿美團下拉重新整理中已經詳細介紹過了，這篇文章主要介紹錶盤的動畫實現原理 汽車之家的下拉重新整理分為三個狀態： 第一個狀態為下拉重新整理狀態(pull to refresh)，在這個狀

Android自定義控制元件之《折線圖的繪製》

金融軟體裡的行情分時圖，這是我們最常見的折線圖，當然了，折線圖的用途並不僅僅侷限於此，像一般在一定區間內，為了更好的能顯示出幅度的變化，那麼用折線圖來展示無疑是最符合效果的，當然了，網上也有很多的第

Android自定義控制元件之實現滑動選擇開關

前言：今天我們仿照著Google給我們提供的Switch控制元件來進行一次模仿，自己動手打造一個可以換滑動圖片以及背景的圖片。 -----------------分割線--------------- 先看一下google提供的Switc控制元件： 其實用法很簡單就當普通的

Android 自定義控制元件之繼承view

一.自定義控制元件的型別:            1.繼承view（自繪檢視：view中的內容是我們自己繪製出來的，需要重寫onDraw方法）            2.繼承已有原生控制元件            3.自定義組合控制元件（將系統原生的控制元件組合到一起） 本

android自定義控制元件之圓形進度條（帶動畫）

首先貼上圖片： 額，感覺還行吧，就是進度條的顏色醜了點，不過咱是程式設計師，不是美工，配色這種問題當然不在考慮範圍之內了 下面說重點，如何來寫一個這樣的自定義控制元件。 首先，需要有一個灰色的底圖，來作為未填充時的進度條； 然後，根據傳入的當前進度值，繪製填充時的進度圓

Android自定義控制元件之百分比圓環進度條

首先我們先來看一下效果 分析 我們來看這個進度條應該分為3個小部分 1.中間的圓 2.外邊的圓環 3.中間的文字 分開畫 這3部分就是需要我們自己畫出來的，因此我們需要3根畫筆 //設定中心園的畫筆

Android自定義控制元件之圓形頭像

重寫ImageView public class CircleImageView extends ImageView { private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP; p

Android 自定義控制元件之命運之輪（抽獎轉盤）

1 思路 首先肯定是要繪製扇形的，每一個獎品為一個扇形區分開，然後在扇形中得有當前獎品的說明，最後讓這個輪盤轉起來就行了。說起來很簡單，但是在繪製的時候，特別是繪製文字的時候還有有一些細節需要注意的，也不是難點，只是要理清楚那些地方應該怎麼去畫，怎麼獲取需要繪製的座標。  

Android 自定義控制元件之ViewPager Indicator實現方式

介紹 ViewPager 的Indicator實現兩種效果 如下圖所示： 效果一 效果二 佈局檔案： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln

Android自定義控制元件之掃描動畫UI

前言 最近有一個需求，就是做一個掃描的UI，看了很多掃描動畫，發現酷狗的掃描動畫挺漂亮的，所以就做了一個相似的掃描動畫，廢話不多說，先看一下最終的效果吧。 最終效果圖 介紹 首先我們看一下這個效果，它由以下幾部分組成： 1.中間一個音符圖片

Android自定義控制元件之測量onMeasure

由上圖可知，語法角度：子類可以重寫onMeasure，只能繼承View的measure，setMeasuredDimension方法。測量流程分為兩種情況討論：容器控制元件ViewGroup，原始的View(非容器控制元件)。原始的View測量，只需要測量自己的寬高；而容器控制元件需要先測量所有的子View

Android 自定義控制元件之 繼承佈局檔案

首先定義一個layout實現按鈕內部佈局： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr

Android自定義控制元件之入門篇---整理網路上的資源

前言， 我的視訊系列 http://edu.csdn.net/course/detail/2741， 一起來學習Android… 本篇部落格主要是想要講解一下自定義控制元件如何入門，其中有好多資料資源來源自網路，綜合了網路上一些有些的博文

Android自定義控制元件之畫圓，並且修改其填充色

畫圓就是簡答呼叫了drawCircle的api public class Dot extends View { public Dot(Context context) { s

Android 自定義控制元件之打造流佈局實現熱門搜尋標籤

最終效果 首先來看看效果圖： 其他地方很好實現，就是熱門搜尋有點麻煩，由於資料的不確定性，那麼像GridView明顯不能滿足了，這時候就只能自己來定義一個佈局了。 最終實現後的效果： 具體實現 1，自定義一個類繼承

Android自定義控制元件之自定義TextView，實現drawableLeft可以和文字一起居中

LZ-Says：給大家推薦一個網站，有興趣可以查閱，想為大家貢獻一點自己的力量也可以投稿，老大稽核通過會發表，更好的幫助有需要的人~歡迎大家踴躍投稿~地址如下： http://ww

Android自定義控制元件之虛線的用法

Android實現畫虛線的方法 Android中可以通過DashPathEffect來實現，想知道關於PathEffect的詳細用法，請移步PathEffect的詳細用法 程式碼示例： PathE