Android 中camera 、 Matrix 和画图进阶学习

Android 中camera 、 Matrix 和画图进阶学习

参考：

http://www.gcssloop.com/customview/matrix-3d-camera

http://blog.csdn.net/iispring/article/details/50472485

http://www.jianshu.com/p/6aa6080373ab

自定义控件之绘制控件学习：

最近在学习控件的绘制，感觉控件的绘制分这么几个层次：

第一层：最基本的canvas的那几个draw 和 ValueAnomator的组合

第二层：Path和pathMeasure以及贝塞尔曲线的使用

第三层：camera和Matrix的使用

基本上要做手动出动态的控件动画都离不开ValueAnomator。对于绘制一些带有皱着或者整体要移动的动画用camera和Matrix实现比较方便。

自定义控件在绘制之外，另外一个便是事件的处理和手势的处理。感觉能融会贯通，自定义控件就ok了应该。

接下来着重就第三层的几个对象进行下学习。

camera类

这个类位于package android.graphics 包下，用于图像3D变换，通过旋转、偏移等方式，最终通过getMatrix(Matrix)方法拿到矩阵，作用于canvas，使得画面呈现出立体效果

camera和matrix的相互关联代码比较固定：



注意：

canvas.concat(matrix);

canvas.setMatrix(matrix);

cancat应用于当前画布的全部“对象”，而setMatrix针对于当前画布，也就是说如果做平移，画布也会做平移。

Matrix类

Matrix是一个3*3的矩阵：



从名字上看可以看出他们对应的功能：

l MTRANS_X、MTRANS_Y 同时控制着 Translate

l MSCALE_X、MSCALE_Y 同时控制着 Scale

l MSCALE_X、MSKEW_X、MSCALE_Y、MSKEW_Y 同时控制着 Rotate

l 从名称上看，我们可以顺带看出 MSKEW_X、MSKEW_Y 同时控制着 Skew

对应的它提供了对应的api供我们使用：

translate(平移)

rotate(旋转)

scale(缩放)

skew(错切)

而无需再去直接对矩阵进行变化。他们默认变化的轴线为x,y,z轴。



matrix中的注意点：

Post、 pre、 set 其实代表了Matrix 中方法变换的次序，pre是在执行动画之前向前加入队列执行，post是在执行动画之后从后面加入队列执行。

eg：

matrix.preScale(2f,1f); matrix.preTranslate(5f, 0f);

matrix.postScale(0.2f, 1f); matrix.postTranslate(0.5f, 0f);

方法执行的顺序为：

translate(5, 0) -> scale(2f, 1f) ->scale(0.2f, 1f) -> translate(0.5f, 0f)

而matrix的set方法则会对先前的pre和post操作进行清除，而后再设置它的值，比如下列的方法调用:

matrix.postTranslate(2f,0f); matrix.preScale(0.2f, 1f);

matrix.setScale(1f, 1f); matrix.postScale(5f,1f); matrix.preTranslate(0.5f, 0f); 方法执行的顺序为：

translate(0.5f, 0f) -> scale(1f,1f) -> scale(5f, 1)。

Canvas里scale, translate,rotate, concat方法都是pre方法，如果要进行更多的变换可以先从canvas获得matrix, 变换后再设置回canvas.

Canvas绘图之PorterDuffXfermode

下面这幅图有点坑，并不是实际的效果图。



实际效果图如下：



代码：



原理；

Android在绘图时会先检查该画笔Paint对象有没有设置Xfermode，如果没有设置Xfermode，那么直接将绘制的图形覆盖Canvas对应位置原有的像素；如果设置了Xfermode，那么会按照Xfermode具体的规则来更新Canvas中对应位置的像素颜色。

所绘制的图形中的像素称作源像素（source，简称src），所绘制的矩形在Canvas中对应位置的矩形内的像素称作目标像素（destination，简称dst）

通过camera这个方法，我们可以实现在一个固定的形状下面绘制各种效果:



附录：

我修炼自定义控件的项目git地址：
https://github.com/huhanghao/TestForCoolView