2. 程式人生 > >自定義控制元件（二）Paint，Canvas 基礎用法

自定義控制元件（二）Paint，Canvas 基礎用法

阿新 • • 發佈：2019-02-12

本篇部落格繼續學習 Paint 和 Canvas 的基礎用法，上一篇部落格學習了基礎API使用（ 基礎幾何圖形，Path 路徑 ），接下來學習 繪製文字 和 繪製圖片
上一篇文章，沒看的有必要先了解一下：
自定義控制元件（一）Paint，Canvas 基礎用法 - Path函式大全，Canvas繪製基本幾何圖形

canvas 繪製 圖片Bitmap

drawBitmap
void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

引數
float left：距離控制元件左邊緣距離 類似起始座標X
float top：距離控制元件上邊緣距離 類似起始座標Y

這個函式很簡單，直接指定 top ,left 值，將整個圖片繪製出來

    Paint mPaint = new Paint();

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon_man);
    canvas.drawBitmap(bitmap, 50, 50, mPaint);

這裡寫圖片描述

void drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)

引數
Rect src：對原圖片的裁剪區域
RectF dst：將（裁剪完的）原圖片繪製到View控制元件上的區域

第2個引數：需要將圖片哪個區域進行裁剪，如果傳 null 或者 bitmap.getWidth/bitmap.getHeight 表示不裁剪，將原圖完整繪製
第3個引數：處理後的圖片需要繪製到View控制元件上的哪個區域，圖片小於指定區域-放大；圖片大於指定區域-縮小

    Paint mPaint = new Paint();
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon_man);
    canvas.drawBitmap(bitmap, null, new RectF(0, 0, getWidth() / 2, getHeight() / 2), mPaint);

獲取一張圖片，將原圖片繪製在 new RectF(0, 0, getWidth() / 2, getHeight() / 2) View寬高一半的矩形區域裡

這裡寫圖片描述

    Paint mPaint = new Paint();
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon_man);
    canvas.drawBitmap(bitmap, new Rect(50, 50, 100, 100), new RectF(0, 0, getWidth() / 2, getHeight() / 2), mPaint);

獲取一張圖片，在原圖片上擷取內容 new Rect(50, 50, 100, 100) ，繪製在View寬高一半的矩形區域裡

這裡寫圖片描述 這裡寫圖片描述

Matrix
void drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

引數
Matrix matrix：矩陣 最根本的作用就是座標轉換
這是一個大學問啊，涉及到數學，就單單Android的Matrix單獨一篇博文都說不完，這裡先忽略不是重點可以檢視Android Matrix

基本變換有4種:
- 平移(Translate)
- 縮放(Scale)
- 旋轉(Rotate)
- 傾斜(Skew)

boolean postScale(float sx, float sy)
boolean postScale(float sx, float sy, float px, float py)

引數
float sx：X軸縮放倍數 大於1放大，小於1縮小 小於0對稱變化（鏡子，倒影）
float sy：Y軸縮放倍數 同上
float px：縮放的中心點X 預設原點（0，0）
float py：縮放的中心點Y 同上

    Paint mPaint = new Paint();
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon_man);
    Matrix matrix = new Matrix();
    matrix.postScale(2, 2);
    //放大2倍效果
    canvas.drawBitmap(bitmap, matrix, mPaint);
    //繪製原圖
    canvas.drawBitmap(bitmap, 0, 0, mPaint);

將影象放大2倍繪製，後面再繪製原圖做對比

這裡寫圖片描述

boolean postTranslate(float dx, float dy)

引數
float dx：X軸位移數值
float dy：Y值位移數值

    Paint mPaint = new Paint();
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon_man);
    //繪製原圖
    canvas.drawBitmap(bitmap, 0, 0, mPaint);
    //平移圖片
    Matrix matrix = new Matrix();
    matrix.postTranslate(bitmap.getWidth(), bitmap.getHeight());
    canvas.drawBitmap(bitmap, matrix, mPaint);

這裡寫圖片描述

boolean postRotate(float degrees)
boolean postRotate(float degrees, float px, float py)

引數
float degrees：旋轉角度
float px：旋轉中心X座標 預設（0，0）
float py：旋轉中心Y座標 預設（0，0）

    Paint mPaint = new Paint();
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon_man);
    //繪製原圖
    canvas.drawBitmap(bitmap, 0, 0, mPaint);
    //繪製邊框區分原圖
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(5);
    canvas.drawRect(new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight()), mPaint);
    //旋轉圖片
    Matrix matrix = new Matrix();
    matrix.postRotate(45, bitmap.getWidth() / 2, bitmap.getHeight() / 2);
    canvas.drawBitmap(bitmap, matrix, mPaint);

程式碼很簡單，先繪製一張原圖，然後重新設定畫筆，繪製邊框用來區分底部的原圖，最後繪製旋轉後的圖片

