主頁 >  其他 > AndroidUI之Paint濾鏡&XFERMODE決議

AndroidUI之Paint濾鏡&XFERMODE決議

2020-11-07 03:01:36 其他

目錄

寫在前面

一、PorterDuff.Mode圖層混合模式

1.1、圖層混合模式使用介紹

1.2、離屏繪制(離屏緩沖)

1.3、圖層混合模式全決議

1.4、刮刮卡案例實操

二、濾鏡效果

2.1、LightingColorFilter濾鏡

2.2、PorterDuffColorFilter濾鏡

2.3、ColorMatrixColorFilter濾鏡

2.4、ColorMatrix


寫在前面

上一篇中我們對Paint畫筆的使用做了一個簡單的介紹,詳情見:《AndroidUI之Paint畫筆高級應用》,本篇我們繼續來學點有意思的東西——Paint的濾鏡和XFERMODE,

今天要實作的效果主要就是下面兩張圖,通過圖層混合模式實作類似刮刮卡效果,通過濾鏡模式實作圖片的各種特效,是不是有點期待了,那還等啥呢,開始吧!

一、PorterDuff.Mode圖層混合模式

1.1、圖層混合模式使用介紹

PorterDuff.Mode將所繪制圖形的像素與Canvas中對應位置的像素按照一定規則進行混合,形成新的像素值,從而更新Canvas中最終的像素值,

圖層混合的模式一共有18種:

每一種圖層混合模式就代表了一種混合規則,比如我們以CLEAR為例,來看一下原始碼:

        /**
         * <p>
         *     <img src="{@docRoot}reference/android/images/graphics/composite_CLEAR.png" />
         *     <figcaption>Destination pixels covered by the source are cleared to 0.</figcaption>
         * </p>
         * <p>\(\alpha_{out} = 0\)</p>
         * <p>\(C_{out} = 0\)</p>
         */
        CLEAR       (0)

alpha表示混合之后的透明值通道,out表示輸出值也就是最終的計算值,C表示顏色值,通過這里可以看出圖層混合之后的效果是通過一定的規則計算出alpha通道值以及顏色值,這兩個值計算出來之后就決定了最終的效果,這里賦值為0表示清除顏色值的效果,對于其他模式,大家可以自行去查找原始碼,注釋里面有具體的計算規則以及對應的含義,下面我們通過代碼來實際看一下究竟該如何使用,

首先新建一個XfermodeView,初始化畫筆,并給畫筆設定了一些屬性,在onMeasure()方法中獲取控制元件的寬高,然后重寫onDraw()方法:

public class XfermodeView extends View {

    private Paint mPaint;
    private int mWidth, mHeight;

    public XfermodeView(Context context) {
        this(context, null);
    }

    public XfermodeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public XfermodeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    private void init() {
        //初始化畫筆
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
    }

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

    }

}

在xml檔案中參考我們自定義的View,設定寬高各300,居中顯示:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.jarchie.androidui.xfermode.XfermodeView
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

準備作業做完了之后,下面來看一下有哪些地方使用了圖層混合模式的API,主要有一下幾種,今天我們主要說的就是Paint.setXfermode()這種:

  • ComposeShader:混合渲染
  • Paint.setXfermode():為畫筆設定圖層混合模式
  • PorterDuffColorFilter:顏色過濾器

注意:在Android API14之后,圖層混合的某些API是不支持硬體加速的,而系統默認是開啟硬體加速的,所以首先需要做的就是關閉硬體加速,

接著我們來寫一段代碼看一下圖層混合模式是如何使用的?看下面的代碼:

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //禁止硬體加速
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        //添加灰色背景
        setBackgroundColor(Color.GRAY);
        //離屏繪制
        int layerId = canvas.saveLayer(0,0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);
        //目標圖
        canvas.drawBitmap(createRectBitmap(mWidth, mHeight), 0, 0, mPaint);
        //設定混合模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        //源圖,重疊區域右下角部分
        canvas.drawBitmap(createCircleBitmap(mWidth, mHeight), 0, 0, mPaint);
        //清除混合模式
        mPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
    }

    //畫矩形Dst
    public Bitmap createRectBitmap(int width, int height) {
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint dstPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        dstPaint.setColor(0xFF66AAFF);
        canvas.drawRect(new Rect(width / 20, height / 3, 2 * width / 3, 19 * height / 20), dstPaint);
        return bitmap;
    }

    //畫圓src
    public Bitmap createCircleBitmap(int width, int height) {
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint scrPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        scrPaint.setColor(0xFFFFCC44);
        canvas.drawCircle(width * 2 / 3, height / 3, height / 4, scrPaint);
        return bitmap;
    }

