计算机微刊AndroidWorldAndroid自定义控件

Android图像处理技巧理论

2017-10-03  本文已影响93人  一个有故事的程序员

导语

书上讲的很细，还讲了一些原理，原理需要一些线性代数的知识，线代都忘光了，主要看后面的实例就Ok了，看实例戳我。

主要内容

具体内容

Android对于图片的处理，最常使用到的数据结构是位图——Bitmap，它包含了一张图片所有的数据。
整个图片都是由点阵和颜色值组成的，所谓点阵就是一个包含像素的矩阵，第一个元素对应着图片的一个像素。而颜色值——ARGB，分别对应透明度、红、绿、蓝这四个通道分量，它们共同决定了每个像素点显示的颜色。

色彩特效处理

Bitmap图片都是由点阵和颜色值组成的，所谓点阵就是一个包含像素的矩阵，每一个元素对应着图片的一个像素。而颜色值——ARGB，分别对应透明度、红、绿、蓝这四个通道分量，它们共同决定了每个像素点显示的颜色。

色彩矩阵分析

在色彩处理中，我们通常用三个角度描述一张图片：

而在Android中，系统会使用一个颜色矩阵——ColorMatrix,来处理这些色彩的效果，Android中的颜色矩阵是4X5的数字矩阵，他用来对颜色色彩进行处理，而对于每一个像素点，都有一个颜色分量矩阵来保存ARGB值。

根据前面对矩阵A、C的定义，通过矩阵乘法运算法则，可以得到：

矩阵运算的乘法计算过程如下：

我们观察颜色矩阵A：

从这个公式可以发现：

通过一个小例子来讲解：
首先重新看一下矩阵变换计算公式，以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分量会变成以前的两倍，最终效果就是图像的色调更加偏绿。

下面通过实例看看如何通过矩阵改变图像的色调、饱和度和亮度：

ColorMatrix hueMatrix = new ColorMatrix();
hueMatrix.setRotate(0, hue);
hueMatrix.setRotate(1, hue);
hueMatrix.setRotate(2, hue);

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

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

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);

这几个参数的具体含义如下：

通常使用如下代码：

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;

与颜色矩阵一样，也有一个初始矩阵：

图像的变形处理包含以下四类基本变换：

平移变换：即对每个像素点都进行平移变换，通过计算可以发现如下平移公式：

X = X0 + △X;
Y = Y0 + △Y;

旋转变换：通过以下三步骤完成以任意点为旋转中心的旋转变换：

缩放变换：缩放变换的效果计算公式如下：

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(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);

参数分析：

画笔特效处理

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有三种模式可以选择：

下面看下例子说明，圆形图片：

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方式：

我们通过一个实例来认识这些效果：

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需要频繁刷新，或者刷新数据处理量比较大，就可以考虑使用SurfaceView替代View。

SurfaceView的使用

SurfaceView使用步骤：

整个使用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代码块中，保证每次都能将内容提交。

总结

更多内容戳这里（整理好的各种文集）

上一篇下一篇

猜你喜欢

热点阅读