Android變形矩陣——Matrix

對于圖像的圖形變換，Android系統是通過矩陣來進行處理的，每個像素點都表達了其坐標的X、Y信息。Android的圖形變換矩陣是一個3x3的矩陣，如下圖所示：

72F0CAC1-14FB-40F8-A430-8F542B09DC4E.png

當使用變換矩陣去處理每一個像素點的時候，與顏色矩陣的矩陣乘法一樣，計算公式如下所示：

X1=aX+bY+c

Y1=dX+eY+f

1=gX+hY+i

通常情況下，會讓g=h=0，i=1，這樣就使1=gX+hY+i恒成立。因此，只需著重關注上面幾個參數即可。

與色彩變換矩陣的初始矩陣一樣，圖形變換矩陣也有一個初始矩陣。就是對角線元素a、e、i為1，其他元素為0的矩陣，如下圖所示：

圖形變換初始矩陣

圖像的變形處理通常包含以下四類基本變換：

Translate——平移變換

Rotate——旋轉變換

Scale——縮放變換

Skew——錯切變換

平移變換

平移變換的坐標值變換過程就是將每個像素點都進行平移變換，當從P(x0,y0)平移到P(x1,y1)時，所需的平移矩陣如下所示：

F8CD701F-4C5A-40DF-9B67-E50500B702DC.png

旋轉變換

旋轉變換即指一個點圍繞一個中心旋轉到一個新的點。當從P(x0,y0)點，以坐標原點O為旋轉中心旋轉到P(x1,y1)時，可以將點的坐標都表達成OP與X軸正方向夾角的函數表達式(其中r為線段OP的長度，α為OP(x0,y0)與X軸正方向夾角，θ為OP(x0,y0)與OP(x1,y1)之間夾角)，如下所示：

x0=rcosα

y0=rsinα

x1=rcos(α+θ)=rcosαcosθ?rsinαsinθ=x0cosθ?y0sinθ

y1=rsin(α+θ)=rsinαcosθ+rcosαsinθ=y0cosθ+x0sinθ

矩陣形式如下圖所示：

旋轉變換矩陣

前面是以坐標原點為旋轉中心的旋轉變換，如果以任意點O為旋轉中心來進行旋轉變換，通常需要以下三個步驟：

1.將坐標原點平移到O點

2.使用前面講的以坐標原點為中心的旋轉方法進行旋轉變換

3.將坐標原點還原

縮放變換

一個像素點是不存在縮放的概念的，但是由于圖像是由很多個像素點組成的，如果將每個點的坐標都進行相同比例的縮放，最終就會形成讓整個圖像縮放的效果，縮放效果的公式如下

x1=K1x0

y1=K2y0

矩陣形式如下圖所示：

縮放變換矩陣

錯切變換

錯切變換(skew)在數學上又稱為Shear mapping(可譯為“剪切變換“)或者Transvection(縮并)，它是一種比較特殊的線性變換。錯切變換的效果就是讓所有點的X坐標(或者Y坐標)保持不變，而對應的Y坐標(或者X坐標)則按比例發生平移，且平移的大小和該點到Y軸(或者X軸)的距離成正比。錯切變換通常包含兩種——水平錯切與垂直錯切。

錯切變換的計算公式如下：

水平錯切

x1=x0+K1y0

y1=y0

垂直錯切

x1=x0

y1=K2x0+y0

矩陣形式如下圖

錯切變換矩陣

由上面的分析可以發現，這個圖形變換3x3的矩陣與色彩變換矩陣一樣，每個位置的元素所表示的功能是有規律的，總結如下：

矩陣變換規律

可以發現，a、b、c、d、e、f這六個矩陣元素分別對應以下變換：

a和e控制Scale——縮放變換

b和d控制Skew——錯切變換

a和e控制Trans——平移變換

a、b、d、e共同控制Rotate——旋轉變換

通過類似色彩矩陣中模擬矩陣的例子來模擬變形矩陣。在圖形變換矩陣中，同樣是通過一個一維數組來模擬矩陣，并通過setValues()方法將一個一維數組轉換為圖形變換矩陣，代碼如下所示：

private float[] mImageMatrix = new float[9];

Matrix matrix = new Matrix();

matrix.setValues(mImageMatrix);````

當獲得了變換矩陣后，就可以通過以下代碼將一個圖像以這個變換矩陣的形式繪制出來。

canvas.drawBitmap(mBitmap, mMatrix, null);

public class HandleImage1Activity extends BaseActivity {

private ImageView mImageView;

private GridLayout mGroup;

private float mHue, mSaturation, mLum;

private Bitmap mBitmap;

private int mEtWidth, mEtHeight;

private EditText[] mEts = new EditText[9];

private float[] mImageMatrix = new float[9];

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_handleimg1);

mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.iu1);

mImageView = (ImageView) findViewById(R.id.img);

mGroup = (GridLayout) findViewById(R.id.group);

mGroup.post(new Runnable() {

@Override

public void run() {

// 獲取寬高信息

mEtWidth = mGroup.getWidth() / 3;

mEtHeight = mGroup.getHeight() / 3;

addEts();

initMatrix();

}

});

mImageView.setImageBitmap(mBitmap);

}

// 初始化顏色矩陣為初始狀態

private void initMatrix() {

for (int i = 0; i < 9; i++) {

if (i % 4 == 0)

mEts[i].setText(String.valueOf(1));

else

mEts[i].setText(String.valueOf(0));

}

}

// 添加EditText

private void addEts() {

for (int i = 0; i < 9; i++) {

EditText editText = new EditText(this);

editText.setInputType(InputType.TYPE_NUMBER_FLAG_DECIMAL);

mEts[i] = editText;

mGroup.addView(mEts[i], mEtWidth, mEtHeight);

}

}

// 獲取矩陣值

private void getMatrix() {

for (int i = 0; i < 9; i++) {

mImageMatrix[i] = Float.valueOf(mEts[i].getText().toString());

}

}

// 將矩陣值設置到圖像

private void setImageMatrix() {

Bitmap bmp = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bmp);

Matrix matrix = new Matrix();

matrix.setValues(mImageMatrix);

canvas.drawBitmap(mBitmap,matrix,null);

mImageView.setImageBitmap(bmp);

}

// 作用矩陣效果

public void btnChange(View view) {

getMatrix();

setImageMatrix();

}

// 重置矩陣效果

public void btnReset(View view) {

initMatrix();

getMatrix();

setImageMatrix();

}

}````

Android系統同樣提供了一些API來簡化矩陣的運算，我們不必每次都去設置矩陣的每一個元素值。Android中使用Matrix類來封裝矩陣，并提供了以下幾個操作方法來實現上面的四中變換方式：

matrix.setRotate()——旋轉變換

matrix.setTranslate()——平移變換

matrix.setScale()——縮放變換

matrix.setSkew()——錯切變換

matrix.preX和matrix.postY——提供矩陣的前乘和后乘運算

Matrix類的set方法會重置矩陣中的值，而post和pre方法不會，這兩個方法常用來實現矩陣的混合作用。不過要注意的是，矩陣運算不滿足乘法的交換律，所以矩陣乘法的前乘和后乘是兩種不同的運算方式。舉例說明，比如需要實現以下效果：

先旋轉45度

再平移到(200, 200)

如果使用后乘運算，表示當前矩陣乘上參數代表的矩陣，代碼如下所示：

matrix.setRotate(45);

matrix.postTranslate(200, 200);

如果使用前乘運算，表示參數代表的矩陣乘上當前矩陣，代碼如下所示：

matrix.setTranslate(200, 200);

matrix.preRotate(45);

像素塊分析

圖像的特效處理有兩種方式，即使用矩陣來進行圖像變換和使用drawBitmapMesh()方法來進行處理。drawBitmapMesh()與操縱像素點來改變色彩的原理類似，只不過是把圖像分成了一個個的小塊，然后通過改變每一個圖像塊來修改整個圖像。

drawBitmapMesh()方法代碼如下：

public void drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint)

關鍵的參數如下：

bitmap：將要扭曲的圖像

meshWidth：需要的橫向網格數目

meshHeight ：需要的縱向網格數目

verts：網格交叉點坐標數組

vertOffset：verts數組中開始跳過的(x, y)坐標對的數目

要使用drawBitmapMesh()方法就需先將圖片分割為若干個圖像塊。所以，在圖像上橫縱各畫N條線，而這橫縱各N條線就交織成了NxN個點，而每個點的坐標則以x1,y1,x2,y2,...,xn,yn的形式保存在verts數組中。也就是說verts數組的每兩位用來保存一個交織點，第一個是橫坐標，第二個是縱坐標。而整個drawBitmapMesh()方法改變圖像的方式，就是靠這些坐標值的改變來重新定義每一個圖像塊，從而達到圖像效果處理的功能。

drawBitmapMesh()方法的功能非常強大，基本上可以實現所有的圖像特效，但使用起來也非常復雜，其關鍵就是在于計算、確定新的交叉點的坐標。下面舉例說明如何使用drawBitmapMesh()方法來實現一個旗幟飛揚的效果。

要想達到旗幟飛揚的效果，只需要讓圖片中每個交叉點的橫坐標較之前不發生變化，而縱坐標較之前坐標呈現一個三角函數的周期性變化即可。