我們首先是繪制了兩個Bitmap,一個是源影像src圓形Bitmap,一個是目標影像dst矩形Bitmap,然后在onDraw()方法中首先是設定了一個灰色背景,然后是給Paint畫筆設定圖層混合模式為DST_IN,代碼中用到了一個我們之前沒見過的概念——離屏繪制,關于離屏繪制接下來就會講到,這一塊的代碼是仿照Google官方Demo中的寫法來的,官方Demo中對于圖層混合模式有一個完整的Demo使用,大家可以參考那個進行學習,為了方便查找,我已經把地址放在下面了,敬請各位大佬笑納:

https://github.com/THEONE10211024/ApiDemos/blob/master/app/src/main/java/com/example/android/apis/graphics/Xfermodes.java

如果把離屏繪制的代碼注釋掉,再來跑一次:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //禁止硬體加速
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        //添加灰色背景
        setBackgroundColor(Color.GRAY);
        //目標圖
        canvas.drawBitmap(createRectBitmap(mWidth, mHeight), 0, 0, mPaint);
        //設定混合模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        //源圖,重疊區域右下角部分
        canvas.drawBitmap(createCircleBitmap(mWidth, mHeight), 0, 0, mPaint);
        //清除混合模式
        mPaint.setXfermode(null);
    }

兩次代碼的執行結果如下,左側是使用了離屏繪制的結果,右側是沒有使用離屏繪制的結果:

根據上面的結果,大家有什么發現嗎?簡單來說就是:在未使用離屏繪制的情況下,直接考慮了Canvas的背景,導致了繪制結果的不正確,看上面右圖中灰色背景都不見了,并且背景還參與了圖層混合的計算,使用離屏繪制的情況下,會首先創建一個圖層,將兩個圖層混合之后的結果再繪制到畫布之上,這個程序才是正確的,

1.2、離屏繪制(離屏緩沖)

這里插一嘴,先來說說什么是離屏繪制,離屏繪制又叫離屏緩沖,特點及使用方式如下圖所示:

1.3、圖層混合模式全決議

接下來我們根據谷歌的官方Demo進行簡單的修改,然后對照著來對18種混合模式都做一個了解:

// 使用離屏繪制
int sc = canvas.saveLayer(x, y, x + W, y + H, null);
canvas.translate(x, y);
canvas.drawBitmap(makeDst(2 * W / 3, 2 * H / 3), 0, 0, paint);
paint.setXfermode(sModes[i]);
canvas.drawBitmap(makeSrc(2 * W / 3, 2 * H / 3), W / 3, H / 3, paint);
paint.setXfermode(null);
canvas.restoreToCount(sc);

從上面的代碼種可以看到,這里我們繪制Bitmap的時候,創建的dst目標影像寬度為矩形區域的2/3,創建的src源影像寬度和高度都是矩形區域的2/3,但是源影像的起點位置是在矩形區域的寬高各1/3處,這一點需要理解清楚,同時需要注意的是,對于圖層混合模式來說,所有的混合效果只會作用于源影像區域,這里目標影像是圓形,源影像是矩形,請大家牢記,下面我就放碼過來嘍:

public class XfermodesView extends View {
    
    private static int W = 250;
    private static int H = 250;

    private static final int ROW_MAX = 4;   // number of samples per row

    private Bitmap mSrcB;
    private Bitmap mDstB;
    private Shader mBG;     // background checker-board pattern

