Android开发之高级渲染

前言：关于图像的渲染，一些刚接触paint的人无所下手，或者很少使用这个功能，so，今天我总结了以下几个常用的渲染效果：1、BimapShader位图的图像渲染器，2、LinearGradient线性渲染。3、RadialGradient环形渲染。4、SweepGradient梯度渲染(扫描渲染)，5、ComposeShader组合渲染，当然这些都属于paint的高级使用！

------------------ 一：BitmapShader位图的图像渲染--------------------

1、BitmapShader位图的简单使用。

TileMode.CLAMP 拉伸最后一个像素去铺满剩下的地方

TileMode.MIRROR 通过镜像翻转铺满剩下的地方。

TileMode.REPEAT 重复图片平铺整个画面（电脑设置壁纸）

ok，来看一下我们具体的使用：

public class MyGradientView extends View {

    private Bitmap mBitmap;
    private Paint mPaint;
    private int mBitmapHeight;
    private BitmapShader mBitmapShader;
    private int mBitmapWidth;

    public MyGradientView(Context context) {
        super(context);
        mBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.u)).getBitmap();
        mPaint = new Paint();
        mBitmapHeight = mBitmap.getHeight();
        mBitmapWidth = mBitmap.getWidth();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
//        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
//        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        mPaint.setAntiAlias(true);
        mPaint.setShader(mBitmapShader);
        canvas.drawRect(new Rect(0, 0, 2000, 2000), mPaint);

    }
}

三个效果依旧是：

TileMode.REPEAT：

TileMode.MIRROR：

TileMode.CLAMP：

2、BitmapShader位图搭配像素矩阵实现圆形头像效果。

我们再来看下原图如下所示：

分析：如果切成圆形图的话我们肯定希望是上面描述的那样，半径最大是图片宽度的一半，圆心的位置根据高度和宽度的比值和图片x的坐标来确定。

所以通过设置像素矩阵，来调整大小，解决宽高不一致的问题：

 float scale = Math.max(mBitmapWidth, mBitmapHeight) * 1.0f / Math.min(mBitmapWidth, mBitmapHeight);
        Matrix matrix = new Matrix();
        matrix.setScale(scale, scale);
        mBitmapShader.setLocalMatrix(matrix); 

然后canvas通过scale来绘制圆形：

        canvas.drawCircle(Math.min(mBitmapWidth, mBitmapHeight) / 1.3f,
                scale * Math.max(mBitmapWidth, mBitmapHeight) / 2f,
                Math.max(mBitmapWidth, mBitmapHeight) / 2f, mPaint);

来看下效果图：

3、BitmapShader位图搭配shapeDrawable也可以实现圆形头像。

     ShapeDrawable shapeDrawable = new ShapeDrawable(new OvalShape());
        shapeDrawable.getPaint().setShader(mBitmapShader);
        shapeDrawable.setBounds(0, 0, mBitmapWidth, mBitmapWidth);
        shapeDrawable.draw(canvas);

当然效果就没有上面太好了。

----------- 二：LinearGradient线性渲染----------

代码：

public class LinearGradientView extends View {

    private Paint paint;
    private int[] colors = {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW};

    public LinearGradientView(Context context) {
        super(context);
        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);

        /**线性渐变
         * x0, y0, 起始点
         *  x1, y1, 结束点
         * int[]  colors, 中间依次要出现的几个颜色
         * float[] positions,数组大小跟colors数组一样大，中间依次摆放的几个颜色分别放置在那个位置上(参考比例从左往右)
         *    tile
         */
	LinearGradient linearGradient = new LinearGradient(0, 0, 400, 400, colors, null, Shader.TileMode.CLAMP);
        paint.setShader(linearGradient);
        canvas.drawRect(0, 0, 400, 400, paint);

    }
}

效果图：

----------- 三：RadialGradient环形渲染----------
代码：

		radialGradient = new RadialGradient(300, 300, 100, colors, null, Shader.TileMode.REPEAT);
		paint.setShader(radialGradient);
		canvas.drawCircle(300, 300, 300, paint);

效果图：

----------- 四：SweepGradient梯度渲染(扫描渲染)----------

代码：

		sweepGradient = new SweepGradient(300, 300, colors, null);
		paint.setShader(sweepGradient);
		canvas.drawCircle(300, 300, 300, paint);

效果图：

----------- 五：ComposeShader组合渲染----------

这个组合渲染，也就是把线性渲染或梯度渲染或环形渲染和BitmapShader位图组合在一起：

public class LinearGradientView extends View {

    private Paint paint;
    private Bitmap bitmap;
    private BitmapShader bitmapShader;
    private ComposeShader composeShader;
    private int[] colors = {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW};

    public LinearGradientView(Context context) {
        super(context);
        paint = new Paint();
        bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.uuu)).getBitmap();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);

        bitmapShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        paint.setShader(bitmapShader);
        
        LinearGradient linearGradient = new LinearGradient(0, 0, 400, 400, colors, null, Shader.TileMode.REPEAT);

        composeShader = new ComposeShader(linearGradient, bitmapShader, PorterDuff.Mode.SRC_OVER);
        paint.setShader(composeShader);
        canvas.drawRect(0, 0, 800, 1200, paint);
    }
}

ok效果图：

------------------以上就是今天讲的一些渲染效果，大家可以自行练习一下----------------------