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

2020-04-11 12:31:34

字體：大中小

來源：轉載

供稿：網友

引言

接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可以理解成后乘，在矩陣遠離中對應左乘

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

舉個例子：