《Android群英传》读书笔记（6）第六章：Android绘图机制与处理技巧之二

1.色彩特效处理

1.色彩矩阵分析

在色彩处理中通常从下面三个角度描述一个图像：

色调——物体传播的颜色
饱和度——颜色的纯度，从0（灰）到100%（饱和）来进行描述
亮度——颜色的相对明暗度

Android中使用一个颜色矩阵ColorMatrix来处理这些效果，这个矩阵是一个4x5的数组矩阵，它用力对图片的色彩进行处理。而对于每一个像素点，都有一个颜色分量矩阵用来保存颜色的RGBA值，例如下面就是一个ColorMatrix矩阵A：

a	b	c	d	e
f	g	h	i	j
k	l	m	n	o
p	q	r	s	t

另外保存每个像素点的颜色分量矩阵C如下所示：

R
G
B
A

在处理图像时，使用矩阵乘法运算来处理颜色分量矩阵得到新的颜色分量为：

R1=axR+bxG+cxB+dxA+e;G1=fxR+gxG+hxB+ixA+j;B1=kxR+lxG+mxB+nxA+o;A1=pxR+qxG+rxB+sxA+t;

ColorMatrix矩阵中的每一行分别决定了新颜色的R、G、B、A的值，同时矩阵的第五列e、j、o、t分别决定每个分量中的offset偏移量。
初始矩阵：

0	0	0
1	0	0
0	1	0
0	0	1

通过初始矩阵变换的颜色与原来的颜色值相同。

2.改变色光属性

色调

改变色调可以通过ColorMatrix类中的setRotate(int axis,float degree)方法来实现，第一个参数分别用0，1，2来代表R、G、B三个颜色通道，第二个参数是需要处理的值：

ColorMatrix hueMatrix = new ColorMatrix();hueMatrix.setRotate(0,hue0);hueMatrix.setRotate(1,hue1);hueMatrix.setRotate(2,hue2);

饱和度

饱和度可以通过setSaturation(float sat)来进行设置

ColorMatrix saturationMatrix = new ColorMatrix(); saturationMatrix.setSaturation(saturation);

亮度

使用setScale(flaot rScale,float gScale,float bScale,float aScale)来改变亮度：

ColorMatrix lumMatrix = new ColorMatrix(); lumMatrix.setScale(lum,lum,lum,1);

三种混合

ColorMatrix matrix = new ColorMatrix();matrix.postConcat(hueMatrix);matrix.postConcat(saturationMatrix);matrix.postConcat(lumMatrix);

将矩阵设置到Paint上：

paint.setColorFilter(new ColorMatrixColorFilter(matrix));canvas.drawBitmap(bm,0,0,paint);

需要注意不能直接在原图上进行修改，需要创建一个和原图一样大小的Bitmap，并将原图绘制到该Bitmap上，下面的代码中，bmp为新创建的，bm为原图：

Bitmap bmp = Bitmap.createBitmap(bm.getWidth(),bm.getHeight(),Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(bmp);canvas.drawBitmap(bm,0,0,paint);

3.常用的处理效果

灰度效果

0.33F	0.59F	0.11F	0
0.33F	0.59F	0.11F	0
0.33F	0.59F	0.11F	0
0	0	0	1

- 图像反转

0	0	1	1
-1	0	1	1
0	-1	1	1
0	0	1	0

- 怀旧效果

0.393F	0.769F	0.189F	0
0.349F	0.686F	0.168F	0
0.272F	0.534F	0.131F	0
0	0	0	1

- 去色效果

1.5F	1.5F	1.5F	0	-1
1.5F	1.5F	1.5F	0	-1
1.5F	1.5F	1.5F	0	-1
0	0	0	1	0

- 高饱和度

1.438F	-0.122F	-0.016F	0	-0.03F
-0.062F	1.378F	-0.016F	0	0.05F
-0.062F	-0.122F	1.483F	0	-0.02F
0	0	0	1	0

4.像素点分析

Bitmap类中提供了Bitmap.getPixels(int[] pixels,int offset,int stride,int x,int y,int width,int height);这几个参数的含义如下：

pixels——接收位图颜色值的数组
offset——写入到pixels[]中的第一个像素的索引值
stride——pixels[]中的行间距
x——从位图中读取的第一个像素的x坐标值
y——从位图中读取的第一个像素的y坐标值
width——从每一行中读取的像素宽度
height——读取的行数

通常可以使用如下代码：
bitmap.getPixels(oldPxs,0,bm.getWidth(),0,0,bm.getWidth(),bm.getHeight());
然后通过Color类还获取具体每个像素的ARGB值：

int color = oldPxs[i];int r = Color.red(color);int g = Color.green(color);int b = Color.blue(color);int a = Color.alpha(color);

然后就可以根据相应的算法来修改ARGB值了，例如：

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);newPxs[i] = Color.argb(a,r1,g1,b1);

