Android變形(Transform)之Camera使用介紹_Android

引言

接Android變形(Transform)之Matrix，來總結下Camera的使用，Camera主要實現3D的變形，有轉動，旋轉等，Camera的源碼是由Native（本地代碼）實現，提供的介面也比較簡單。官方的介紹：A camera instance can be used to compute 3D transformations and generate a matrix that can be applied, for instance, on a  Canvas.

效果圖

原圖：

 

變形以後：

 

API使用 

Camera提供的方法如下：

save:儲存目前狀態

restore：回複目前狀態

translate：在x,y,z三位控制項內進行平移 

rotateX:以(0.0)為中心，繞X軸進行選擇

rotateY:以(0.0)為中心，繞Y軸進行選擇

rotateZ:以(0.0)為中心，旋轉（此處和Matrix旋轉原理一樣，只不過反向相反，為逆時針）

...

常用的就這麼多

實踐

直接上代碼：

複製代碼 代碼如下:

public class CameraTransformView extends View {

private Bitmap mBitmap;
private Camera mCamera;
private Matrix mMatrix;
private int deltaX, deltaY, deltaZ, extraZ;
private int centerX, centerY;

public CameraTransformView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public void setDrawable(int resId) {
mBitmap = BitmapFactory.decodeResource(getResources(), resId);
centerX = mBitmap.getWidth() / 2;
centerY = mBitmap.getHeight() / 2;
mCamera = new Camera();
mMatrix = new Matrix();
}

public void setDelta(int x, int y, int z, int extra) {
deltaX += x;
deltaY += y;
deltaZ += z;
extraZ += extra;
invalidate();
}

public void reset() {
deltaX = 0;
deltaY = 0;
deltaZ = 0;
invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
mCamera.save();
mCamera.translate(10, 10, extraZ);
mCamera.rotateX(deltaX);
mCamera.rotateY(deltaY);
mCamera.rotateZ(deltaZ);
mCamera.getMatrix(mMatrix);
mCamera.restore();

mMatrix.preTranslate(-this.centerX, -this.centerY);
mMatrix.postTranslate(this.centerX, this.centerY);

canvas.drawBitmap(mBitmap, mMatrix, null);
super.onDraw(canvas);
}

}

其實Camera的變化就是封裝了一個Matrix矩陣，可以通過getMatrix方法來擷取這個座標矩陣。在上面的Demo中就用到了該方法做些額外的處理，下面具體看看：

複製代碼 代碼如下:

@Override
protected void onDraw(Canvas canvas) {
mCamera.save();
mCamera.translate(10, 10, extraZ);
mCamera.rotateX(deltaX);
mCamera.rotateY(deltaY);
mCamera.rotateZ(deltaZ);
mCamera.getMatrix(mMatrix);
mCamera.restore();

//mMatrix.preTranslate(-this.centerX, -this.centerY);
//mMatrix.postTranslate(this.centerX, this.centerY);

canvas.drawBitmap(mBitmap, mMatrix, null);
super.onDraw(canvas);
}

在onDraw方法中，可以通過Camera的方法來完成變形。注意11,12行，如果在onDraw的時候不進行倆行設定的話，可以看到效果如下：

可以看到，其按照Y軸旋轉中心點是(0,0)，那麼平常的應用而言，大多希望其中心點在圖片的中心點上。所以需要加入

複製代碼 代碼如下:

mMatrix.preTranslate(-this.centerX, -this.centerY);
mMatrix.postTranslate(this.centerX, this.centerY);

其實這一節的重點就在於剖析這倆句話。

從Camara的API中可以看出來其不提供變形中心點的設定方法，那麼怎麼辦呢，基本思路是：假設圖片中心點為（centerX,centerY），既然Camera始終以（0,0）為中心點，那麼我先將圖形矩陣往左移動centerX，再往上移動centerY，讓（centerX，centerY）正好掐在初始的（0,0）上，這樣進行變形的話，中心點就變成了（centerX，centerY），達到了目的，當然這還沒結束，你既然位移了（-centerX，-centerY），那麼變形以後得移回來，然後再往右下方分別移動centerX,centerY。

按照矩陣的變換，可以表達為：

1,0,-centerX                     1,0,centerX

0,1,-centerY  * 變形矩陣 *  0,1,centerY

0,0,1                               0,0,1

那麼具體就如此，思路和代碼結合起來怎麼來解釋呢，接著看，我們需要回顧下Matrix中的部分知識。

回顧

Matrix提供的三種變形方式為：set，post，pre。

set就是先reset，然後進行變形

pre可以解釋為先乘，在矩陣原理中對應的右乘

post可以理解成後乘，在矩陣遠離中對應左乘

不著急，接下倆具體看什麼是先乘，後乘，什麼是左乘，右乘。

舉個例子：

原圖

讓一個圖形按照中心點放大至2倍

那麼期望的效果是：中心點不變（圖片被邊緣截斷了）

那麼按照之前提高的思路：假設中心點是（50,50）先左上移50，也即（-50，-50）再進行放大，再右下移50，也即（50,50）

api調用即為：setScale(2,2), preTranslate(-50,-50), postTranslate(50,50)

照例來說對應矩陣為：

1,0,-50       2,0,0       1,0,50        2,0,50

0,1,-50   *  0,0,2   *  0,1,50    =  0,2,50

0,0,1          0,0,1       0,0,1          0,0,1

可以看到結果是放大至2倍，但是卻往右下移動了（50,50），奇怪要是這樣的話，和預期的效果圖一樣預期的效果圖矩陣應該為（方法至2倍，往左上移動（-50，-50））

2,0,-50

0,2,-50,

0,0,1

好，揭曉下疑點：

此處api的執行順序為：preTranslate(-50,-50)  ->  setScale(2,2)  ->  postTranslate(50,50) 沒有問題

答案揭曉：矩陣符合變化的原則，如果圖形經過F1,F2...Fn此變形，對應矩陣為T1,T2...Tn，符合矩陣T = Tn*Tn-1...*T1

那麼正確的矩陣演算法應該為

1,0,50       2,0,0       1,0,-50        2,0,-50

0,1,50   *  0,0,2   *  0,1,-50    =  0,2,-50

0,0,1          0,0,1       0,0,1          0,0,1

此處也解釋了pre為右乘，post為左乘的原理了。

那麼到此為止，一切都都得到瞭解釋。

迴歸

迴歸到Camera的Demo當中，既然Camera的變形中心點是（0,0），而且Camera的變形實際是對Matrix的變形，我們可以通過getMatrix方法來擷取這個Matrix，然後通過左移pre，變形後右移post來實現中心點的設定。