自定义控件之shader的使用

来源:互联网 发布:mac卸载程序脚本 编辑:程序博客网 时间:2024/05/16 19:54

Shader —着色器,Canvas的drawXXXX这个方法是画具体的形状,画笔的shader定义的就是图形的着色和外观

BitmapShader–位图图像渲染

用BitMap对绘制的图形进行渲染着色,简单来说是用图片对图形进行贴图
圆形头像,放大镜效果

TileMode 拉伸形式
  • CLAMP 是拉伸最后一个像素铺满
  • MIRROR 是横向纵向不足处不断翻转镜像平铺
  • REPEAT 类似电脑壁纸,横向纵向不足的重复放置

LinearGradient–线性渲染

霓虹灯文字,倒影图片

SweepGradient—-渐变渲染/梯度渲染

雷达扫描效果

RadialGradient—-环形渲染

水波纹效果

ComposeShader—-组合渲染

代码演示

public class MyGradientView extends View {    private Paint mPaint;    private Bitmap mBitMap = null;    private int mWidth;    private int mHeight;    private int[] mColors = {Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW};    public MyGradientView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        mBitMap = ((BitmapDrawable)getResources().getDrawable(R.drawable.xyjy2)).getBitmap();        mPaint = new Paint();        mWidth = mBitMap.getWidth();        mHeight = mBitMap.getHeight();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawColor(Color.WHITE);        /**         * TileMode.CLAMP 拉伸最后一个像素去铺满剩下的地方         * TileMode.MIRROR 通过镜像翻转铺满剩下的地方。         * TileMode.REPEAT 重复图片平铺整个画面(电脑设置壁纸)         */       /* BitmapShader bitMapShader = new BitmapShader(mBitMap, Shader.TileMode.MIRROR,                Shader.TileMode.MIRROR);        mPaint.setShader(bitMapShader);        mPaint.setAntiAlias(true);        //设置像素矩阵,来调整大小,为了解决宽高不一致的问题。        float scale = Math.max(mWidth,mHeight) / Math.min(mWidth,mHeight);        Matrix matrix = new Matrix();        matrix.setScale(scale,scale);        bitMapShader.setLocalMatrix(matrix);        //画圆形图像        //canvas.drawCircle(mHeight / 2,mHeight / 2, mHeight / 2 ,mPaint);        //画椭圆形图像        //canvas.drawOval(new RectF(0 , 0, mWidth, mHeight),mPaint);        //canvas.drawRect(new Rect(0,0 , 1000, 1600),mPaint);        //通过shapeDrawable也可以实现        ShapeDrawable shapeDrawble = new ShapeDrawable(new OvalShape());        shapeDrawble.getPaint().setShader(bitMapShader);        shapeDrawble.setBounds(0,0,mWidth,mWidth);        shapeDrawble.draw(canvas);*/        /**线性渐变         * x0, y0, 起始点         *  x1, y1, 结束点         * int[]  mColors, 中间依次要出现的几个颜色         * float[] positions,数组大小跟colors数组一样大,中间依次摆放的几个颜色分别放置在那个位置上(参考比例从左往右)         *    tile         */        /*LinearGradient linearGradient = new LinearGradient( 0, 0,800, 800, mColors, null, Shader.TileMode.CLAMP);        // linearGradient = new LinearGradient(0, 0, 400, 400, mColors, null, Shader.TileMode.REPEAT);        mPaint.setShader(linearGradient);        canvas.drawRect(0, 0, 800, 800, mPaint);*/        //环形渐变  水波纹效果        RadialGradient mRadialGradient = new RadialGradient(300, 300, 100, mColors, null, Shader.TileMode.REPEAT);        mPaint.setShader(mRadialGradient);        canvas.drawCircle(300, 300, 300, mPaint);        //环形渐变 雷达扫描效果        /*SweepGradient mSweepGradient = new SweepGradient(300, 300, mColors, null);        mPaint.setShader(mSweepGradient);        canvas.drawCircle(300, 300, 300, mPaint);*/        //组合渐变        /*ComposeShader mComposeShader = new ComposeShader(linearGradient, mBitmapShader, PorterDuff.Mode.SRC_OVER);        mPaint.setShader(mComposeShader);        canvas.drawRect(0, 0, 800, 1000, mPaint);*/        /***************用ComposeShader即可实现心形图渐变效果*********************************/        /*//创建BitmapShader,用以绘制心        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);        //创建LinearGradient,用以产生从左上角到右下角的颜色渐变效果        LinearGradient linearGradient = new LinearGradient(0, 0, mWidth, mHeight, Color.GREEN, Color.BLUE, Shader.TileMode.CLAMP);        //bitmapShader对应目标像素,linearGradient对应源像素,像素颜色混合采用MULTIPLY模式        ComposeShader composeShader = new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.MULTIPLY);        //将组合的composeShader作为画笔paint绘图所使用的shader        mPaint.setShader(composeShader);        //用composeShader绘制矩形区域        canvas.drawRect(0, 0, mWidth, mHeight, mPaint);*/    }}
0 0