Android 自定義 View _ 扭曲動效，android開發環境搭建教程

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

這個方法可以對bitmap進行扭曲，部分引數說明如下:

• bitmap　　　　需要扭曲的源位圖
• meshWidth 　　控制在橫向上把該源位圖劃成成多少格
• meshHeight 　 控制在縱向上把該源位圖劃成成多少格
• verts 　　　 長度為(meshWidth + 1) * (meshHeight + 1) * 2的陣列，它記錄了扭曲后的位圖各頂點位置
• vertOffset 控制verts陣列中從第幾個陣列元素開始才對bitmap進行扭曲

3. drawBitmapMesh簡單示例

• 根據引數的含義，我們先初始化這些引數：

//將影像分成多少格
private int carBodyWidthPart = 4;
private int carBodyHeightPart = 4;
//交點坐標的個數
private int carBodyPartCount = (carBodyWidthPart + 1) * (carBodyHeightPart + 1);
//用于保存COUNT的坐標
//x0, y0, x1, y1…
private float[] carBodyNewsPos = new float[carBodyPartCount * 2];
private float[] carBodyOrigPos = new float[carBodyPartCount * 2];
/**

• 得到網格點集合
• @param bitmap bitmap
• @param heightPart 縱向分割的份數
• @param widthPart 橫向分割的份數
• @param newPos 新點集合
• @param origPos 原始點集合
  */
  protected void getBitmapMeshPoints(Bitmap bitmap, int heightPart, int widthPart, float[] newPos, float[] origPos) {
  //初始化網格點
  int index = 0;
  float bmWidth = bitmap.getWidth();
  float bmHei

《Android學習筆記總結+最新移動架構視頻+大廠安卓面試真題+專案實戰原始碼講義》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整內容開源分享

ght = bitmap.getHeight();
for (int i = 0; i < heightPart + 1; i++) {
float fy = bmHeight * i / heightPart;
for (int j = 0; j < widthPart + 1; j++) {
float fx = bmWidth * j / widthPart;
//X軸坐標 放在偶數位
newPos[index * 2] = fx;
origPos[index * 2] = newPos[index * 2];
//Y軸坐標 放在奇數位
newPos[index * 2 + 1] = fy;
origPos[index * 2 + 1] = newPos[index * 2 + 1];
index += 1;
}
}
}

• 這里我把初始化陣列寫成了一個函式，注意的是，陣列按照第一個點的x1,y1,然后第二個點的x2,y2,這樣的順序存盤，我們先把圖給畫出來看看效果，我們把這些點集也畫出來：

/**

• 繪制網格點

• @param canvas canvas

• @param pos 點集

• @param paint 畫筆
  /
  protected void drawPoint(Canvas canvas, float[] pos, Paint paint) {
  for (int i = 0; i < pos.length/2; i++) {
  int x = i2;
  int y = x + 1;
  canvas.drawPoint(pos[x], pos[y], paint);
  }
  }

• 繪制方法：

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.setDrawFilter(paintFlagsDrawFilter);
//原始點
canvas.save();
canvas.translate(50,50);
canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyOrigPos, 0, null, 0, paint);
paint.setColor(Color.RED);
paint.setStrokeWidth(5);
drawPoint(canvas, carBodyOrigPos, paint);
canvas.restore();
//變化點
canvas.save();
canvas.translate(1000,50);
canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyNewsPos, 0, null, 0, paint);
paint.setColor(Color.RED);
paint.setStrokeWidth(5);
drawPoint(canvas, carBodyNewsPos, paint);
canvas.restore();
}

• 左邊的是原始點所畫出來的，右邊是變化后所畫出來的，因為這里沒有對點進行偏移所以左右是一樣的，還有要注意的一點，繪制drawBitmapMesh是沒有傳入繪制的起始點，因為他默認是從原始點開始繪制，所以這里有把坐標移動的代碼，

4. 嘗試加點扭曲

既然要形變要扭曲，那么我們先對carBodyNewsPos這個點集進行肆意妄為地操作一下：

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.setDrawFilter(paintFlagsDrawFilter);
//原始點
canvas.save();
canvas.translate(50,50);
canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyOrigPos, 0, null, 0, paint);
paint.setColor(Color.RED);
paint.setStrokeWidth(5);
drawPoint(canvas, carBodyOrigPos, paint);
canvas.restore();
//遍歷交點，修改
for (int i = 0; i < carBodyPartCount; i++) {
int x = i * 2;
int y = x + 1;
carBodyNewsPos[x] = carBodyOrigPos[x] * (changeFactor * 1.0f / 100 + 1);
}
//變化點
canvas.save();
canvas.translate(1000,50);
canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyNewsPos, 0, null, 0, paint);
paint.setColor(Color.RED);
paint.setStrokeWidth(5);
drawPoint(canvas, carBodyNewsPos, paint);
canvas.restore();
}

我們對每一個點應用了：carBodyNewsPos[x] = carBodyOrigPos[x] * (changeFactor * 1.0f / 100 + 1)：

5. 車廂的扭曲實作

仔細觀察車廂的影片，發現有幾點細節：

• 扭曲可以分解為x,y軸的扭曲，其疊加一起就是車廂的影片
• 車廂和車頂的扭曲一樣，不用的是扭曲度
• x軸的扭曲，以車廂的中心軸為分界線，左邊向左扭曲，右邊向右扭曲
• x軸方向的拉伸，離x中心軸線越近變化越小，離頂部（y=0）越近，變化也越小
• y軸的扭曲，是以y=0為中心軸，離x中心軸線越近變化越大，離頂部（y=0）越近，變化也越小

因為我們是依次遍歷點集，就是從i=0一直到i=posCount，那么我們來實作一下上面的變化：

• 設定兩個因子：xFactor和yFactor，控制x,y軸方向的最大扭曲度，
• 設定變化因子changeFactor，帶動扭曲度隨著時間而變化
• 當點的x在x中心軸的左邊，其x坐標應該是原始坐標減去扭曲度，反之亦然

大致得到X方向的扭曲度：changeFactor*Math.abs((widthPart+1)/2-i%(widthPart+1))*(origPos[y]/bitmap.getHeight()) * xFactor;

• xFactor是控制整個扭曲度的大小
• 頂部（y=0）越近，變化也越小，而因為是從y=0開始繪制，所以，bitmap.getHeight()就是y軸的最大值，那么，origPos[y]/bitmap.getHeight() 就是當前點所占y軸的百分比，也就是，離y=0越近，origPos[y]/bitmap.getHeight() 的值越小，
• 離x周軸線越近變化越小，Math.abs((widthPart+1)/2-i%(widthPart+1))

如上圖，紅色為x的中心軸，而我們遍歷的i（點的個數）值是從0-N，而，i=0，i=4的時候最大，i=1,i=3次小，如此類推， (widthPart+1)/2是算出中心軸的坐標相對位置，例如圖中，算出應該是2，那么中心軸的相對位置則為2，而i%(widthPart+1)，在圖中就是，0-4的取值，跟中心軸的相對位置2相減取絕對值，就是一個離中心軸的變化量的大小了，

Y方向的扭曲度，也是一樣的，這里就不說了，，，最后得出的扭曲函式如下：
，i=1,i=3次小，如此類推， (widthPart+1)/2是算出中心軸的坐標相對位置，例如圖中，算出應該是2，那么中心軸的相對位置則為2，而i%(widthPart+1)，在圖中就是，0-4的取值，跟中心軸的相對位置2相減取絕對值，就是一個離中心軸的變化量的大小了，

Y方向的扭曲度，也是一樣的，這里就不說了，，，最后得出的扭曲函式如下：