這裡寫圖片描述

boolean postSkew(float kx, float ky)
boolean postSkew(float kx, float ky, float px, float py)

引數
float kx：X軸傾斜值 大於0向左傾斜，小於0向右傾斜
float ky：Y軸傾斜值 大於0向下傾斜，小於0向上傾斜
float px：傾斜依據點X，預設（0，0）左上角
float py：傾斜依據點Y，預設（0，0）左上角

    Paint mPaint = new Paint();
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon_man);
    //繪製原圖
    canvas.drawBitmap(bitmap, 0, 0, mPaint);
    //繪製邊框區分原圖
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(5);
    canvas.drawRect(new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight()), mPaint);
    //傾斜圖片
    Matrix matrix = new Matrix();
    matrix.postSkew(-0.5f, 0, 0, bitmap.getHeight());
    canvas.drawBitmap(bitmap, matrix, mPaint);

繪製一張原圖，加上邊框區分，變換矩陣，以圖片左下角為依據點，只傾斜X軸 效果如下
這裡寫圖片描述

canvas 繪製 文字

文字繪製是自定義控制元件中最常用的功能，這裡分兩部分講 paint 和 canvas

paint 畫筆屬性也可以改變很多文字的屬性和樣式 （ 摘自網路 ）

    Paint paint=new Paint();
    paint.setColor(Color.RED);  //設定畫筆顏色

    //普通設定
    paint.setStrokeWidth (5);//設定畫筆寬度
    paint.setAntiAlias(true); //指定是否使用抗鋸齒功能
    paint.setStyle(Paint.Style.FILL);//繪圖樣式，對於設文字和幾何圖形都有效
    paint.setTextAlign(Paint.Align.CENTER);//設定文字對齊方式，取值：align.CENTER、align.LEFT或align.RIGHT
    paint.setTextSize(12);//設定文字大小

    //樣式設定
    paint.setFakeBoldText(true);//設定是否為粗體文字
    paint.setUnderlineText(true);//設定下劃線
    paint.setTextSkewX((float) -0.25);//設定字型水平傾斜度，普通斜體字是-0.25
    paint.setStrikeThruText(true);//設定帶有刪除線效果

    //其它設定
    paint.setTextScaleX(2);//只會將水平方向拉伸，高度不會變

這個是畫筆 paint 相關的 api 都比較簡單，多用記住就好了，就不一一貼效果圖了（好多，懶了），其中設定下劃線 setUnderlineText ，刪除線 setStrikeThruText 應該會用的比較多。

繪製文字drawText

void drawText(String text, float x, float y, Paint paint)

引數
String text：目標文字
float x：繪製原點 x 座標
float y：繪製原點 y 座標

    Paint mPaint = new Paint();
    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(2);
    mPaint.setTextSize(60);

    //垂直方向中線
    canvas.drawLine(0, getHeight() / 2, getWidth(), getHeight() / 2, mPaint);

    mPaint.setColor(Color.RED);

    String text = "Loading";
    float x = getWidth() / 2;//寬度一半
    float y = getHeight() / 2;//高度一半
    canvas.drawText(text, x, y, mPaint);

這段程式碼是在控制元件寬度1/2，高度1/2處開始繪製文字，中間新增一條中線作為輔助理解

這裡寫圖片描述

一般而言，(x，y)所代表的位置是所畫圖形對應的矩形的左上角點。通過上圖，可以看出我們實際畫出的效果並不是我們想象的那樣，因為在 drawText 這個 y 非常特殊，它代表的是基線的位置

那麼問題來了什麼是基線？ 小時候我們寫拼音用的本子四線格，我們都是從第三行開始寫的，這一行就是基線。 （圖片來源於網路)

這裡寫圖片描述

其他函式

void drawText(char[] text, int index, int count, float x, float y, Paint paint)
void drawText(String text, int start, int end, float x, float y, Paint paint)
void drawText(CharSequence text, int start, int end, float x, float y, Paint paint)

引數
char[] text：字元陣列
int index：開始下標
int count：參與繪製的字元個數
int start：起始下標
int end：結束下標

這幾個函式比較簡單，常用來擷取字元或者字串，不再示例

根據路徑繪製文字 drawTextOnPath

void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)
void drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

引數
Path path：路徑 前面說過，參考前面
float hOffset：與路徑起始點的水平偏移距離
float vOffset：與路徑中心的垂直偏移量

    Paint mPaint = new Paint();
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(5);
    mPaint.setTextSize(50);

    Path path = new Path();
    path.addRect(100, 200, 300, 600, Path.Direction.CCW);//逆時針

    Path path2 = new Path();
    path2.addRect(600, 200, 800, 600, Path.Direction.CCW);//逆時針

    canvas.drawPath(path, mPaint);
    canvas.drawPath(path2, mPaint);

    mPaint.setColor(Color.BLACK);

    canvas.drawTextOnPath("幸福別等", path, 0, 0, mPaint);
    canvas.drawTextOnPath("幸福別等", path2, 100, 100, mPaint);

