1 Canvas 與螢幕

前面講解了Canvas的基本概念，Android繪圖之Canvas概念理解（5） ，
對Canvas的概念進行了分析，但是沒有說明和螢幕的關係，Canvas不等於螢幕，螢幕不會動的，我們也無法對螢幕進行（平移，縮放等）操作，只能對Canvas進行操作，所以對Canvas進行操作，螢幕不動，最終會導致看到的影象不同。

下面開始講解Canvas的變幻操作：
包括：translate,rotate,scale,skew,clip，clipout，matrix

2 translate 平移

先從最簡單的平移開始：

/**
 * Preconcat the current matrix with the specified translation
 *
 * @param dx The distance to translate in X
 * @param dy The distance to translate in Y
*/
 

public void translate(float dx, float dy) {
    if (dx == 0.0f && dy == 0.0f) return;
    nTranslate(mNativeCanvasWrapper, dx, dy);
}

對Canvas進行平移，
dx: x軸方向進行平移,正值向螢幕右側
dy：y軸方向進行平移，正值向螢幕下方

mPaint1.setStrokeWidth(50);
canvas.drawPoint(0,0,mPaint1);
mPaint1.setColor(Color.RED);
canvas.translate(
 
300,300);
canvas.drawPoint(0,0,mPaint1);

繪製兩個點檢視原點位置。

//繪製矩形：
canvas.drawRect(200,200,700,700,mPaint1);
mPaint1.setColor(Color.RED);
canvas.translate(200,200);
canvas.drawPoint(0,0,mPaint1);
canvas.drawRect(200,200,700,700,mPaint1);

mPaint1.setColor(Color.GRAY);
canvas.drawRect(300,300,800,800,mPaint1);

原點顯然改變了，以後再繪製任何形狀都是以translate後的原點開始繪製。

3 scale 縮放

/**
 * Preconcat the current matrix with the specified scale.
 *
 * @param sx The amount to scale in X
 * @param sy The amount to scale in Y
 */
public void scale(float sx, float sy) {
    if (sx == 1.0f && sy == 1.0f) return;
    nScale(mNativeCanvasWrapper, sx, sy);
}

/**
 * Preconcat the current matrix with the specified scale.
 *
 * @param sx The amount to scale in X
 * @param sy The amount to scale in Y
 * @param px The x-coord for the pivot point (unchanged by the scale)
 * @param py The y-coord for the pivot point (unchanged by the scale)
 */
public final void scale(float sx, float sy, float px, float py) {
    if (sx == 1.0f && sy == 1.0f) return;
    translate(px, py);
    scale(sx, sy);
    translate(-px, -py);
}

引數說明
sx:橫向的縮放，預設為1，小數縮小，整數放大
sy:縱向的縮放，預設為1，小數縮小，整數放大

px，py，看原始碼知道是先translate，執行sx,sy然後再translate反方向。
第二次translate的座標為（-pxsx,-pxsy）,最終的效果就是px,py是縮放後不動的點。

canvas.drawRect(200,200,700,700,mPaint1);
canvas.scale(0.5f,0.5f);
mPaint1.setColor(Color.GRAY);
canvas.drawRect(200,200,700,700,mPaint1);

縮放後坐標減半。

如果想控制縮放後的位置，如何控制呢，這就需要第二個函式。

canvas.drawRect(200,200,700,700,mPaint1);
canvas.scale(0.5f,0.5f,200,200);
mPaint1.setColor(Color.GRAY);
canvas.drawRect(200,200,700,700,mPaint1);

還可以控制其他位置，例如控制縮放後在中心。

canvas.drawRect(200,200,700,700,mPaint1);
canvas.scale(0.5f,0.5f,450,450);
mPaint1.setColor(Color.GRAY);
canvas.drawRect(200,200,700,700,mPaint1);

4 Canvas 的旋轉rotate

/**
 * Preconcat the current matrix with the specified rotation.
 *
 * @param degrees The amount to rotate, in degrees
 */
public void rotate(float degrees) ；
/** *
 * @param degrees The amount to rotate, in degrees
 * @param px The x-coord for the pivot point (unchanged by the rotation)
 * @param py The y-coord for the pivot point (unchanged by the rotation)
 */
public final void rotate(float degrees, float px, float py) {
    if (degrees == 0.0f) return;
    translate(px, py);
    rotate(degrees);
    translate(-px, -py);
}