    //其中Sa全稱為Source alpha表示源圖的Alpha通道;Sc全稱為Source color表示源圖的顏色;Da全稱為Destination alpha表示目標圖的Alpha通道;Dc全稱為Destination color表示目標圖的顏色,[...,..]前半部分計算的是結果影像的Alpha通道值,“,”后半部分計算的是結果影像的顏色值,
    //效果作用于src源影像區域
    private static final Xfermode[] sModes = {
            //所繪制不會提交到畫布上
            new PorterDuffXfermode(PorterDuff.Mode.CLEAR),
            //顯示上層繪制的影像
            new PorterDuffXfermode(PorterDuff.Mode.SRC),
            //顯示下層繪制影像
            new PorterDuffXfermode(PorterDuff.Mode.DST),
            //正常繪制顯示,上下層繪制疊蓋
            new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER),

            //上下層都顯示,下層居上顯示
            new PorterDuffXfermode(PorterDuff.Mode.DST_OVER),
            //取兩層繪制交集,顯示上層
            new PorterDuffXfermode(PorterDuff.Mode.SRC_IN),
            //取兩層繪制交集,顯示下層
            new PorterDuffXfermode(PorterDuff.Mode.DST_IN),
            //取上層繪制非交集部分,交集部分變成透明
            new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT),

            //取下層繪制非交集部分,交集部分變成透明
            new PorterDuffXfermode(PorterDuff.Mode.DST_OUT),
            //取上層交集部分與下層非交集部分
            new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP),
            //取下層交集部分與上層非交集部分
            new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP),
            //去除兩圖層交集部分
            new PorterDuffXfermode(PorterDuff.Mode.XOR),

            //取兩圖層全部區域,交集部分顏色加深
            new PorterDuffXfermode(PorterDuff.Mode.DARKEN),
            //取兩圖層全部區域,交集部分顏色點亮
            new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN),
            //取兩圖層交集部分,顏色疊加
            new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY),
            //取兩圖層全部區域,交集部分濾色
            new PorterDuffXfermode(PorterDuff.Mode.SCREEN),

            //取兩圖層全部區域,交集部分飽和度相加
            new PorterDuffXfermode(PorterDuff.Mode.ADD),
            //取兩圖層全部區域,交集部分疊加
            new PorterDuffXfermode(PorterDuff.Mode.OVERLAY)
    };

    private static final String[] sLabels = {
            "Clear", "Src", "Dst", "SrcOver",
            "DstOver", "SrcIn", "DstIn", "SrcOut",
            "DstOut", "SrcATop", "DstATop", "Xor",
            "Darken", "Lighten", "Multiply", "Screen", "Add","Overlay"
    };

    public XfermodesView(Context context) {
        this(context, null);
    }

    public XfermodesView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public XfermodesView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        if (windowManager != null) {
            DisplayMetrics display = new DisplayMetrics();
            windowManager.getDefaultDisplay().getMetrics(display);
            W = H = (display.widthPixels - 64) / ROW_MAX; //得到矩形
        }

        //1,API 14之后,有些函式不支持硬體加速,需要禁用
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        mSrcB = makeSrc(W, H);
        mDstB = makeDst(W, H);

        //根據width和height創建空位圖,然后用指定的顏色陣列colors來從左到右從上至下一次填充顏色
        //make a ckeckerboard pattern
        Bitmap bm = Bitmap.createBitmap(new int[]{0xFFFFFFFF, 0xFFCCCCCC, 0xFFCCCCCC, 0xFFFFFFFF}, 2, 2, Bitmap.Config.RGB_565);
        mBG = new BitmapShader(bm, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        Matrix m = new Matrix();
        m.setScale(6, 6);
        mBG.setLocalMatrix(m);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);

        Paint labelP = new Paint(Paint.ANTI_ALIAS_FLAG);
        labelP.setTextAlign(Paint.Align.CENTER);

        Paint paint = new Paint();
        paint.setFilterBitmap(false);

        canvas.translate(15, 35);

        int x = 0;
        int y = 0;
        for (int i = 0; i < sModes.length; i++) {
            // draw the border
            paint.setStyle(Paint.Style.STROKE);
            paint.setShader(null);
            canvas.drawRect(x - 0.5f, y - 0.5f, x + W + 0.5f, y + H + 0.5f, paint);

            // draw the checker-board pattern
            paint.setStyle(Paint.Style.FILL);
            paint.setShader(mBG);
            canvas.drawRect(x, y, x + W, y + H, paint);

            // 使用離屏繪制
            int sc = canvas.saveLayer(x, y, x + W, y + H, null);
            canvas.translate(x, y);
            canvas.drawBitmap(makeDst(2 * W / 3, 2 * H / 3), 0, 0, paint);
            paint.setXfermode(sModes[i]);
            canvas.drawBitmap(makeSrc(2 * W / 3, 2 * H / 3), W / 3, H / 3, paint);
            paint.setXfermode(null);
            canvas.restoreToCount(sc);

            // draw the label
            labelP.setTextSize(20);
            canvas.drawText(sLabels[i], x + W / 2, y - labelP.getTextSize() / 2, labelP);

            x += W + 10;

            // wrap around when we've drawn enough for one row
            if ((i % ROW_MAX) == ROW_MAX - 1) {
                x = 0;
                y += H + 30;
            }
        }
    }

    // create a bitmap with a circle, used for the "dst" image
    // 畫圓一個完成的圓
    static Bitmap makeDst(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);

        p.setColor(0xFFFFCC44);
        c.drawOval(new RectF(0, 0, w, h), p);
        return bm;
    }

    // create a bitmap with a rect, used for the "src" image
    // 矩形右下角留有透明間隙
    static Bitmap makeSrc(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);

        p.setColor(0xFF66AAFF);
        c.drawRect(0, 0, w * 19 / 20, h * 19 / 20, p);
        return bm;
    }

}