繪製第一個圓形路徑，然後根據原型路徑繪製文字，繪製第二個圓形路徑，設定偏移量，再根據路徑繪製文字。

這裡寫圖片描述

字型樣式設定（Typeface）

字型樣式設定，這個功能很常用，系統預設會有一個字型樣式，如果開發者想要設定文字字型，需要引入一個字型檔案，根據路徑獲取字型，然後設定 Typeface

建立

    Typeface    create(String familyName, int style) //直接通過指定字型名來載入系統中自帶的文字樣式
    Typeface    create(Typeface family, int style)     //通過其它Typeface變數來構建文字樣式
    Typeface    createFromAsset(AssetManager mgr, String path) //通過從Asset中獲取外部字型來顯示字型樣式
    Typeface    createFromFile(String path)//直接從路徑建立
    Typeface    createFromFile(File path)//從外部路徑來建立字型樣式
    Typeface    defaultFromStyle(int style)//建立預設字型

Style列舉值

Typeface.NORMAL  //正常體
Typeface.BOLD    //粗體
Typeface.ITALIC  //斜體
Typeface.BOLD_ITALIC //粗斜體

如果是自定義字型樣式，首先在 assets 下建一個資料夾，命名為 fonts，然後將字型檔案huakangshaonv.ttf 放入其中，網上可以下載各種各樣的字型

    Paint mPaint = new Paint();
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(5);
    mPaint.setTextSize(50);

    AssetManager assetManager = getResources().getAssets();//得到AssetManager
    Typeface typeface = Typeface.createFromAsset(assetManager, "fonts/huakangshaonv.ttf");//獲取字型
    mPaint.setTypeface(typeface);//設定字型樣式

    canvas.drawText("Ruffian-痞子 010101", 100, 100, mPaint);

這裡寫圖片描述

很簡單也和使用，很自然的我又要安利一下我的一個開源專案了，很輕便的一個TextView封裝，其中也用到了字型樣式設定 RTextView

好了基礎的用法就先到這裡吧，把這些基礎的學會了，基本的繪圖應該沒什麼問題，如果有，那就繼續博主的後續文章，會不斷更新自定義控制元件繪製方面的知識

由於都是基礎API的說明和示例，本人也是根據網路學習參考而來，寫作思路參考了 啟艦
很喜歡他對這種基礎API的說明方式，圖文並茂，深入淺出，如果寫作思路的參考造成了對 啟艦 的侵權，我將關閉相關部落格

相關推薦

自定義控制元件（二）Paint，Canvas 基礎用法

本篇部落格繼續學習 Paint 和 Canvas 的基礎用法，上一篇部落格學習了基礎API使用（ 基礎幾何圖形，Path 路徑 ），接下來學習 繪製文字 和 繪製圖片 上一篇文章，沒看的有必要先了解一下： 自定義控制元件（一）Paint，Canvas 基礎用

編寫Qt Designer自定義控制元件（二）——編寫自定義控制元件介面

        既然是控制元件，就應該有介面，預設生成的控制元件類只是一個繼承了QWidget的類，如下： #ifndef LOGLATEDIT_H #define LOGLATEDIT_H #include <QWidget> class LogLat

Android自定義控制元件（二）-給自定義控制元件新增事件

在這篇部落格中主要講解給Android自定義控制元件新增點選事件，實現可以按住百分比圓圈在螢幕上進行拖動圓圈的功能。分兩部分講，第一部分是獲取自定義控制元件的座標，第二部分是重新繪製控制元件。 第一部分：獲取自定義控制元件座標 首先看一張圖，這是自定義控制元件中獲

WPF -- 自定義控制元件 （UserControl）（二 上）

在這裡我們將將打造一個UserControl(使用者控制元件)來逐步講解如何在WPF中自定義控制元件,並將WPF的一些新特性引入到自定義控制元件中來. 我們製作了一個帶語音報時功能的鐘表控制元件, 效果如下: 在VS中右鍵單擊你的專案,點選"新增新專案",在出現的選擇列表中選

WPF自定義控制元件（一）の控制元件分類

原文: WPF自定義控制元件（一）の控制元件分類 一、什麼是控制元件（Controls）         控制元件是指對資料和方法的封裝。控制元件可以有自己的屬性和方法，其中屬性是控制元件資料的簡單訪問者，方法則是控制元件的一些簡單而可見的功能、控制元件建

WPF自定義控制元件（四）の自定義控制元件

原文: WPF自定義控制元件（四）の自定義控制元件 在實際工作中，WPF提供的控制元件並不能完全滿足不同的設計需求。這時，需要我們設計自定義控制元件。 這裡LZ總結一些自己的思路，特性如下： Coupling UITemplate Behaviour Function Package

