[关闭]
@coder-pig 2015-11-12T10:46:02.000000Z 字数 6695 阅读 2381

Android基础入门教程——8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash

Android基础入门教程

本节引言：

在Canvas的API文档中，我们看到这样一个方法：drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)
这个Matrix可是有大文章的，前面我们在学Paint的API中的ColorFilter中曾讲过ColorMatrix
颜色矩阵，一个4 * 5 的矩阵，我们可以通过修改矩阵值来修改色调，饱和度等！
而今天讲的这个Matrix可以结合其他API来控制图形，组件的变换。比如Canvas就提供了上面的
这个drawBitmap来实现矩阵变换的效果！下面我们来慢慢研究这个东东~
官方API文档：Matrix

1.Matrix中的几个常用的变换方法

  • setTranslate(float dx, float dy)：控制Matrix进行平移
  • setRotate(float degrees, float px, float py)：旋转，参数依次是:旋转角度，轴心(x,y)
  • setScale(float sx, float sy, float px, float py):缩放，
    参数依次是：X，Y轴上的缩放比例；缩放的轴心
  • setSkew(float kx, float ky)：倾斜(扭曲)，参数依次是：X，Y轴上的缩放比例

其实和Canvas变换的方法基本一致，在为Matrix设置了上面的变换后，调用Canvas的
drawBitmap()方法调用矩阵就好~

2.Matrix使用示例：

运行效果图：

代码实现：

MyView.java：

  1. /**
  2.  * Created by Jay on 2015/11/11 0011.
  3.  */
  4. public class MyView extends View {
  6.     private Bitmap mBitmap;
  7.     private Matrix matrix = new Matrix();
  8.     private float sx = 0.0f;          //设置倾斜度
  9.     private int width,height;         //位图宽高
  10.     private float scale = 1.0f;       //缩放比例
  11.     private int method = 0;
  13.     public MyView(Context context) {
  14.         this(context, null);
  15.     }
  17.     public MyView(Context context, AttributeSet attrs) {
  18.         super(context, attrs);
  19.         init();
  20.     }
  22.     public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
  23.         super(context, attrs, defStyleAttr);
  24.     }
  26.     private void init() {
  27.         mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi);
  28.         width = mBitmap.getWidth();
  29.         height = mBitmap.getHeight();
  30.     }
  32.     @Override
  33.     protected void onDraw(Canvas canvas) {
  34.         super.onDraw(canvas);
  35.         switch (method){
  36.             case 0:
  37.                 matrix.reset();
  38.                 break;
  39.             case 1:
  40.                 sx += 0.1;
  41.                 matrix.setSkew(sx,0);
  42.                 break;
  43.             case 2:
  44.                 sx -= 0.1;
  45.                 matrix.setSkew(sx,0);
  46.                 break;
  47.             case 3:
  48.                 if(scale < 2.0){
  49.                     scale += 0.1;
  50.                 }
  51.                 matrix.setScale(scale,scale);
  52.                 break;
  53.             case 4:
  54.                 if(scale > 0.5){
  55.                     scale -= 0.1;
  56.                 }
  57.                 matrix.setScale(scale,scale);
  58.                 break;
  59.         }
  60.         //根据原始位图与Matrix创建新图片
  61.         Bitmap bitmap = Bitmap.createBitmap(mBitmap,0,0,width,height,matrix,true);
  62.         canvas.drawBitmap(bitmap,matrix,null);    //绘制新位图
  63.     }
  65.     public void setMethod(int i){
  66.         method = i;
  67.         postInvalidate();
  68.     }
  69. }