每一種圖層混合模式的具體含義都添加了注釋,下面來看執行結果,一共是一十八種,我們可以根據圖片顯示的結果對照著代碼及注釋進行理解:


我就不一 一進行介紹了,簡單說幾個吧,比如CLEAR模式就是整個源影像都被清空了,也就是第一個小圖所示的效果,SRC模式就是源影像顯示在了上層,黃色的3/4圓的部分能顯示是因為它和源影像并未相交,即第二個小圖所示的效果,對于圖層混合模式的具體演算法我們沒必要深究,但是每一種圖層的混合模式的具體含義我們應該要掌握其用法,以便于今后遇到這種實際問題場景我們知道具體該使用哪一種混合模式,

1.4、刮刮卡案例實操

public class XfermodeEraserView extends View {

    private Paint  mPaint;
    private Bitmap mDstBmp, mSrcBmp, mTxtBmp;
    private Path mPath;

    public XfermodeEraserView(Context context) {
        this(context, null);
    }

    public XfermodeEraserView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public XfermodeEraserView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //初始化畫筆
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(80);

        //禁用硬體加速
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        //初始化圖片物件
        mTxtBmp = BitmapFactory.decodeResource(getResources(), R.drawable.jarchie);
        mSrcBmp = BitmapFactory.decodeResource(getResources(), R.drawable.ying);
        mDstBmp = Bitmap.createBitmap(mSrcBmp.getWidth(), mSrcBmp.getHeight(), Bitmap.Config.ARGB_8888);

        //路徑(貝塞爾曲線)
        mPath = new Path();
    }


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

        //繪制刮獎結果
        canvas.drawBitmap(mTxtBmp, 0, 0, mPaint);

        //使用離屏繪制
        int layerID = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);

        //先將路徑繪制到 bitmap上
        Canvas dstCanvas = new Canvas(mDstBmp);
        dstCanvas.drawPath(mPath, mPaint);

        //繪制 目標影像
        canvas.drawBitmap(mDstBmp, 0, 0, mPaint);
        //設定 模式 為 SRC_OUT, 擦橡皮區域為交集區域需要清掉像素
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        //繪制源影像
        canvas.drawBitmap(mSrcBmp, 0, 0, mPaint);

        mPaint.setXfermode(null);

        canvas.restoreToCount(layerID);
    }

    private float mEventX, mEventY;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mEventX = event.getX();
                mEventY = event.getY();
                mPath.moveTo(mEventX, mEventY);
                break;
            case MotionEvent.ACTION_MOVE:
                float endX = (event.getX() - mEventX) / 2 + mEventX;
                float endY = (event.getY() - mEventY) / 2 + mEventY;
                //畫二階貝塞爾曲線
                mPath.quadTo(mEventX, mEventY, endX, endY);
                mEventX = event.getX();
                mEventY = event.getY();
                break;
        }
        invalidate();
        return true; //消費事件
    }

}

