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

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

布局代码: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">
  4. <LinearLayout
  5. android:id="@+id/ly_bar"
  6. android:layout_width="match_parent"
  7. android:layout_height="64dp"
  8. android:layout_alignParentBottom="true">
  9. <Button
  10. android:id="@+id/btn_reset"
  11. android:layout_width="0dp"
  12. android:layout_height="match_parent"
  13. android:layout_weight="1"
  14. android:text="重置" />
  15. <Button
  16. android:id="@+id/btn_left"
  17. android:layout_width="0dp"
  18. android:layout_height="match_parent"
  19. android:layout_weight="1"
  20. android:text="左倾" />
  21. <Button
  22. android:id="@+id/btn_right"
  23. android:layout_width="0dp"
  24. android:layout_height="match_parent"
  25. android:layout_weight="1"
  26. android:text="右倾" />
  27. <Button
  28. android:id="@+id/btn_zoomin"
  29. android:layout_width="0dp"
  30. android:layout_height="match_parent"
  31. android:layout_weight="1"
  32. android:text="放大" />
  33. <Button
  34. android:id="@+id/btn_zoomout"
  35. android:layout_width="0dp"
  36. android:layout_height="match_parent"
  37. android:layout_weight="1"
  38. android:text="缩小" />
  39. </LinearLayout>
  40. <com.jay.canvasdemo3.MyView
  41. android:id="@+id/myView"
  42. android:layout_width="match_parent"
  43. android:layout_height="match_parent"
  44. android:layout_above="@id/ly_bar" />
  45. </RelativeLayout>

MainActivity.java

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

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


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

实现流程分析

首先你要弄清楚,这个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扭曲图像则可能需要一点
时间消化消化,看不懂也没什么哈~嗯,本节就到这里,谢谢

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