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效果图：

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