效果這里我做了一張動圖,同樣使用的是我家穎寶的美照,如下圖所示:

既然是刮刮卡肯定要用到手勢觸摸,這里手勢觸摸部分實際上就是繪制二階的貝賽爾曲線,然后呼叫invalidate()重繪,會呼叫onDraw()方法進行實際的繪制,繪制方法中首先繪制目標影像,然后進行離屏繪制,離屏繪制的時候會將二階貝賽爾曲線繪制到一張Bitmap上,也就是目標Bitmap,接著繪制這張Bitmap,然后設定圖層混合模式為SRC_OUT,即交集區域影像會被清除,接著繪制源影像,最后清除混合模式,

二、濾鏡效果

2.1、LightingColorFilter濾鏡

它可以模仿光照效果,引數有mul和add,具體用法見下圖:


下面我們來實際演示一下它的使用,新建一個ColorFilterView類,初始化畫筆和一張Bitmap物件,然后我們先來加載原圖,代碼如下所示,根據上面圖片中的計算公式可以看出,想要加載原圖,只需要讓mul=1,add.X=0即可,所以RGB都為f,add=0:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //原始圖片效果
        LightingColorFilter lighting = new LightingColorFilter(0xffffff, 0x000000);
        mPaint.setColorFilter(lighting);
        canvas.drawBitmap(mBitmap, 0, 0, mPaint);
    }

效果如下圖所示:

接著我們來修改代碼,把紅色去除掉,修改mul中的R項為0:

//紅色去除掉
LightingColorFilter lighting = new LightingColorFilter(0x00ffff,0x000000);
mPaint.setColorFilter(lighting);
canvas.drawBitmap(mBitmap, 0,0, mPaint);

結果如下圖所示:

接著我們再來修改一下代碼,讓紅色更突出,修改add的R值:

//紅色更亮
LightingColorFilter lighting = new LightingColorFilter(0xffffff, 0xa70000);
mPaint.setColorFilter(lighting);
canvas.drawBitmap(mBitmap, 0, 0, mPaint);

效果如下圖所示:

2.2、PorterDuffColorFilter濾鏡

指定一種顏色和一個圖層進行混合:

PorterDuffColorFilter porterDuffColorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.DARKEN);
mPaint.setColorFilter(porterDuffColorFilter);
canvas.drawBitmap(mBitmap, 100, 0, mPaint);

效果如下,變為了暗紅效果:

2.3、ColorMatrixColorFilter濾鏡

它的構造方法需要傳入一個陣列,陣列長度是4行5列共20位代表一個顏色矩陣,當改變顏色矩陣對應陣列中元素的值就可以改變圖片中顏色的比例,四行分別依次決定紅綠藍三色和透明度,第5串列示每個顏色值的偏移量,當你想要顏色值更傾向于某種顏色時,可以對應調整第5列的值

關于色彩矩陣,這里給出部分參考資料:


改變顏色值一般有兩種方式,第一種就是修改偏移量,第二種就是修改對應顏色的系數,也就是矩陣中斜角線上的值,下面簡單來實踐一下:

float[] colorMatrix = {
                1,0,0,0,500,   //red
                0,1,0,0,0,   //green
                0,0,1,0,0,   //blue
                0,0,0,1,0    //alpha
        };
        mColorMatrixColorFilter = new ColorMatrixColorFilter(colorMatrix);
        mPaint.setColorFilter(mColorMatrixColorFilter);
        canvas.drawBitmap(mBitmap, 100, 0, mPaint);

修改了紅色的偏移量,很明顯圖片會紅色加重,來看一下效果:

接著來修改一下矩陣中的綠色系數:

float[] colorMatrix = {
                1,0,0,0,0,   //red
                0,2,0,0,0,   //green
                0,0,1,0,0,   //blue
                0,0,0,1,0    //alpha
        };

實際效果如下,綠色更加突出:

