前言：該系列文章為記錄學習扔物線(總是叫成拋物線。大佬別怪我)自定義View系列文章的學習筆記，兩個目的：一是總結自己在學習過程中遇到的疑難點；二是希望能讓自己通過寫博客的方式持之以恒的學下去。

---

感謝扔物線大佬提供了這么優質的項目供我們學習！

---

二話不說，我也反手就是一個扔物線大佬的自定義View項目傳送門：HenCoder，給高級Android工程師的進階手冊

---

首先了解三個東西：

Canvas
Canvas翻譯過來為畫布，從字面就可以看出來它的意思就是我們所有需要繪制的東西都是在Canvas上的，這個也是自定義繪制的關鍵，它有兩類方法：
繪制類
drawXXX()方法，畫線、畫圓、畫點、畫路線等等，繪制各種圖形的方法應有盡有，需要配合Paint(下面介紹)使用。
輔助類
范圍的裁切：舉個例子：

這是我使用CSDN點擊修改頭像時的截圖，底部是我選擇的完整圖片，白色虛線就是裁切的范圍，點擊提交后只會保存這個范圍內的部分。相當于拿一把剪刀將不需要的部分剪掉。當然，裁切的大小、樣式(正方形、圓形、五角星)都可以通過canvas完成。
幾何變換：在生活中的繪畫，畫完后的畫布我們可以將其任意翻折、旋轉，在canvas中我們能做的遠比我們想象的多。

Paint
我又要實力翻譯一波：畫筆，有了畫布，還需要一只筆來進行作畫，paint就是這個作用，它可以控制我們將要繪制的顏色、粗細、實心空心等等，能做的也非常多，后面慢慢記錄。

onDraw()方法
前面的canvas和paint需要在View的onDraw()方法中使用，我們可以在這個方法中控制先畫哪個再畫哪個，把我們要畫的東西覆蓋在View上方還是作為View的背景？這就是onDraw()。

---

預備知識：坐標系
首先講一下坐標系(這里的坐標系是相對于自定義View的)，每一個View都有自己的坐標系，原點是View自身的左上角，x軸和我們中學學的一樣，水平方向左負右正，y軸的正負方向與中學的數學坐標系不一樣，豎直方向，上負下正：

---

Canvas的繪制方法

• drawColor(@ColorInt int color)
  把整個畫布填充上指定顏色。

// 繪制黑色 canvas.drawColor(Color.BLACK);

// 繪制藍色 canvas.drawColor(Color.BLUE);

• drawCircle(float centerX, float centerY, float radius, Paint paint)：繪制圓形
  centerX、centerY為圓的圓心所在的坐標，radius為圓的半徑

canvas.drawCircle(300,300,250,paint)

另外在Hencoder中這里把Paint的某些設置也提及了，我就把Paint先放一放，后面的筆記再回顧并且集中記錄。

• drawRect(float left, float top, float right, float bottom, Paint paint)：繪制矩形
  left, top, right, bottom 是矩形四條邊的坐標。

canvas.drawRect(100, 100, 500, 500, paint);

• drawPoint(float x, float y, Paint paint)：繪制點
  x、y同樣是點的坐標，但是點的大小和形狀就要通過paint來實現了。點的大小通過paint.setStrokeWidth(width)設置，點的形狀通過paint.setStrokeCap(cap) 設置：Paint.Cap.ROUND是圓點，Paint.Cap.SQUARE或者Paint.Cap.BUTT是方形的點。

paint.setStrokeWidth(50); // 50px大小的點 paint.setStrokeCap(Paint.Cap.ROUND); // 圓形 canvas.drawPoint(100, 100, paint); // 繪制在(100,100)坐標上paint.setStrokeWidth(100); // 100px大小的點 paint.setStrokeCap(Paint.Cap.SQUARE); // 方形 canvas.drawPoint(300, 100, paint); // 繪制在(300,100)坐標上

這里的繪制圓點、方點，既可以通過drawPoint實現，也可以通過drawCircle和drawRect實現。

• drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint)：批量繪制點
  這個方法可以繪制多個點。pts是點的坐標數組，每兩個確定一個點；offset是跳過數組中的前幾個數再開始繪制；count表示一共繪制多少個，就是在數組中取count*2個值。

float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100}; /* 跳過兩個數，即前兩個 0 */ /* 一共繪制 8 個數（4 個點）:(50, 50) (50, 100) (100, 50) (100, 100)，后面的150, 50, 150, 100都不要了*/ canvas.drawPoints(points, 2 , 8 , paint);

• drawOval(float left, float top, float right, float bottom, Paint paint)：繪制橢圓
  繪制橫著的或者豎直的橢圓，斜的需要配合canvas的幾何變換實現。left、top、right、bottom 是這個橢圓的左、上、右、下四個邊界點的坐標，參考drawRect。

// 橫著的橢圓 canvas.drawOval(100, 250, 600, 450, paint); // 豎直的橢圓 canvas.drawOval(700, 100, 900, 600, paint);

繪制橢圓還有一個重載的方法：drawOval(RectF rect, Paint paint)，其中RectF是一個實現了Parcelable接口的類，它只有四個屬性left、top、right、bottom，所以單從cavans的繪制來說用法也很簡單，但是它內部還有很多方法，比如：width()、height()、centerX()、centerY()等等，從方法名就可以很容易的看出來所代表的意義。

我們也可以通過繪制橢圓來達到繪制圓形drawCircle的效果，只要將四個參數的距離計算好即可。

// 利用繪制橢圓繪制圓形，達到與drawCircle同樣的效果 canvas.drawOval(100, 200, 300, 400, paint);

• drawLine(float startX, float startY, float stopX, float stopY, Paint paint)：繪制線
  startX, startY, stopX, stopY 分別是線的起點和終點坐標，這個很簡單。

paint.setStrokeWidth(10);//設置線的寬度為10px canvas.drawLine(100, 100, 800, 800, paint);

• drawLines(float[] pts, int offset, int count, Paint paint) / drawLines(float[] pts, Paint paint)：批量繪制線
  與drawPoint和drawPoints同理。

• drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)：繪制圓角矩形
  left, top, right, bottom 是四條邊的坐標，rx 和 ry 是圓角的橫向半徑和縱向半徑，這兩個參數如何理解，用代碼畫出來就明了了。

canvas.drawRoundRect(100, 200, 500, 450, 100, 50, paint);canvas.drawRoundRect(600, 200, 1000, 450, 50, 100, paint);

• drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)：繪制弧形或扇形
  這個方法我們可以這么理解，首先用left、top、right、bottom繪制一個橢圓；startAngle為這個弧形的起始角度（x軸正方向為0°，順時針+，逆時針-）；sweepAngle為弧形劃過的角度，也就是弧形的角度；useCenter為這個弧形是否連接圓心，false為弧形，true為扇形。
  還是用代碼和圖理解的比較快：
  首先我們理解startAngle和sweepAngle的含義：

// 這是一個扇形 canvas.drawArc(200, 100, 800, 500, -110, 100, true, mPaint);

所以上面的代碼就是把上圖右邊藍色區域截取出來一個扇形。

/* 注意這里的橢圓大小是一致的，區別是startAngle和sweepAngle不同，還有是否連接圓心 */ canvas.drawArc(200, 100, 800, 500, -110, 100, true, mPaint); // 繪制扇形 canvas.drawArc(200, 100, 800, 500, 20, 140, false/*這里不連接圓心*/, mPaint); // 繪制弧形

/* 注意這里的第二行代碼與上圖的代碼只有是否連接圓心區別 */ canvas.drawArc(200, 100, 800, 500, -110, 100, true, mPaint); // 繪制扇形 canvas.drawArc(200, 100, 800, 500, 20, 140, true/*這里連接圓心*/, mPaint); // 繪制弧形

---

看到這里請各位原諒我的畫圖，真的。。。

總結

以上是生活随笔為你收集整理的HenCoder自定义View学习 - 自定义绘制学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。