上一篇android中canvas的clipRect和concate调用顺序不同导致的图像效果不同。。只是讲到表现，并没有说到原理，今天结合网友说的
，以及官网developer.android.comjj解释和自己测试的结果，来谈谈自己此知识点的看法。
先看看网友的理解：
初识：
我们看到的View视图其实最终都是在Canvas这个画板上画出来的，可以想象这个canvas有无限大，只是View组件在绘制时，即父组件调用dispatchDraw(Canvas c)分发给各个子组件绘制时，根据子组件的大小和位置，分别调用canvas的translate(int
dx, int dy)和clipRect(int l, int t, int r, int b)方法来设置canvas的当前原点坐标和绘制的可见范围。所以当我们在view组件通过onDraw(Canvas c)方法绘制时，往往因为超过组件大小范围而看不到绘制的一部分内容。
我们通过animation来实现view组件的动画效果时候, 实际上是改变canvas的matrix, matrix矩阵的作用主要是对每个坐标点(x, y)转换为另外的(x‘, y‘)，必要的时候canvas还会通过clipRect()方法改变它的绘制可见范围，这样不至于做移动的时候看不到view组件。我们看到view的动画效果时，其实它的大小和布局都没有变化，所以会看到比较搞笑的现象，就是一个button通过translate偏离原来位置后，它的touch事件响应还是在原来位置上，而不是所看到的眼前位置。
Canvas的translate(int dx, int dy)方法，其实和通过设置它的matrix的postTranslate(int dx, int dy), preTranslate(int dx, int dy)方法效果是一样的, 而Matrix的pre系列方法和post系列方法在俺看来效果是一样的，因为做过试验打印数据比较过, 唯独set系列的方法和pre, post的不同，它是直接设值，而后者它们是设置matrix的增量。
更进一步
终于切切实实弄明白matrix那几个方法的使用了，比如preTranslate, setTranslate, postTranslate这些。以前对它们都是一知半解，以为这几个方法没什么区别，其实还是有很大不同的，最紧要是这几个方法的调用顺序对坐标变换的影响。抽象的说pre方法是向前"生长", post方法是向后"生长"，具体拿个例子来说，比如一个matrix调用了下列一系列的方法：
matrix.preScale(0.5f, 1); matrix.preTranslate(10, 0); matrix.postScale(0.7f, 1); matrix.postTranslate(15, 0); 则坐标变换经过的4个变换过程依次是：translate(10, 0) -> scale(0.5f, 1) -> scale(0.7f, 1) -> translate(15, 0), 所以对matrix方法的调用顺序是很重要的，不同的顺序往往会产生不同的变换效果。pre方法的调用顺序和post方法的互不影响，即以下的方法调用和前者在真实坐标变换顺序里是一致的，
matrix.postScale(0.7f, 1); matrix.preScale(0.5f, 1); matrix.preTranslate(10, 0); matrix.postTranslate(15, 0);
而matrix的set方法则会对先前的pre和post操作进行刷除，而后再设置它的值，比如下列的方法调用:
matrix.preScale(0.5f, 1); matrix.postTranslate(10, 0); matrix.setScale(1, 0.6f); matrix.postScale(0.7f, 1); matrix.preTranslate(15, 0); 其坐标变换顺序是translate(15, 0) -> scale(1, 0.6f) -> scale(0.7f, 1).
Canvas里scale, translate, rotate, concat方法都是pre方法，如果要进行更多的变换可以先从canvas获得matrix, 变换后再设置回canvas.
好了，接下来看看我在测试过程中所canvas.concat和canvas.translate两个方法调用不同所导致的结果不同。
现在解释下面两张图的为什么不同效果：
第一张图的代码是：
mBmp=BitmapFactory.decodeResource(getResources(), R.drawable.guide_page01);
canvas.save();
float src[]={0,0,getWidth(),0,getWidth(),getHeight(),0,getHeight()};
float sou[]={0,0,(float)(getWidth()),(float)(100),(float)(getWidth()),(float)(200),0,(float)(getHeight())};
//canvas.clipRect(0, 0, getWidth(), getHeight()/2);
m.setPolyToPoly(src, 0, sou, 0, src.length/2);
Paint paint=new Paint();
paint.setColor(Color.RED);
//canvas.translate(50, 50);
canvas.drawRect(0, 0, 10, 10, paint);
canvas.translate(200,200);
canvas.concat(m);
//canvas.clipRect(150,150, 300, 300);
//canvas.clipRect(0,0,200,200);
//canvas.clipRect(getWidth()/2-getWidth()/6, getHeight()/2-getWidth()/6, getWidth()/2+getWidth()/6, getHeight()/2+getHeight()/6);
canvas.drawBitmap(mBmp,0,0,null);
由上面的资料可以知道，这段代码是先将原来的图进行了polytopoly矩阵变换，然后在原来的基础上进行了translate上下移动变换变换，所以比较容易理解。
对于第二张图的源码：
mBmp=BitmapFactory.decodeResource(getResources(), R.drawable.guide_page01);
canvas.save();
float src[]={0,0,getWidth(),0,getWidth(),getHeight(),0,getHeight()};
float sou[]={0,0,(float)(getWidth()),(float)(100),(float)(getWidth()),(float)(200),0,(float)(getHeight())};
//canvas.clipRect(0, 0, getWidth(), getHeight()/2);
m.setPolyToPoly(src, 0, sou, 0, src.length/2);
Paint paint=new Paint();
paint.setColor(Color.RED);
//canvas.translate(50, 50);
canvas.drawRect(0, 0, 10, 10, paint);
canvas.concat(m);
canvas.translate(200,200);
//canvas.clipRect(150,150, 300, 300);
//canvas.clipRect(0,0,200,200);
//canvas.clipRect(getWidth()/2-getWidth()/6, getHeight()/2-getWidth()/6, getWidth()/2+getWidth()/6, getHeight()/2+getHeight()/6);
canvas.drawBitmap(mBmp,0,0,null);
第二张的效果图是因为，首先先将canvas移动了，即translate，然后又通过polytopoly的方法，根据点位置进行了变换，如果有对此有疑惑的同学，可以上网搜搜polytopoly的方法，再来理解这个效果会比较好。
版权声明：本文为博主原创文章，未经博主允许不得转载。