接下來我們來看一下幾種常見的濾鏡效果,這里簡單列舉幾種,分別是“黑白”、“懷舊”和“膠片”:

    // 黑白
    public static final float colormatrix_heibai[] = {
            0.8f, 1.6f, 0.2f, 0, -163.9f,
            0.8f, 1.6f, 0.2f, 0, -163.9f,
            0.8f, 1.6f, 0.2f, 0, -163.9f,
            0, 0, 0, 1.0f, 0};
    // 懷舊
    public static final float colormatrix_huajiu[] = {
            0.2f, 0.5f, 0.1f, 0, 40.8f,
            0.2f, 0.5f, 0.1f, 0, 40.8f,
            0.2f, 0.5f, 0.1f, 0, 40.8f,
            0, 0, 0, 1, 0};
    // 膠片
    public static final float colormatrix_fanse[] = {
            -1.0f, 0.0f, 0.0f, 0.0f, 255.0f,
            0.0f, -1.0f, 0.0f, 0.0f, 255.0f,
            0.0f, 0.0f, -1.0f, 0.0f, 255.0f,
            0.0f, 0.0f, 0.0f, 1.0f, 0.0f};

效果如下:

還有一些其它的常見效果,后面我整理好了會把完整代碼放出來,網上應該也能找到,

2.4、ColorMatrix

除了使用矩陣陣列來實作濾鏡效果之外,還可以通過ColorMatrix這個類的一些API來實作:

  • setScale(float rScale, float gScale, float bScale,float aScale):分別表示紅綠藍透明度四個分量通道對應的系數,全部傳1表示原圖
  • setSaturation(float sat):飽和度調節0-五色彩,1-默認效果,>1飽和度加強
  • setRotate(int axis, float degrees):色調調節,第一個引數表示顏色通道,第二個引數表示角度,第一個值如果是0表示修改的是紅色,1是綠色,2是藍色,內部同樣是操作矩陣陣列,進行sin和cos的運算


下面通過代碼來實際看一下具體的用法:

首先我們來調節亮度,這里將藍色調亮:

ColorMatrix cm = new ColorMatrix();
//亮度調節
cm.setScale(1,1,2,1);
mColorMatrixColorFilter = new ColorMatrixColorFilter(cm);
mPaint.setColorFilter(mColorMatrixColorFilter);
canvas.drawBitmap(mBitmap, 100, 0, mPaint);

效果如下圖所示:

接著我們來調節飽和度,讓圖片顯得更加飽滿:

cm.setSaturation(2);

效果就是這樣的:

最后我們將綠色旋轉30°角來看一下是什么效果:

cm.setRotate(1, 30);

效果如下:

好了,到這里今天的內容就算是結束了,我感覺不多不少剛剛好,主要是得鞏固加深印象,自定義View這玩意,一段時間不寫就很容易忘記!

OK,各位老鐵,再會!

轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/205006.html

標籤:其他

上一篇:咱公司的薪資制度,說出你的意見

