Canvas&Paint 知識梳理(1) Canvas 基礎

1、概述

通過前面對繪製原理的學習，咱們知道當View的onDraw(Canvas canvas)方法被調用時，會傳入一個canvas，咱們經過這個canvas進行繪製，便可獲得對應的圖像。 咱們主要了解如下幾個方面：

• Canvas的含義
• 如何得到Canvas
• Canvas的變換
• Canvas的繪圖
• 恢復和保存

2、Canvas的含義

涉及到Canvas的主要有如下三個概念：畫板、畫布和圖層，畫板包含了多個畫布，每一個畫布中間又可能會包含多個圖層，同一層級的元素會疊加在一塊，在上一層中間進行展現。

• 畫板 畫板用來承載畫布。
• 畫布 每個畫布就是一個bitmap，全部的圖像都是畫在bitmap上的。 畫布有兩種：
• View的原始畫布，也就是onDraw(Canvas canvas)當中傳入的canvas實例。
• 人造畫布，即經過saveLayer或者new Canvas(Bitmap)這些方法來人爲新建一個畫布，saveLayer新建一個畫布以後，之後全部的draw函數所畫的圖像都是在這個畫布上的，只有在restore、restoreToCount函數之後，纔會返回到原始畫布上繪製。
• 圖層 圖層是繪製的最小單元，每次調用canvas.drawXXX函數，都會生成一個專門的透明圖層來畫這個圖形，畫完以後，就蓋在了畫布上。連續調用draw方法，那麼就會生成多個透明圖層，畫完以後依次在當前的畫布上顯示。

3、得到Canvas

3.1 重寫View中的函數 onDraw(Canvas canvas) dispatchDraw(Canvas canvas)

在ViewGroup中，當它有背景的時候調用onDraw方法，不然會跳過onDraw直接調用dispatchDraw方法，在View中，兩個都會調用的。

3.2 經過Bitmap建立

Canvas c = new Canvas(bitmap);
//或者
Canvas c = new Canvas();
c.setBitmap(bitmap);
複製代碼

若是咱們經過這個方法構造了一個canvas，那麼這個canvas上繪製的圖像會保存在這個bitmap上，而不是在View上，若是想畫在View上，就必須經過onDraw函數傳進來的canvas畫一遍。

3.3 SurfaceHolder.lockCanvas()

4、Canvas變換

關於Canvas的變換能夠分爲兩類：可逆變換和不可逆變換。 其中可逆變換包括：平移、旋轉、縮放和傾斜四種。 不可逆變換包括：裁剪。

4.1 可逆變換

4.1.1 平移

void translate(float dx, dy)，向右和向下爲正方向，此時移動的是canvas原點的位置。

4.1.2 旋轉

rotate(float degrees, float px, float py)，正數表示順時針旋轉，此外還能夠指定旋轉的中心，默認是(0, 0)

4.1.3 縮放

scale(float sx, float sy, float px, py)，對x和y進行縮放，而且能夠指定縮放的中心點。

4.1.4 傾斜

skew(float sx, float sy)，傾斜畫布，分別表示傾斜角度的tan值。

4.2 不可逆變換

調用clipXXX函數進行裁剪，經過與Rect、Path、Region取交、並、差等集合運算來得到最新的畫布狀態，這個操做是不可逆的，一旦canvas被裁剪，那麼就不能被恢復。

#5、Canvas繪製

5.1 繪製基本圖形

線

drawLine(float startX, float startY, float stopX, float stopY, Paint paint) drawLines(float[] pts, Paint paint) drawLines(float[] pts, int offset, int count, Paint paint)

點

drawPoint(float x, float y, Paint paint) drawPoints(float[] pts, Paint paint) drawPoints(float[] pts, int offset, int count, Paint paint)

矩形

drawRect(float left, float top, float right, float bottom, Paint) drawRect(RectF rect, Paint paint) drawRect(Rect rect, Paint paint)

圓角矩形

drawRoundRect(RectF rect, float rx, float ry, Paint paint)

圓

drawCircle(float cx, float cy, float radius, Paint paint)

橢圓

drawOval(RectF oval, Paint paint)

扇形

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

5.2 調用Path繪製

在canvas中，繪製路徑時使用drawPath(Path path, Paint paint)方法

直線路徑

調用moveTo(float x, float y)能夠移動到某個繪製點，lineTo(float x, float y)連到直線的結束點，若是連續畫了幾條直線，但沒有造成閉環，調用close()會將路徑首尾鏈接起來。

矩形路徑

addRect(RectF rect, Path.Direction dir)和drawRect(float l, float t, float r, float b, Path.Direction dir)，用來繪製一條封閉的矩形路徑，第2個參數決定了該路徑的方向。

圓角矩形路徑

addRoundRect(RectF rect, float[] radii, Path.Direction dir)和addRoundRect(RectF, float rx, float ry, Path.Direction dir)

圓形路徑

addCircle(float x, float y, float radius, Path.Direction dir)

橢圓路徑

addOval(RectF oval, Path.Direction dir)

弧形路徑

addArc(RectF oval, float startAngle, float sweepAngle)

5.3 繪製文字

canvas的文字繪製提供如下3種：

普通水平繪製

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

指定各個文字位置

drawPosText(String text, float[] pos, Paint)

沿路徑繪製

drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)，其中hOffset表示與路徑起始點的水平偏移量，vOffset表示與路徑中心的水平偏移量。