最后调用bmp.setPixels(newPxs,0,width,0,0,width,height);设置给新的Bitmap。

2.图形特效处理

1.Android变形矩阵——Matrix

图形变换矩阵是一个3x3的矩阵：

a	b	c
d	e	f
g	h	i

和每个像素点的坐标信息相乘：

X1
Y1
1

就可以得到新的坐标：

X1 = axX + bxY +c;Y1 = dxX + exY +f;1 = gxX + hxY + i;

同常会让g=h=0，i=1使下面的等式恒成立，因此只需要关注a、b、c、d、e、f这几个参数就可以了。
初始矩阵：

1	0	0
0	1	0
0	0	1

变形处理通常有四种：

平移变换
平移变换矩阵：

1	0	dx
0	1	dy
0	0	1

通过计算可以发现如下等式：
X = X0 + dx;
Y = Y0 + dy;
- 旋转变换
旋转变换矩阵：

cosθ	-sinθ	0
sinθ	cosθ	0
0	0	1

- 缩放变换
缩放变换矩阵：

K1	0	0
0	K2	0
0	0	1

- 错切变换
计算公式：

x=x0 + k1*y0;y=k2*x0 + y0

矩阵：

1	k1	0
k2	1	0
0	0	1

- 矩阵变换规律

Scale_X	Skew_Y	Trans_X
Skew_Y	Scale_Y	Trans_Y
0	0	1

矩阵的使用

private float[] mImageMatrix = new float[9];Matrix matrix = new Matrix();matrix.setValues(mImageMatrix);canvas.drawBitmap(mBitmap,matrix,null);

其实Matrix类中已经封装好了这些方法

matrix.setRotate()——旋转变换
matrix.setTranslate()——平移变换
matrix.setScale()——缩放变换
matrix.setSkew()——错切变换
pre()和post()——提供矩阵的前乘和后乘

Matrix类中的set方法会充值矩阵中的所有值，但post和pre不会，这两个方法常用来实现矩阵的混合作用。要注意的是，矩阵不满足交换律，所以矩阵乘法的前乘和后乘是两种不同的运算方式。
比如要实现先平移到（300，300）再旋转45度，最后平移到（200，200）
如果使用后乘：

matrix.setRotate(45);matrix.postTranslate(200,200);

如果使用前乘运算：

matrix.setTranslate(200,200);matrix.preRotate(45);

2.像素块分析

drawBitmapMesh(Bitmap bitmap,int meshWidth,int meshHeight,float[] verts,float vertOffset,int[] colors,int colorOffset,Paint paint);方法可以把图像分成一个一个的小块进行处理，其中各个参数的含义如下：

bitmap——将要操作的图像
meshWidth——需要的横向网格数
meshHeight——需要的纵向网格数
verts——网格交叉点坐标数组
verftOffset——数组中开始跳过的（x，y）坐标数目
其中meshWidth和meshHeight以及verts的对应关系为：
float[] verts = new float[(meshWidth + 1) * (meshHeight + 1)]
下面的代码实现了飘扬的旗帜的效果：

public class FlagView extends View {    private static final int WIDTH = 40;    private static final int HEIGHT = 40;    private float[] orig = new float[(WIDTH + 1) * (HEIGHT + 1) * 2];    private float[] verts = new float[(WIDTH + 1) * (HEIGHT + 1) * 2];    public FlagView(Context context) {        this(context, null);    }    public FlagView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public FlagView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private Bitmap bitmap;    private void init() {        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test2);        float bitmapWidth = bitmap.getWidth();        float bitmapHeight = bitmap.getHeight();        int index = 0;        for (int y = 0; y <= HEIGHT; y++) {            float fy = y * bitmapHeight/ HEIGHT;            for (int x = 0; x <= WIDTH; x++) {                float fx = x * bitmapWidth / WIDTH;                orig[index * 2 + 0] = verts[index * 2 + 0] = fx;                orig[index * 2 + 1] = verts[index * 2 + 1] = fy + 100;                index += 1;            }        }    }    private static final int A = 30;    @Override    protected void onDraw(Canvas canvas) {        flagWave();        k += 0.1f;        canvas.drawBitmapMesh(bitmap, WIDTH, HEIGHT, verts, 0, null, 0, null);        postInvalidateDelayed(50);    }    private float k = 0;    private void flagWave() {        for (int j = 0; j <= HEIGHT; j++) {            for (int i = 0; i <= WIDTH; i++) {                float offsetY = (float) Math.sin((float) i / WIDTH * 2 * Math.PI + Math.PI * k);                verts[(j * (WIDTH + 1) + i) * 2 + 0] += 0;                verts[(j * (WIDTH + 1) + i) * 2 + 1] =                        orig[(j * (WIDTH + 1) + i) * 2 + 1] + offsetY * A;            }        }    }}