下一篇:一元線性回歸模型的代碼(c/c++)

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 網閘典型架構簡述

    網閘架構一般分為兩種:三主機的三系統架構網閘和雙主機的2+1架構網閘。 三主機架構分別為內端機、外端機和仲裁機。三機無論從軟體和硬體上均各自獨立。首先從硬體上來看,三機都用各自獨立的主板、記憶體及存盤設備。從軟體上來看,三機有各自獨立的作業系統。這樣能達到完全的三機獨立。對于“2+1”系統,“2”分為 ......

    uj5u.com 2020-09-10 02:00:44 more
  • 如何從xshell上傳檔案到centos linux虛擬機里

    如何從xshell上傳檔案到centos linux虛擬機里及:虛擬機CentOs下執行 yum -y install lrzsz命令,出現錯誤:鏡像無法找到軟體包 前言 一、安裝lrzsz步驟 二、上傳檔案 三、遇到的問題及解決方案 總結 前言 提示:其實很簡單,往虛擬機上安裝一個上傳檔案的工具 ......

    uj5u.com 2020-09-10 02:00:47 more
  • 一、SQLMAP入門

    一、SQLMAP入門 1、判斷是否存在注入 sqlmap.py -u 網址/id=1 id=1不可缺少。當注入點后面的引數大于兩個時。需要加雙引號, sqlmap.py -u "網址/id=1&uid=1" 2、判斷文本中的請求是否存在注入 從文本中加載http請求,SQLMAP可以從一個文本檔案中 ......

    uj5u.com 2020-09-10 02:00:50 more
  • Metasploit 簡單使用教程

    metasploit 簡單使用教程 浩先生, 2020-08-28 16:18:25 分類專欄: kail 網路安全 linux 文章標簽: linux資訊安全 編輯 著作權 metasploit 使用教程 前言 一、Metasploit是什么? 二、準備作業 三、具體步驟 前言 Msfconsole ......

    uj5u.com 2020-09-10 02:00:53 more
  • 游戲逆向之驅動層與用戶層通訊

    驅動層代碼: #pragma once #include <ntifs.h> #define add_code CTL_CODE(FILE_DEVICE_UNKNOWN,0x800,METHOD_BUFFERED,FILE_ANY_ACCESS) /* 更多游戲逆向視頻www.yxfzedu.com ......

    uj5u.com 2020-09-10 02:00:56 more
  • 北斗電力時鐘(北斗授時服務器)讓網路資料更精準

    北斗電力時鐘(北斗授時服務器)讓網路資料更精準 北斗電力時鐘(北斗授時服務器)讓網路資料更精準 京準電子科技官微——ahjzsz 近幾年,資訊技術的得了快速發展,互聯網在逐漸普及,其在人們生活和生產中都得到了廣泛應用,并且取得了不錯的應用效果。計算機網路資訊在電力系統中的應用,一方面使電力系統的運行 ......

    uj5u.com 2020-09-10 02:01:03 more
  • 【CTF】CTFHub 技能樹 彩蛋 writeup

    ?碎碎念 CTFHub:https://www.ctfhub.com/ 筆者入門CTF時時剛開始刷的是bugku的舊平臺,后來才有了CTFHub。 感覺不論是網頁UI設計,還是題目質量,賽事跟蹤,工具軟體都做得很不錯。 而且因為獨到的金幣制度的確讓人有一種想去刷題賺金幣的感覺。 個人還是非常喜歡這個 ......

    uj5u.com 2020-09-10 02:04:05 more
  • 02windows基礎操作

    我學到了一下幾點 Windows系統目錄結構與滲透的作用 常見Windows的服務詳解 Windows埠詳解 常用的Windows注冊表詳解 hacker DOS命令詳解(net user / type /md /rd/ dir /cd /net use copy、批處理 等) 利用dos命令制作 ......

    uj5u.com 2020-09-10 02:04:18 more
  • 03.Linux基礎操作

    我學到了以下幾點 01Linux系統介紹02系統安裝,密碼啊破解03Linux常用命令04LAMP 01LINUX windows: win03 8 12 16 19 配置不繁瑣 Linux:redhat,centos(紅帽社區版),Ubuntu server,suse unix:金融機構,證券,銀 ......

    uj5u.com 2020-09-10 02:04:30 more
  • 05HTML

    01HTML介紹 02頭部標簽講解03基礎標簽講解04表單標簽講解 HTML前段語言 js1.了解代碼2.根據代碼 懂得挖掘漏洞 (POST注入/XSS漏洞上傳)3.黑帽seo 白帽seo 客戶網站被黑帽植入劫持代碼如何處理4.熟悉html表單 <html><head><title>TDK標題,描述 ......

    uj5u.com 2020-09-10 02:04:36 more