布局代码:activity_main.xml：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent">
  5.     <LinearLayout
  6.         android:id="@+id/ly_bar"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="64dp"
  9.         android:layout_alignParentBottom="true">
  11.         <Button
  12.             android:id="@+id/btn_reset"
  13.             android:layout_width="0dp"
  14.             android:layout_height="match_parent"
  15.             android:layout_weight="1"
  16.             android:text="重置" />
  18.         <Button
  19.             android:id="@+id/btn_left"
  20.             android:layout_width="0dp"
  21.             android:layout_height="match_parent"
  22.             android:layout_weight="1"
  23.             android:text="左倾" />
  25.         <Button
  26.             android:id="@+id/btn_right"
  27.             android:layout_width="0dp"
  28.             android:layout_height="match_parent"
  29.             android:layout_weight="1"
  30.             android:text="右倾" />
  32.         <Button
  33.             android:id="@+id/btn_zoomin"
  34.             android:layout_width="0dp"
  35.             android:layout_height="match_parent"
  36.             android:layout_weight="1"
  37.             android:text="放大" />
  39.         <Button
  40.             android:id="@+id/btn_zoomout"
  41.             android:layout_width="0dp"
  42.             android:layout_height="match_parent"
  43.             android:layout_weight="1"
  44.             android:text="缩小" />
  45.     </LinearLayout>
  48.     <com.jay.canvasdemo3.MyView
  49.         android:id="@+id/myView"
  50.         android:layout_width="match_parent"
  51.         android:layout_height="match_parent"
  52.         android:layout_above="@id/ly_bar" />
  54. </RelativeLayout>

MainActivity.java：

  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener{
  3.     private Button btn_reset;
  4.     private Button btn_left;
  5.     private Button btn_right;
  6.     private Button btn_zoomin;
  7.     private Button btn_zoomout;
  8.     private MyView myView;
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.activity_main);
  14.         bindViews();
  15.     }
  17.     private void bindViews() {
  18.         btn_reset = (Button) findViewById(R.id.btn_reset);
  19.         btn_left = (Button) findViewById(R.id.btn_left);
  20.         btn_right = (Button) findViewById(R.id.btn_right);
  21.         btn_zoomin = (Button) findViewById(R.id.btn_zoomin);
  22.         btn_zoomout = (Button) findViewById(R.id.btn_zoomout);
  23.         myView = (MyView) findViewById(R.id.myView);
  26.         btn_reset.setOnClickListener(this);
  27.         btn_left.setOnClickListener(this);
  28.         btn_right.setOnClickListener(this);
  29.         btn_zoomin.setOnClickListener(this);
  30.         btn_zoomout.setOnClickListener(this);
  32.     }
  34.     @Override
  35.     public void onClick(View v) {
  36.         switch (v.getId()){
  37.             case R.id.btn_reset:
  38.                 myView.setMethod(0);
  39.                 break;
  40.             case R.id.btn_left:
  41.                 myView.setMethod(1);
  42.                 break;
  43.             case R.id.btn_right:
  44.                 myView.setMethod(2);
  45.                 break;
  46.             case R.id.btn_zoomin:
  47.                 myView.setMethod(3);
  48.                 break;
  49.             case R.id.btn_zoomout:
  50.                 myView.setMethod(4);
  51.                 break;
  52.         }
  53.     }
  54. }

用法非常简单，就不解释了~

3.drawBitmapMash扭曲图像

在API文档中还有这样一个方法：
drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts,
int vertOffset, int[] colors, int colorOffset, Paint paint)

参数依次是：

bitmap：需要扭曲的原位图
meshWidth/meshHeight：在横/纵向上把原位图划分为多少格
verts：长度为(meshWidth+1)*(meshHeight+2)的数组，他记录了扭曲后的位图各顶点(网格线交点)
位置，虽然他是一个一维数组，但是实际上它记录的数据是形如(x0,y0)，(x1,y1)..(xN,Yn)格式的数据，
这些数组元素控制对bitmap位图的扭曲效果
vertOffset：控制verts数组从第几个数组元素开始对bitmap进行扭曲(忽略verOffset之前数据
的扭曲效果)

代码示例：

运行效果图：

