导语
书上讲的很细，还讲了一些原理，原理需要一些线性代数的知识，线代都忘光了，主要看后面的实例就Ok了，看实例戳我。
主要内容
- 色彩特效处理
- 图形特效处理
- 画笔特效处理
- SurfaceView
具体内容
Android对于图片的处理，最常使用到的数据结构是位图——Bitmap，它包含了一张图片所有的数据。
整个图片都是由点阵和颜色值组成的，所谓点阵就是一个包含像素的矩阵，第一个元素对应着图片的一个像素。而颜色值——ARGB，分别对应透明度、红、绿、蓝这四个通道分量，它们共同决定了每个像素点显示的颜色。
色彩特效处理
Bitmap图片都是由点阵和颜色值组成的，所谓点阵就是一个包含像素的矩阵，每一个元素对应着图片的一个像素。而颜色值——ARGB，分别对应透明度、红、绿、蓝这四个通道分量，它们共同决定了每个像素点显示的颜色。
色彩矩阵分析
在色彩处理中，我们通常用三个角度描述一张图片：
- 色调：物体传播的颜色。
- 饱和度：颜色的纯度，从0（灰）-100%（饱和）来进行描述。
- 亮度：颜色的相对明暗程度。
而在Android中，系统会使用一个颜色矩阵——ColorMatrix,来处理这些色彩的效果，Android中的颜色矩阵是4X5的数字矩阵，他用来对颜色色彩进行处理，而对于每一个像素点，都有一个颜色分量矩阵来保存ARGB值。
根据前面对矩阵A、C的定义，通过矩阵乘法运算法则，可以得到：
矩阵运算的乘法计算过程如下：
我们观察颜色矩阵A：
从这个公式可以发现：
- 第一行的abcde用来决定新的颜色值R——红色。
- 第二行的fghij用来决定新的颜色值G——绿色。
- 第三行的kimno用来决定新的颜色值B——蓝色。
- 第四行的pqrst用来决定新的颜色值A——透明度。
- 矩阵A中的第五列——ejot值分别用来决定每个分量中的offset，即偏移量。
通过一个小例子来讲解：
首先重新看一下矩阵变换计算公式，以R分量为例，计算过程如下：
R1 = a * R + b* G + c*B+d *A + e
如果让a = 1，b、c、d、e都等于0，那么计算的结果为R1 = R，因此我们可以构建一个矩阵：
如果把这个矩阵公式带入R1 = AC，那么根据矩阵的乘法运算法则，可以得到R1 = R。因此，这个矩阵通常是用来作为初始的颜色矩阵来使用，他不会对原有颜色进行任何变化。
那么当我们要变换颜色值的时候，通常有两种方法。一个是直接改变颜色的offset，即偏移量的值来修改颜色的分量。另一种方法直接改变对应RGBA值的系数来调整颜色分量的值。
从前面的分析中，可以知道要修改R1的值，只要将第五列的值进行修改即可。即改变颜色的偏移量，其它值保存初始矩阵的值，如图：
在上面这个矩阵中，我们修改了R、G所对应的颜色偏移量，那么最后的处理结果就是图像的红色、绿色分别增加了100。而我们知道，红色混合绿色会得到黄色，所以最终的颜色处理结果就是让整个图片的色调偏黄色。
如果修改颜色分量中的某个系数值，而其他只依然保存初始矩阵的值，如图：
在上面这个矩阵中，改变了G分量所对应的系数g，这样在矩形运算后G分量会变成以前的两倍，最终效果就是图像的色调更加偏绿。
下面通过实例看看如何通过矩阵改变图像的色调、饱和度和亮度：
- 色调：setRotate(int axis, float degree)，第一个参数分别使用0、1、2代表Red、Green、Blue三种颜色，第二参数需要处理的值。
ColorMatrix hueMatrix = new ColorMatrix();
hueMatrix.setRotate(0, hue);
hueMatrix.setRotate(1, hue);
hueMatrix.setRotate(2, hue);
- 饱和度：setSaturation(float sat)，参数代表设置饱和度的值。
ColorMatrix saturationMatrix = new ColorMatrix();
saturationMatrix.setSaturation(saturation);
- 亮度：setScale(float rscale,float gscale,float bscale,float ascale)，参数分别是红、绿、蓝、透明度的亮度大小值。
ColorMatrix lumMatrix = new ColorMatrix();
lumMatrix.setScale(lum, lum, lum, 1);
- 除了单独使用上面三种方式来进行颜色效果处理之外，还提供了postConcat()方法来将矩阵的作用效果混合，从而叠加处理效果。
ColorMatrix imageMatrix = new ColorMatrix();
imageMatrix.postConcat(hueMatrix);
imageMatrix.postConcat(saturationMatrix);
imageMatrix.postConcat(lumMatrix);
常用图像颜色矩阵处理效果
- 灰色效果：
- 图像反转：
- 怀旧效果：
- 去色效果：
- 高饱和度：
像素点分析
在Android中，系统系统提供了Bitmap.getPixels()方法来帮我们提取整个Bitmap中的像素点，并保存在一个数组中：
bitmap.getPixels(pixels, offset, stride, x, y, width, height);
这几个参数的具体含义如下：
- pixels：接收位图颜色值的数组。
- offset：写入到pixels[]中的第一个像素索引值。
- stride：pixels[]中的行间距。
- x：从位图中读取的第一个像素的ｘ坐标值。
- y：从位图中读取的第一个像素的y坐标值。
- width：从每一行中读取的像素宽度。
- height：读取的行数。
通常使用如下代码：
bitmap.getPixels(oldPx, 0, bitmap.getWidth(), 0, 0, width, height);
接下来获取每个像素具体的ARGB值：
color = oldPx[i];
r = Color.red(color);
g = Color.green(color);
b = Color.blue(color);
a = Color.alpha(color);
接下来就是修改像素值，产生新的像素值：
r1 = (int) (0.393 * r + 0.769 * g + 0.189 * b);
g1 = (int) (0.349 * r + 0.686 * g + 0.168 * b);
b1 = (int) (0.272 * r + 0.534 * g + 0.131 * b);
newPx[i] = Color.argb(a, r1, b1, g1);
最后使用我们的新像素值：
bmp.setPixels(newPx, 0, width, 0, 0, width, height);
图形特效处理
Android变形矩阵——Matrix
对于图形变换，系统提供了3x3的举证来处理：
与颜色矩阵一样，计算方法通过矩阵乘法：
X1 = a x X +b x Y +c;
Y1 = d x X +e x Y +f;
1 = g x X +h x Y + i;
与颜色矩阵一样，也有一个初始矩阵：
图像的变形处理包含以下四类基本变换：
- Translate：平移变换。
- Rotate：旋转变换。
- Scale：缩放变换。
- Skew：错切变换。
平移变换：即对每个像素点都进行平移变换，通过计算可以发现如下平移公式：
X = X0 + △X;
Y = Y0 + △Y;
旋转变换：通过以下三步骤完成以任意点为旋转中心的旋转变换：
- 将坐标原点平移到O点。
- 使用前面讲的以坐标原点为中心的旋转方法进行旋转变换。
- 将坐标原点还原。
缩放变换：缩放变换的效果计算公式如下：
x = K1 X x0;
y = K2 X y0;
错切变换：错切变换的效果计算公式如下：
x = x0 + k1 + y0
y = k2 x x0 + y0
了解四种图形变换矩阵，可以通过setValues()方法将一个一维数组转换为图形变换矩阵：
private float [] mImageMatrix = new float[9];
Matrix matrix = new Matrix();
matrix.setValues(mImageMatrix);
canvas.drawBitmap(mBitmmap,matrix,null);
Android中Matrix类也帮我们封装好了几个操作方法：
- matrix.setRotate()：旋转变换。
- matrix.setTranslate()：平移变换。
- matrix.setScale()：缩放变换。
- matrix.setSkew()：错切变换。
- pre()和post()：提供矩阵的前乘和后乘运算。
举个例子说明前乘和后乘的不同运算方式：
- 先平移到（300， 100）。
- 再旋转45度。
- 最后平移到（200, 200）。
matrix.setRotate(45);
matrix.postTranslate(200, 200);
如果使用前乘运算，代码如下：
matrix.setTranslate(200, 200);
matrix.perRotate(45);
像素块分析
drawBitmapMesh()与操纵像素点来改变色彩的原理类似，只不过是把图像分成了一个个的小块，然后通过改变每一个图像块来修改整个图像：
canvas.drawBitmapMesh(Bitmap bitmap,int meshWidth,int meshHeight,float [] verts,
int vertOffset,int [] colors,int colorOffset,Paint paint);
参数分析：
- bitmap：将要扭曲的图像。
- meshWidth：需要的横向网格数目。
- meshHeight：需要的纵向网格数目。
- verts：网格交叉点的坐标数组。
- vertOffset：verts数组中开始跳过的(X,Y)坐标对的数目。
画笔特效处理
PorterDuffXfermode
PorterDuffXfermod设置的是两个图层交集区域的显示方式，dst是先画的图形，而src是后画的图形。
以一个圆角图片为例子：
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test1);
mOut = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mOut);
mPaint = new Paint();
mPaint.setAntiAlias(true);
canvas.drawRoundRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), 80, 80, mPaint);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(mBitmap,0,0,mPaint);
效果图，由于图片过大，只能看出一边角：
Shader
Shader又被称为着色器。渲染器，它可以实现渲染，渐变等效果，Android中的Shader包括以下几种：
- BitmapShader：位图Shader。
- LinearGradient：线性Shader。
- RadialGradient：光束Shader。
- SweepGradient：梯形Shader。
- ComposeShader：混合Shader。
其中BitmapShader有三种模式可以选择：
- CLAMP拉伸：拉伸的是图片最后的那一个像素，不断重复。
- REPEAT重复：横向，纵向不断重复。
- MIRROR镜像：横向不断翻转重复，纵向不断翻转重复。
下面看下例子说明，圆形图片：
mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.nice);
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
mPaint = new Paint();
mPaint.setShader(mBitmapShader);
canvas.drawCircle(500,250,200,mPaint);
效果图：
下面把TileMode改为REPEAT：
mBitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
mPaint = new Paint();
mPaint.setShader(mBitmapShader);
canvas.drawCircle(500,250,200,mPaint);
使用LinearGradient：
mPaint = new Paint();
mPaint.setShader(new LinearGradient(0,0,400,400, Color.BLUE,Color.YELLOW, Shader.TileMode.REPEAT));
canvas.drawRect(0,0,400,400,mPaint);
效果图：
PathEffect
先上一张直观的图：
Android提供的几种绘制PathEffect方式：
- 没效果。
- CornerPathEffect：拐弯角变得圆滑。
- DiscretePathEffect：线段上会产生许多杂点。
- DashPathEffect：绘制虚线，用一个数据来设置各个点之间的间隔。
- PathDashPathEffect：绘制虚线，可以使用方形点虚线和圆形点虚线。
- ComposePathEffect：可任意组合两种路径（PathEffect）的特性。
我们通过一个实例来认识这些效果：
public class PathEffectView extends View{
private Path mPath;
private PathEffect [] mEffect = new PathEffect[6];
private Paint mPaint;
/**
* 构造方法
* @param context
* @param attrs
*/
public PathEffectView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
/**
* 初始化
*/
private void init() {
mPaint = new Paint();
mPath = new Path();
mPath.moveTo(0,0);
for (int i = 0; i<= 30;i++){
mPath.lineTo(i*35,(float)(Math.random()*100));
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mEffect[0] = null;
mEffect[1] = new CornerPathEffect(30);
mEffect[2] = new DiscretePathEffect(3.0F,5.0F);
mEffect[3] = new DashPathEffect(new float[]{20,10,5,10},0);
Path path = new Path();
path.addRect(0,0,8,8,Path.Direction.CCW);
mEffect[4]= new PathDashPathEffect(path,12,0,PathDashPathEffect.Style.ROTATE);
mEffect[5] = new ComposePathEffect(mEffect[3],mEffect[1]);
for (int i = 0; i<mEffect.length;i++){
mPaint.setPathEffect(mEffect[i]);
canvas.drawPath(mPath,mPaint);
canvas.translate(0,200);
}
}
}
每绘制一个Path，就将画布平移，从而让各种PathEffect依次绘制出来。效果图：
View之孪生兄弟——SurfaceView
SurfaceView与View的区别
View的绘制刷新间隔时间为16ms，如果在16ms内完成你所需要执行的所有操作，那么在用户视觉上，就不会产生卡顿的感觉，否则，就会出现卡顿，所以可以考虑使用SurfaceView来替代View的绘制。
通常在Log会看到这样的提示：
Skipped 47 frames! The application may be doing too much work on its main thread
SurfaceView与View的主要区别：
- View主要适用于主动更新的情况下，而surfaceVicw主要适用于被动更新，例如频繁刷新。
- View在主线程中对画面进行刷新，而surfaceView通常会通过一 个子线程来进行页面的刷新。
- View在绘制时没有使用双缓冲机制，而surfaceVicw在底层实现机制中就已经实现了双缓冲机制。
总结一句话就是，如果你的自定义View需要频繁刷新，或者刷新数据处理量比较大，就可以考虑使用SurfaceView替代View。
SurfaceView的使用
SurfaceView使用步骤：
- 创建SurfaceView继承自SurfaceView，并实现两个接口——SurfaceHolder.Callback和Runnable。
- 初始化SurfacHolder对象，并注册SurfaceHolder的回调方法。
- 通过SurfacHolder对象lockCanvas()方法获得Canvas对象进行绘制，并通过unlockCanvasAndPost(mCanvas)方法对画布内容进行提交。
整个使用SurfaceView的模板代码：
public class SurfaView extends SurfaceView implements SurfaceHolder.Callback, Runnable {
//SurfaceHolder
private SurfaceHolder mHolder;
//用于绘制的Canvas
private Canvas mCanvas;
//子线程标志位
private boolean mIsDrawing;
/**
* 构造方法
*
* @param context
* @param attrs
*/
public SurfaView(Context context, AttributeSet attrs) {
super(context, attrs);
mHolder = getHolder();
mHolder.addCallback(this);
setFocusable(true);
setFocusableInTouchMode(true);
setKeepScreenOn(true);
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
mIsDrawing = true;
new Thread(this).start();
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
mIsDrawing = false;
}
@Override
public void run() {
while (mIsDrawing) {
draw();
}
}
private void draw() {
try {
mCanvas = mHolder.lockCanvas();
} catch (Exception e) {
} finally {
if (mCanvas != null) {
//提交
mHolder.unlockCanvasAndPost(mCanvas);
}
}
}
}
唯一注意的是，在绘制中将mHolder.unlockCanvasAndPost(mCanvas)方法放到finally代码块中，保证每次都能将内容提交。
