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

一、概述

經過前面對繪制原理的學習,我們知道當ViewonDraw(Canvas canvas)方法被調用時,會傳入一個canvas,我們通過這個canvas進行繪制,即可得到對應的圖像。
我們主要了解以下幾個方面:

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

二、Canvas的含義

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

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

三、獲得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()

四、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),對xy進行縮放,并且可以指定縮放的中心點。

4.1.4 傾斜

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

4.2 不可逆變換

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

五、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表示與路徑中心的水平偏移量。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容