3.画笔特效处理

1.PorterDuffXfermode

PorterDuffXfermode设置的是两个图层交集区域的显示方式，dst是先画的图，src是后画的图。PorterDuffXfermode的几种模式可以用下图表示：

下面代码展示了使用PorterDuffXfermode绘制圆角矩形图片的方法：

mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.test1);mOut = Bitmap.createBitmap(mBitmap.getWidth(),mBitmap.getHeight(),Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(mOut);Paint paint = new Paint();paint.setAntiAlias(true);canvas.drawRoundRect(0,0,mBitmap.getWidth(),mBitmap.getHeight(),40,40,paint);paint.setXferMode(PorterDuff.Mode.SRC_IN);canvas.drawBitmap(mBitmap,0,0,mPaint);

下面展示使用PorterDuffXfermode实现的刮刮卡效果：

public class LuckyCardView extends View{    public LuckyCardView(Context context){        super(context,null);    }    public LuckyCardView(Context context,AttributeSet attrs,int defStyleAttr){        super(context.attrs,0);        init();    }    private Paint mPaint;    private Path mPath;    private Canvas mCanvas;    private Bitmap mBgBitmap;    private Bitmap mFgBitmap;    private void init(){        initPaint();        mBgBitmap = BitmapFactory.decodeResources(getResources(),R.drawable.test2);        mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(),mBgBitmap.getHeight().Bitmap.Config.ARGB_8888);        mCanvas = new Canvas(mFgBitmap);        mCanvas.drawColor(Color.GRAY);    }    @Override    protected void onDraw(Canvas canvas){        canvas.drawBitmap(mBgBitmap,0,0,null);        canvas.drawBitmap(mFgBitmap,0,0,null);    }    @Override    protected boolean onTouchEvent(MotionEvent event){        switch(event.getAction()){            case MotionEvent.ACTION_DOWN:                mPath.reset();                mPath.moveTo(event.getX(),event.getY());                break;            case MotionEvent.ACTION_MOVE:                mPath.lineTo(event.getX(),event.getY());                break;            case MotionEvent.ACTION_UP:                break;        }        mCanvas.drawPath(mPath,mPaint);        invalidate();        return true;    }    private void initPaint(){        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setStrokeJoin(Paint.Join.ROUND);        mPaint.setStrokeCap(Paint.Cap.ROUND);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setStrokeWidth(50);        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));        mPaint.setAlpha(0);    }}

2.Shader

Shader称为着色器、渲染器，它用来实现一系列的渐变、渲染效果，Android中的Shader包括以下几种

BitmapShader——位图Shader
LinearGradient——线性Shader
RadialGradient——光束Shader
SweepGradient——梯度Shader
ComposeShader——混合Shader

与其他几个不同，BitmapShader产生的是一个图像，它的作用是通过Paint对画布进行指定 Bitmap填充，填充时有以下几种模式选择：

CLAMP拉伸——拉伸的是图片的最后那一个像素
REPEAT重复——横向、纵向不断重复
MIRROR镜像——横向、纵向不断反转重复
下面是BitmapShader的使用示例：

@Override    protected void onDraw(Canvas canvas) {        Paint paint = new Paint();        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test2);        Shader shader = new BitmapShader(bitmap,Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);        paint.setShader(shader);        canvas.drawCircle(getMeasuredWidth() / 2,384,384,paint);    }

效果如下所示：

3.PathEffect

下面是PathEffect使用示例

public class PathEffectView extends View {    public PathEffectView(Context context) {        this(context, null);    }    public PathEffectView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    private Paint mPaint;    private Path mPath;    private PathEffect mEffects[] = new PathEffect[6];    private void init() {        mPaint = new Paint();        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setAntiAlias(true);        mPath = new Path();        mPath.moveTo(0, 0);        for (int i = 0; i < 30; i++) {            mPath.lineTo(i * 30, (float) (Math.random() * 100));        }        mEffects[0] = null;        mEffects[1] = new CornerPathEffect(30);        mEffects[2] = new DiscretePathEffect(3.0f, 5.0f);        mEffects[3] = new DashPathEffect(new float[]{15, 10}, 0);        Path path = new Path();        path.addRect(0, 0, 8, 8, Path.Direction.CCW);        mEffects[4] = new PathDashPathEffect(path, 20, 5, PathDashPathEffect.Style.ROTATE);        mEffects[5] = new ComposePathEffect(mEffects[3], mEffects[1]);    }    @Override    protected void onDraw(Canvas canvas) {        for (int i = 0; i < mEffects.length; i++) {            canvas.translate(0, 100);            mPaint.setPathEffect(mEffects[i]);            canvas.drawPath(mPath, mPaint);        }    }}