Android 2D繪圖解析 Canvas，Paint

（轉載自：http://blog.csdn.net/leejizhou/article/details/51524948 李濟洲的部落格 )

【Android 2D繪圖解析】系列文章将全面介紹Android繪圖相關，這篇簡單介紹下如何利用Android API進行一些簡單圖形的繪制，繪圖的前提是需要繼承自View，然後重寫它的onDraw(Canvas canvas) 方法即可。

首先我們建立一個類繼承自View，并重寫onDraw方法。

package com.leejz.androiddrawing;
//blog:www.lijizhou.com

public class CustomView extends View {

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

然後在Layout中進行添加此View

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.leejz.androiddrawing.MainActivity">

    <com.leejz.androiddrawing.CustomView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

這樣一個大體的自定義View的流程就搭建起來了，當然現在運作會顯示一片空白，因為我們還沒在onDraw方法進行任何的繪制，進行繪制前需要了解兩個API，Canvas和Paint。

Canvas翻譯成中文就是畫布的意思，Canvas負責進行繪制各種各樣的圖形，它有如下的一些繪制圖形方法

drawArc 繪制弧
drawBitmap 繪制位圖
drawCircle 繪制圓形
drawLine 繪制線
drawOval 繪制橢圓
drawPath 繪制路徑
drawPoint 繪制一個點
drawPoints 繪制多個點
drawRect 繪制矩形
drawRoundRect 繪制圓角矩形
drawText 繪制字元串
drawTextOnPath 沿着路徑繪制字元串

…更多的繪制方法參考 https://developer.android.com/reference/android/graphics/Canvas.html （需要科學上網）

Paint翻譯成中文有油漆塗料的意思，Paint主要負責設定繪圖的風格，包括畫筆的顔色，粗細，填充風格等，它有如下的一些設定方法。

setARGB/setColor 設定顔色
setAlpha 設定透明度
setAntiAlias 設定是否抗鋸齒
setShader 設定畫筆的填充效果
setShadowLayer 設定陰影
setStyle 設定畫筆風格
setStrokeWidth 設定空心邊框的寬度
setTextSize 設定繪制文本時文字的大小

…更多的設定方法參考 https://developer.android.com/reference/android/graphics/Paint.html（需要科學上網）

我們利用上面的API進行一些簡單的繪圖

繪制圓形：drawCircle(float cx, float cy, float radius, Paint paint)

cx>圓心的x坐标

cy>圓心的y坐标

radius>圓的半徑

paint>繪制風格

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint=new Paint();
        //去鋸齒
        paint.setAntiAlias(true);
        //設定顔色
        paint.setColor(getResources().getColor(android.R.color.holo_blue_light));
        //繪制普通圓
        canvas.drawCircle(,,,paint);
        //設定空心Style
        paint.setStyle(Paint.Style.STROKE);
        //設定空心邊框的寬度
        paint.setStrokeWidth();
        //繪制空心圓
        canvas.drawCircle(,,,paint);
    }

運作效果：

Android 2D繪圖解析 Canvas，Paint

繪制矩形：drawRect(float left, float top, float right, float bottom, Paint paint) / drawRect(RectF rect, Paint paint)

left>矩形left的x坐标

top>矩形top的y坐标

right>矩形right的x坐标

bottom>矩形bottom的y坐标

paint>繪制風格

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        //去鋸齒
        paint.setAntiAlias(true);
        //設定顔色
        paint.setColor(getResources().getColor(android.R.color.holo_blue_light));
        //繪制正方形
        canvas.drawRect(, , , , paint);
        //上面代碼等同于
        //RectF rel=new RectF(100,100,300,300);
        //canvas.drawRect(rel, paint);

        //設定空心Style
        paint.setStyle(Paint.Style.STROKE);
        //設定空心邊框的寬度
        paint.setStrokeWidth();
        //繪制空心矩形
        canvas.drawRect(, , , , paint);
    }