最新发布
  • 2023年最新微信小程式抓包教程

    01 開門見山 隔一個月發一篇文章,不過分。 首先回顧一下《微信系結手機號資料庫被脫庫事件》,我也是第一時間得知了這個訊息,然后跟蹤了整件事情的經過。下面是這起事件的相關截圖以及近日流出的一萬條資料樣本: 個人認為這件事也沒什么,還不如關注一下之前45億快遞資料查詢渠道疑似在近日復活的訊息。 訊息是 ......

    uj5u.com 2023-04-20 08:48:24 more
  • web3 產品介紹:metamask 錢包 使用最多的瀏覽器插件錢包

    Metamask錢包是一種基于區塊鏈技術的數字貨幣錢包,它允許用戶在安全、便捷的環境下管理自己的加密資產。Metamask錢包是以太坊生態系統中最流行的錢包之一,它具有易于使用、安全性高和功能強大等優點。 本文將詳細介紹Metamask錢包的功能和使用方法。 一、 Metamask錢包的功能 數字資 ......

    uj5u.com 2023-04-20 08:47:46 more
  • vulnhub_Earth

    前言 靶機地址->>>vulnhub_Earth 攻擊機ip:192.168.20.121 靶機ip:192.168.20.122 參考文章 https://www.cnblogs.com/Jing-X/archive/2022/04/03/16097695.html https://www.cnb ......

    uj5u.com 2023-04-20 07:46:20 more
  • 從4k到42k,軟體測驗工程師的漲薪史,給我看哭了

    清明節一過,盲猜大家已經無心上班,在數著日子準備過五一,但一想到銀行卡里的余額……瞬間心情就不美麗了。最近,2023年高校畢業生就業調查顯示,本科畢業月平均起薪為5825元。調查一出,便有很多同學表示自己又被平均了。看著這一資料,不免讓人想到前不久中國青年報的一項調查:近六成大學生認為畢業10年內會 ......

    uj5u.com 2023-04-20 07:44:00 more
  • 最新版本 Stable Diffusion 開源 AI 繪畫工具之中文自動提詞篇

    🎈 標簽生成器 由于輸入正向提示詞 prompt 和反向提示詞 negative prompt 都是使用英文,所以對學習母語的我們非常不友好 使用網址:https://tinygeeker.github.io/p/ai-prompt-generator 這個網址是為了讓大家在使用 AI 繪畫的時候 ......

    uj5u.com 2023-04-20 07:43:36 more
  • 漫談前端自動化測驗演進之路及測驗工具分析

    隨著前端技術的不斷發展和應用程式的日益復雜,前端自動化測驗也在不斷演進。隨著 Web 應用程式變得越來越復雜,自動化測驗的需求也越來越高。如今,自動化測驗已經成為 Web 應用程式開發程序中不可或缺的一部分,它們可以幫助開發人員更快地發現和修復錯誤,提高應用程式的性能和可靠性。 ......

    uj5u.com 2023-04-20 07:43:16 more
  • CANN開發實踐:4個DVPP記憶體問題的典型案例解讀

    摘要:由于DVPP媒體資料處理功能對存放輸入、輸出資料的記憶體有更高的要求(例如,記憶體首地址128位元組對齊),因此需呼叫專用的記憶體申請介面,那么本期就分享幾個關于DVPP記憶體問題的典型案例,并給出原因分析及解決方法。 本文分享自華為云社區《FAQ_DVPP記憶體問題案例》,作者:昇騰CANN。 DVPP ......

    uj5u.com 2023-04-20 07:43:03 more
  • msf學習

    msf學習 以kali自帶的msf為例 一、msf核心模塊與功能 msf模塊都放在/usr/share/metasploit-framework/modules目錄下 1、auxiliary 輔助模塊,輔助滲透(埠掃描、登錄密碼爆破、漏洞驗證等) 2、encoders 編碼器模塊,主要包含各種編碼 ......

    uj5u.com 2023-04-20 07:42:59 more
  • Halcon軟體安裝與界面簡介

    1. 下載Halcon17版本到到本地 2. 雙擊安裝包后 3. 步驟如下 1.2 Halcon軟體安裝 界面分為四大塊 1. Halcon的五個助手 1) 影像采集助手:與相機連接,設定相機引數,采集影像 2) 標定助手:九點標定或是其它的標定,生成標定檔案及內參外參,可以將像素單位轉換為長度單位 ......

    uj5u.com 2023-04-20 07:42:17 more
  • 在MacOS下使用Unity3D開發游戲

    第一次發博客,先發一下我的游戲開發環境吧。 去年2月份買了一臺MacBookPro2021 M1pro(以下簡稱mbp),這一年來一直在用mbp開發游戲。我大致分享一下我的開發工具以及使用體驗。 1、Unity 官網鏈接: https://unity.cn/releases 我一般使用的Apple ......

    uj5u.com 2023-04-20 07:40:19 more