代码实现：

  1. /**
  2.  * Created by Jay on 2015/11/11 0011.
  3.  */
  4. public class MyView extends View {
  6.     //将水平和竖直方向上都划分为20格
  7.     private final int WIDTH = 20;
  8.     private final int HEIGHT = 20;
  9.     private final int COUNT = (WIDTH + 1) * (HEIGHT + 1);  //记录该图片包含21*21个点
  10.     private final float[] verts = new float[COUNT * 2];    //扭曲前21*21个点的坐标
  11.     private final float[] orig = new float[COUNT * 2];    //扭曲后21*21个点的坐标
  12.     private Bitmap mBitmap;
  13.     private float bH,bW;
  16.     public MyView(Context context) {
  17.         this(context, null);
  18.     }
  20.     public MyView(Context context, AttributeSet attrs) {
  21.         super(context, attrs);
  22.         init();
  23.     }
  25.     public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
  26.         super(context, attrs, defStyleAttr);
  27.     }
  29.     private void init() {
  30.         mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_wuliao);
  31.         bH = mBitmap.getWidth();
  32.         bW = mBitmap.getHeight();
  33.         int index = 0;
  34.         //初始化orig和verts数组。
  35.         for (int y = 0; y <= HEIGHT; y++)
  36.         {
  37.             float fy = bH * y / HEIGHT;
  38.             for (int x = 0; x <= WIDTH; x++)
  39.             {
  40.                 float fx = bW * x / WIDTH;
  41.                 orig[index * 2 + 0] = verts[index * 2 + 0] = fx;
  42.                 orig[index * 2 + 1] = verts[index * 2 + 1] = fy;
  43.                 index += 1;
  44.             }
  45.         }
  46.         //设置背景色
  47.         setBackgroundColor(Color.WHITE);
  48.     }
  50.     @Override
  51.     protected void onDraw(Canvas canvas) {
  52.         canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, verts
  53.                 , 0, null, 0, null);
  54.     }
  56.     //工具方法，用于根据触摸事件的位置计算verts数组里各元素的值
  57.     private void warp(float cx, float cy)
  58.     {
  59.         for (int i = 0; i < COUNT * 2; i += 2)
  60.         {
  61.             float dx = cx - orig[i + 0];
  62.             float dy = cy - orig[i + 1];
  63.             float dd = dx * dx + dy * dy;
  64.             //计算每个座标点与当前点（cx、cy）之间的距离
  65.             float d = (float)Math.sqrt(dd);
  66.             //计算扭曲度，距离当前点（cx、cy）越远，扭曲度越小
  67.             float pull = 80000 / ((float) (dd * d));
  68.             //对verts数组（保存bitmap上21 * 21个点经过扭曲后的座标）重新赋值
  69.             if (pull >= 1)
  70.             {
  71.                 verts[i + 0] = cx;
  72.                 verts[i + 1] = cy;
  73.             }
  74.             else
  75.             {
  76.                 //控制各顶点向触摸事件发生点偏移
  77.                 verts[i + 0] = orig[i + 0] + dx * pull;
  78.                 verts[i + 1] = orig[i + 1] + dy * pull;
  79.             }
  80.         }
  81.         //通知View组件重绘
  82.         invalidate();
  83.     }
  85.     @Override
  86.     public boolean onTouchEvent(MotionEvent event)
  87.     {
  88.         //调用warp方法根据触摸屏事件的座标点来扭曲verts数组
  89.         warp(event.getX(), event.getY());
  90.         return true;
  91.     }
  93. }

实现流程分析：

首先你要弄清楚，这个verts数组存储的是什么？比如
verts[0]和verts1，这两个相邻的元素其实表示的就是我们第一个点的x坐标和y坐标！
知道这一点，你就知道为什么有21 * 21个点，以及为什么数组长度等于这个值 * 2！
初始化部分也就懂了！
接着我们再来看看根据触摸事件计算verts数组元素的值的实现：
获得触摸点的x,y坐标，拿这个值去减对应点的x,y只，计算出触摸点和每个坐标点的距离
然后计算所谓的扭曲度：80000 / ((float) (dd * d))；扭曲度 >= 1的，直接让该坐标
点指向这个触摸点，< 1的，则让各个顶点向触摸点发生偏移，然后再调用invalidate()重绘~
大概就这样~多思考思考，如果还是不理解就算了~知道有这东西就好！

4.本节示例下载：

CanvasDemo3.zip
CanvasDemo4.zip

本节小结：

本节内容大部分摘自——李刚《Android》疯狂讲义，可能稍微容易理解一点吧~
Matrix应该大部分的童鞋都能看懂，而drawBitmapMash扭曲图像则可能需要一点
时间消化消化，看不懂也没什么哈~嗯，本节就到这里，谢谢

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注