運作效果：

Android 2D繪圖解析 Canvas，Paint

繪制圓角矩形：drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) / drawRoundRect(RectF rect, float rx, float ry, Paint paint)

left>圖形left的x坐标

top>圖形top的y坐标

right>圖形right的x坐标

bottom>圖形bottom的y坐标

rx>x方向的圓角半徑

ry>y方向的圓角半徑

paint>繪制風格

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        //去鋸齒
        paint.setAntiAlias(true);
        //設定顔色
        paint.setColor(getResources().getColor(android.R.color.holo_blue_light));
        //繪制圓角矩形
        canvas.drawRoundRect(, , , , , , paint);
        //上面代碼等同于
        //RectF rel=new RectF(100,100,300,300);
        //canvas.drawRoundRect(rel,30,30,paint);
        //設定空心Style
        paint.setStyle(Paint.Style.STROKE);
        //設定空心邊框的寬度
        paint.setStrokeWidth();
        //繪制空心圓角矩形
        canvas.drawRoundRect(, , , , , , paint);

    }

運作效果

Android 2D繪圖解析 Canvas，Paint

繪制橢圓：drawOval(float left, float top, float right, float bottom, Paint paint)

left>圖形left的x坐标

top>圖形top的y坐标

right>圖形right的x坐标

bottom>圖形bottom的y坐标

paint>繪制風格

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        //去鋸齒
        paint.setAntiAlias(true);
        //設定顔色
        paint.setColor(getResources().getColor(android.R.color.holo_orange_dark));
        //繪制橢圓
        canvas.drawOval(, , , , paint);
        //設定空心Style
        paint.setStyle(Paint.Style.STROKE);
        //設定空心邊框的寬度
        paint.setStrokeWidth();
        //繪制空心橢圓
        canvas.drawOval(, , , , paint);
    }

運作效果：

Android 2D繪圖解析 Canvas，Paint

繪制弧：drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

oval>指定圓弧的外輪廓矩形區域

startAngle>圓弧起始角度，機關為度

sweepAngle>圓弧掃過的角度，順時針方向，機關為度

useCenter>如果為True時，在繪制圓弧時将圓心包括在内，通常用來繪制扇形

paint>繪制風格

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        //去鋸齒
        paint.setAntiAlias(true);
        //設定顔色
        paint.setColor(getResources().getColor(android.R.color.holo_orange_dark));
        RectF rel = new RectF(, , , );
        //實心圓弧
        canvas.drawArc(rel, , , false, paint);
        //實心圓弧 将圓心包含在内
        RectF rel2 = new RectF(, , , );
        canvas.drawArc(rel2, , , true, paint);
        //設定空心Style
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth();

        RectF rel3 = new RectF(, , , );
        canvas.drawArc(rel3, , , false, paint);

        RectF rel4 = new RectF(, , , );
        canvas.drawArc(rel4, , , true, paint);

    }

運作效果

Android 2D繪圖解析 Canvas，Paint

繪制文字：drawText(String text, float x, float y, Paint paint)

text>文本

x>文本origin的x坐标

y>文本baseline的y坐标

paint>繪制風格

*origin和baseline示意圖

Android 2D繪圖解析 Canvas，Paint

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        //去鋸齒
        paint.setAntiAlias(true);
        //設定顔色
        paint.setColor(getResources().getColor(android.R.color.holo_orange_dark));
        paint.setTextSize();
        //繪制文本
        canvas.drawText("jEh", , , paint);
    }

運作效果：

Android 2D繪圖解析 Canvas，Paint

OK，Android繪圖系列的第一篇關于Canvas和Paint就簡單介紹到這，Canvas更多種類的繪圖效果可以參考官方文檔并動手實踐效果，歡迎大家在下方留言，也可以點選左上角的關注。

Android 2D繪圖解析 Canvas，Paint

繼續閱讀

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

android 主線程的相關問題

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