接上 自定义View -Pain 中的Shade

1 BitmapShader

    /**
     * 初始化 画笔
     */
    private void initPaint () {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(10);

        mBitmap= BitmapFactory.decodeResource(mContext.getResources(), R.drawable.bg_bee_animation03);
        // 第一个参数 是指定图片
        // 第二个参数 是x轴的 模式设置
        // 第三个参数 则是y轴的 模式设置
        // 模式一共有三种
        //  1 Shader.TileMode.CLAMP 延某一个轴的最后一个像素点拉伸
        //  2 Shader.TileMode.REPEAT 重复
        //  3 Shader.TileMode.MIRROR 镜像重复
        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mPaint.setShader(bitmapShader);
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mViewWidth = w;
        mViewHeight = h;

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0,0,mViewWidth,mViewHeight,mPaint);
    }

效果

图片.png

BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);

y轴重复

BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

全部重复

图片.png

BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.REPEAT);

x轴镜像 y轴重复

图片.png

在

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

这个函数中我们看看到
canvas 执行的这样drawRect的函数是不是可以理解为 那边shadebitmap什么的 是绘制的一个背景图

LinearGradient

    /**
     * 初始化 画笔
     */
    private void initPaint () {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(10);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mViewWidth = w;
        mViewHeight = h;

    }

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

        // LinearGradient最简单的一个构造方法，
        // 参数一和参数二 表示渐变的起点坐标而
        // 参数三和参数四 则表示渐变的终点坐标，
        // 这两点都是相对于屏幕坐标系而言的，
        // 参数五和参数六表示起点的颜色和终点的颜色

        LinearGradient linearGradient = new LinearGradient(0, 0, mViewWidth, mViewHeight, Color.BLACK, Color.RED, Shader.TileMode.REPEAT);
        mPaint.setShader(linearGradient);

        canvas.drawRect(0,0,mViewWidth,mViewHeight,mPaint);
    }

效果图

图片.png

修改模式

new LinearGradient(0, 0, mViewWidth/2, mViewHeight/2, Color.BLACK, Color.RED, Shader.TileMode.CLAMP);

为CLAMP
效果

图片.png

new LinearGradient(0, 0, mViewWidth/2, mViewHeight/2, Color.BLACK, Color.RED, Shader.TileMode.REPEAT);

图片.png

new LinearGradient(0, 0, mViewWidth/2, mViewHeight/2, Color.BLACK, Color.RED, Shader.TileMode.MIRROR);

效果图

图片.png

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //定义所有渐变的颜色
        int [] myColor = new int[]{Color.BLUE ,Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN};
        //表示的是渐变的相对区域其取值只有0到1
        float [] myPositions = new float[]{0,0.2f,0.4f,0.8f,1f};
        //myColor和myPositions的个数要一样
        LinearGradient linearGradient = new LinearGradient(0, 0, mViewWidth/2, mViewHeight/2,myColor, myPositions, Shader.TileMode.MIRROR);
        mPaint.setShader(linearGradient);

        canvas.drawRect(0,0,mViewWidth,mViewHeight,mPaint);
    }

图片.png

图片倒影效果
/**
* 初始化 画笔
*/
private void initPaint () {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10);
mBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.bg_bee_animation03);
// 实例化一个矩阵对象
Matrix matrix = new Matrix();
matrix.setScale(1F, -1F);
// 生成倒影图
mRefBitmap = Bitmap.createBitmap(mBitmap, 0, 0, mBitmap.getWidth(), mBitmap.getHeight(), matrix, true);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mViewWidth = w;
    mViewHeight = h;

}

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.BLACK);
    int x = mViewWidth/2;
    int y = mViewHeight/2;
    LinearGradient linearGradient = new LinearGradient(x, y + mBitmap.getHeight(), x, y + mBitmap.getHeight() + mBitmap.getHeight() / 2,
            0xAA000000, Color.BLACK, Shader.TileMode.CLAMP);
    mPaint.setShader(linearGradient);
    canvas.drawBitmap(mBitmap, x, y, null);
    canvas.drawBitmap(mRefBitmap, x, y + mBitmap.getHeight(), null);
    canvas.drawRect(x, y + mBitmap.getHeight(), x + mRefBitmap.getWidth(), y + mBitmap.getHeight() * 2, mPaint);
}

效果

图片.png

RadialGradient
梯度渐变，也称之为扫描式渐变