WPF自定義控制元件（五）の使用者控制元件（完結）

原文: WPF自定義控制元件（五）の使用者控制元件（完結） 使用者控制元件，WPF中是繼承自UserControl的控制元件，我們可以在裡面融合我們的業務邏輯。 示例：（一個厭惡選擇的使用者控制元件） 後端： using iMicClassBase; using iMicClassBase.B

自定義控制元件（14）---ViewGroup繪製的Padding、margin注意

ViewGroup測量子元素有關，其中measureChildWithMargins和measureChildren類似只是加入了對Margins外邊距的處理，ViewGroup提供對子元素測量的方法從measureChildren開始： measureChildren的邏

WPF -- 自定義控制元件 （概述）（一）

CustomControl, 其開發出來的控制元件才真正具有WPF風格,其對模板樣式有著很好的支援,這是因為打造CustomControl時做到了邏輯程式碼與外觀相分離,即使換上一套完全不同的視覺樹其同樣能很好的工作,就像WPF內建的控制元件一樣.在使用Visual Studio打造控制元件時,UserCon

Android自定義控制元件（一） 下拉重新整理，上拉分頁載入更多(支援ListView, GridView, ScrollView)

        首先說明，這幾篇文章是對一些前輩的成果進行學習後的心得總結。也借這種方式對他們表示謝意。         最近專案中好幾個模組都用到listview和gridview的下拉重新整理，上拉載入更多等功能，而且涉及到圖片的批量下載。水平有限，首先是想到找一些比較

自定義控制元件（6）---PorterDuffXfermode圖形過濾器之橡皮擦應用

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema

編寫Qt Designer自定義控制元件（一）——如何建立並使用Qt自定義控制元件

    http://blog.csdn.net/giselite/article/details/12622429   在使用Qt Designer設計窗體介面時，我們可以使用Widget Box裡的窗體控制元件非常方便的繪製介面，比如拖進去一個按鈕，一個文字編輯器等。雖然Qt Designer裡的控制元

自定義控制元件（2）---ColorMatrixColorFilter色彩矩陣顏色過濾器

可以通過Paint中大量的setter方法來為畫筆設定屬性 setColorFilter(ColorFilter filter) 設定顏色過濾，什麼意思呢？就像拿個篩子把顏色“濾”一遍獲取我們想要的色彩結果，這個方法需要我們傳入一個ColorFilter引數同樣也會返回一個

自定義控制元件（4）---PorterDuffColorFilter混合過濾器

PorterDuffColorFilter跟LightingColorFilter一樣，只有一個構造方法 PorterDuffColorFilter(int color, PorterDuff.Mode mode) 這個構造方法也接受兩個值，一個是16進製表示的顏色值這

Android自定義控制元件系列二：自定義開關按鈕（一）

這一次我們將會實現一個完整純粹的自定義控制元件，而不是像之前的組合控制元件一樣，拿系統的控制元件來實現；計劃分為三部分：自定義控制元件的基本部分，和自定義控制元件的自定義屬性； 下面就開始第一部分的編寫，本次以一個定義的開關按鈕為例，下面就開始吧： 先看看效果，一個點選開

自定義控制元件（顏色由綠色過渡到紅色的控制元件）

先寫一個顏色的過度（由綠色過度到紅色） **自定義控制元件的程式碼部分** public class OneView extends View { private Paint paint; private Canvas mConvas;

Qt之自定義控制元件（開關按鈕）

簡述 接觸過iOS系統的童鞋們應該對開關按鈕很熟悉，在設定裡面經常遇到，切換時候的滑動效果比較帥氣。 通常說的開關按鈕，有兩個狀態：on、off。 下面，我們利用自定義控制元件來實現一個開關按鈕。 原理 重寫滑鼠按下事件（mousePres

自定義控制元件（陰影，漸變）

一、陰影： Paint 類定義了一個名為 setShadowLayer 的方法： publicvoid setShadowLayer(float radius,float dx,float dy,int shadowColor)， 引數意義如下： radius：陰影半徑 d

自定義控制元件（Dialog篇）

自定義控制元件實現方式 本文中初步討論了關於原生Dialog實現方式，自定義Dialog樣式實現以及注意細節 基於Android Studio API 23開發 - 原生Dialog三種樣式實現方式 - 自定義Dialog實現方式 - 結束語

android自定義控制元件_完全自定義控制元件（自定義開關）

前面總結到自定義控制元件分為 組合控制元件 繼承已有控制元件 比如自定義SmartImageView繼承ImageView 完全自定義控制元件 上一篇寫了自定義控制元件的自定義屬性深入理解點選連結檢視，是自定控制元件比較難以理解的地方，但是是很重