接上 自定義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);
        // 第一個參數(shù) 是指定圖片
        // 第二個參數(shù) 是x軸的 模式設(shè)置
        // 第三個參數(shù) 則是y軸的 模式設(shè)置
        // 模式一共有三種
        //  1 Shader.TileMode.CLAMP 延某一個軸的最后一個像素點拉伸
        //  2 Shader.TileMode.REPEAT 重復(fù)
        //  3 Shader.TileMode.MIRROR 鏡像重復(fù)
        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軸重復(fù)


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

全部重復(fù)


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

x軸鏡像 y軸重復(fù)


圖片.png

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

這個函數(shù)中我們看看到
canvas 執(zhí)行的這樣drawRect的函數(shù)是不是可以理解為 那邊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最簡單的一個構(gòu)造方法,
        // 參數(shù)一和參數(shù)二 表示漸變的起點坐標(biāo)而
        // 參數(shù)三和參數(shù)四 則表示漸變的終點坐標(biāo),
        // 這兩點都是相對于屏幕坐標(biāo)系而言的,
        // 參數(shù)五和參數(shù)六表示起點的顏色和終點的顏色

        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};
        //表示的是漸變的相對區(qū)域其取值只有0到1
        float [] myPositions = new float[]{0,0.2f,0.4f,0.8f,1f};
        //myColor和myPositions的個數(shù)要一樣
        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
梯度漸變,也稱之為掃描式漸變

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容