rotate有兩個函式：
rotate(float degrees)
rotate(float degrees, float px, float py)
Degree:旋轉的角度，正值為順時針，負值為逆時針
Px,py:旋轉的中心，如果不指定旋轉中心預設為（0,0）點

canvas.drawRect(400,400,900,900,mPaint1);
canvas.rotate(-10);
mPaint1.setColor(Color.GRAY);
canvas.drawRect(400,400,900,900,mPaint1);

指定旋轉中心為矩形中心

canvas.drawRect(400,400,900,900,mPaint1);
canvas.drawPoint(100,100,mPaint1);
canvas.rotate(10,650,650);

mPaint1.setColor(Color.GRAY);
canvas.drawRect(400,400,900,900,mPaint1);

5 Skew 傾斜 畫布

/**
 * Preconcat the current matrix with the specified skew.
 *
 * @param sx The amount to skew in X
 * @param sy The amount to skew in Y
 */
public void skew(float sx, float sy) {
    if (sx == 0.0f && sy == 0.0f) return;
    nSkew(mNativeCanvasWrapper, sx, sy);
}

引數說明：
sx:畫布在x方向上傾斜相應的角度，sx傾斜角度的tan值，
sy:畫布在y軸方向上傾斜相應的角度，sy為傾斜角度的tan值，

canvas.drawRect(200,200,700,700,mPaint1);
canvas.save();
canvas.skew(tan(30),0);
mPaint1.setColor(Color.GRAY);
canvas.drawRect(200,200,700,700,mPaint1);
canvas.restore();
mPaint1.setColor(Color.BLUE);
canvas.drawRect(200,800,700,1300,mPaint1);
canvas.save();
canvas.skew(0,tan(30));
mPaint1.setColor(Color.GRAY);
canvas.drawRect(200,800,700,1300,mPaint1);
canvas.restore();

public float tan(int degree){
   return (float) Math.tan(degree*1.0/180*Math.PI);
}

6 clip 切割畫布

根據矩形或者路徑裁剪畫布，畫布被切割之後，只有部分割槽域可用，其他區域無法繪製內容。
Clip函式切割的區域可用，clipOut未被切割的區域可用。（過時函式不再講解）

clipRect(@NonNull RectF rect)
clipRect(@NonNull Rect rect)
clipRect(float left, float top, float right, float bottom)
clipRect(int left, int top, int right, int bottom)

clipPath(@NonNull Path path)

一下函式需要api26以上
clipOutRect(@NonNull RectF rect)
clipOutRect(@NonNull Rect rect)
clipOutRect(float left, float top, float right, float bottom)
clipOutRect(int left, int top, int right, int bottom)
clipOutPath(@NonNull Path path)

canvas.drawRect(200,200,700,700,mPaint1);
mPaint1.setColor(Color.GRAY);
canvas.drawRect(200,800,700,1300,mPaint1);
canvas.clipRect(200, 200, 700, 700);//擷取畫布大小為
canvas.drawCircle(100,100,100,mPaint1);//畫布被剪下，無法畫上
canvas.drawCircle(300,300,100,mPaint1);//可以畫上

canvas.drawRect(200,200,700,700,mPaint1);
mPaint1.setColor(Color.GRAY);
canvas.drawRect(200,800,700,1300,mPaint1);
canvas.clipOutRect(200, 200, 700, 700);//擷取畫布大小為
canvas.drawCircle(100,100,100,mPaint1);//可以畫上
canvas.drawCircle(300,300,100,mPaint1);//無法畫上

7 matrix 變換

Matrix提供了一些方法來控制變換：

setTranslate(float dx,float dy)：平移操作
setSkew(float kx,float ky)：skew操作
setSkew(float kx,float ky,float px,float py)：
setRotate(float degrees)：旋轉
setRotate(float degrees,float px,float py)：
setScale(float sx,float sy)：縮放
setScale(float sx,float sy,float px,float py)：

Matrix的pre XXX和postXXX是左乘右乘的區別，是為了組合各種操作，因為矩陣不符合交換率，所以左乘右乘效果不同，一般利用matrix的效果需要反著乘得到最終的matrix.
以上的效果和canvas的set操作效果一樣。

canvas.drawRect(200,200,700,700,mPaint1);
mPaint1.setColor(Color.GRAY);
Matrix matrix = new Matrix();
matrix.setRotate(10);
canvas.setMatrix(matrix);
canvas.drawRect(200,200,700,700,mPaint1);