首先獲取交叉點的坐標，并將坐標保存到orig數組中，其獲取交叉點坐標的原理就是通過循環遍歷所有的交叉線，并按比例獲取其坐標，代碼如下所示：

mBitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.test);

float bitmapWidth = mBitmap.getWidth();

float bitmapHeight = mBitmap.getHeight();

int index = 0;

for (int y = 0; y <= HEIGHT ; y++) {

float fy = bitmapHeight * y / HEIGHT;

for (int x = 0; x <= WIDTH; x++) {

float fx = bitmapWidth * x / WIDTH;

orig[index * 2] = verts[ index * 2] = fx;

//這里人為將坐標+100是為了讓圖像下移，避免扭曲后被屏幕遮擋

orig[index * 2 + 1] = verts[ index * 2 + 1] = fy + 100;

index++;

}

}

接下來，在onDraw()方法中改變交叉點的縱坐標的值，為了實現旗幟飄揚的效果，使用一個正弦函數sinx來改變交叉點縱坐標的值，而橫坐標不變，并將變化后的值保存到verts數組中，代碼如下所示：

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

flagWave();

K += 0.1f;//將K的值增加

canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, verts, 0, null, 0, null);

invalidate();

}

/**

* 按當前點所在的橫坐標的位置來確定縱坐標的偏移量，其中A代表正弦函數中的振幅大小

*/

private void flagWave() {

for (int j = 0; j <= HEIGHT; j++) {

for (int i = 0; i <= WIDTH; i++) {

//在獲取縱坐標的偏移量時，利用正弦函數的周期性給函數增加一個周期K * Math.PI，就是為了讓圖像能夠動起來

float offsetY = (float) Math.sin(2 * Math.PI * i / WIDTH + K * Math.PI);

verts[(j * (WIDTH + 1) + i) * 2 + 1] = orig[(j * (WIDTH + 1) + i) * 2 + 1] + offsetY * A;

}

}

}

這樣，每次在重繪時，通過改變相位來改變偏移量，從而造成一個動態的效果，就好象旗幟在風中飄揚一樣，效果圖如下。

使用drawBitmapMesh()方法可以創建很多復雜的圖像效果，但是對它的使用也相對復雜，需要我們對圖像處理有很深厚的功底。同時，對算法的要求也比較高，需要計算各種特效下不同的坐標點變化規律，從而設計出不同的特效。

代碼如下：

public class WaveView extends AppCompatImageView {

private static final int HEIGHT=200;//想要劃分的高

private static final int WIDTH=200;//想要劃分的寬

private int COUNT = (WIDTH + 1) * (HEIGHT + 1);

private float[] verts = new float[COUNT * 2];

private float[] orig = new float[COUNT * 2];

private float A = 50;//表示正弦函數中的振幅大小

private float K = 1;

private Bitmap mBitmap;

private int mWaveSrc;

public WaveView(Context context) {

this(context,null);

}

public WaveView(Context context, @Nullable AttributeSet attrs) {

this(context,attrs,0);

}

public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

TypedArray typedArray = context.obtainStyledAttributes(R.styleable.WaveView);

mWaveSrc=typedArray.getResourceId(R.styleable.WaveView_waveSrc,R.drawable.iu1);

mBitmap= BitmapFactory.decodeResource(getResources(),mWaveSrc);

float bitmapWidth = mBitmap.getWidth();

float bitmapHeight = mBitmap.getHeight();

int index = 0;

for (int y = 0; y <= HEIGHT ; y++) {

float fy = bitmapHeight * y / HEIGHT;

for (int x = 0; x <= WIDTH; x++) {

float fx = bitmapWidth * x / WIDTH;

orig[index * 2] = verts[ index * 2] = fx;

//這里人為將坐標+100是為了讓圖像下移，避免扭曲后被屏幕遮擋

orig[index * 2 + 1] = verts[ index * 2 + 1] = fy ;

index++;

}

}

typedArray.recycle();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

flagWave();

K += 0.1f;//將K的值增加

canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, verts, 0, null, 0, null);

setImageBitmap(mBitmap);

invalidate();

}

/**

* 按當前點所在的橫坐標的位置來確定縱坐標的偏移量，其中A代表正弦函數中的振幅大小

*/

private void flagWave() {

for (int j = 0; j <= HEIGHT; j++) {

for (int i = 0; i <= WIDTH; i++) {

//在獲取縱坐標的偏移量時，利用正弦函數的周期性給函數增加一個周期K * Math.PI，就是為了讓圖像能夠動起來

float offsetY = (float) Math.sin(2 * Math.PI * i / WIDTH + K * Math.PI);

verts[(j * (WIDTH + 1) + i) * 2 + 1] = orig[(j * (WIDTH + 1) + i) * 2 + 1] + offsetY * A;

}

}

}

}