自定义View之RGB颜色变化Paint画笔颜色过滤器setColorFilter,LightingColorFilter光照过滤器

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zqd1984309864/article/details/78364629


首先看一下效果:



通过来给RGB改变不同的值,图片出现不同的变化,其中负值代表削弱相应的颜色,正值代表加强相应的颜色。下面给出主要步骤,下边会贴源码

主要步骤:

1.创建一个类继承自View,重写onDraw方法

2.创建画笔

3.下面给画笔创建着色器:

什么是着色器,在通常情况下,我们会给画笔设置颜色setColor,现在我们不想给画笔设置单一的颜色,想设置更炫酷的效果,那么就用到Paint.setShader方法,

setShader的第二个参数是模式,我们这里使用镜面模式(还有另外两种模式),当然shader的种类很多,我们这里用到BitmapShader,顾名思义是用一个Bitmao设置Paint代码如下:

/**
         * 初始化画笔,抗锯齿
         */
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        /**
         * 创建bitmap对象
         */
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.nbaba);
        /**
         *为画笔设置着色器
         */
        mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR));
4.根据seekBar的变化给画笔paint设置颜色过滤器,不同的过滤器渲染了不同的颜色效果核心代码如下:

/**
     * 过滤器对象
     */
    private LightingColorFilter lightingColorFilter;
mPaint.setColorFilter(lightingColorFilter);
那么创建LightingColorFilter的参数是什么呢?我们不妨看一下源码的解释:

/**
     * Create a colorfilter that multiplies the RGB channels by one color,
     * and then adds a second color. The alpha components of the mul and add
     * arguments are ignored.
     */
    public LightingColorFilter(@ColorInt int mul, @ColorInt int add) {
        mMul = mul;
        mAdd = add;
    }
大致意思如下:创建一个颜色过滤器,乘以一个颜色,加上一个颜色,参数的透明度被忽略。怎么理解,第一个参数mul决定相应颜色被削弱的程度,第二个函数add决定了相应颜色的加深程度,如果乘以0x00ffff,那么红色被完全削弱,加上0xff0000那么红色被加强最深。

下面是完整代码:

MainActivity.java

package com.example.zqd.rgbchanged;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

    private SeekBar sb_r;
    private SeekBar sb_g;
    private SeekBar sb_b;
    private TextView tv_r;
    private TextView tv_g;
    private TextView tv_b;
    private PictureView pv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        sb_r.setOnSeekBarChangeListener(this);
        sb_g.setOnSeekBarChangeListener(this);
        sb_b.setOnSeekBarChangeListener(this);
    }

    private void initView() {
        pv = (PictureView) findViewById(R.id.pv);
        sb_r = (SeekBar) findViewById(R.id.sb_r);
        sb_g = (SeekBar) findViewById(R.id.sb_g);
        sb_b = (SeekBar) findViewById(R.id.sb_b);
        tv_r = (TextView) findViewById(R.id.tv_r);
        tv_g = (TextView) findViewById(R.id.tv_g);
        tv_b = (TextView) findViewById(R.id.tv_b);
        sb_r.setMax(510);
        sb_g.setMax(510);
        sb_b.setMax(510);
        sb_r.setProgress(255);
        sb_g.setProgress(255);
        sb_b.setProgress(255);
    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        pv.changeRGB(sb_r.getProgress() - 255, sb_g.getProgress() - 255, sb_b.getProgress() - 255);
        switch (seekBar.getId()) {
            case R.id.sb_r:
                tv_r.setText(progress - 255 + "");
                break;
            case R.id.sb_g:
                tv_g.setText(progress - 255 + "");
                break;
            case R.id.sb_b:
                tv_b.setText(progress - 255 + "");
                break;
        }
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
}
PictureView.java

package com.example.zqd.rgbchanged;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.LightingColorFilter;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by zqd on 2017/10/27.
 */

public class PictureView extends View {

    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 屏幕宽度
     */
    private int w;
    /**
     * 屏幕高度
     */
    private int h;
    /**
     * 过滤器对象
     */
    private LightingColorFilter lightingColorFilter;

    public PictureView(Context context) {
        super(context);
        init();
    }

    public PictureView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        /**
         * 得到宽高
         */
        this.w = w;
        this.h = h;
    }

    private void init() {
        /**
         * 初始化画笔,抗锯齿
         */
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        /**
         * 创建bitmap对象
         */
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.nbaba);
        /**
         *为画笔设置着色器
         */
        mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        /**
         * 平移画布至屏幕中心点
         */
        canvas.translate(w / 2, h / 2);
        /**
         * 画圆
         */
        canvas.drawCircle(0, 0, 200, mPaint);
        super.onDraw(canvas);
    }

    /**
     * 获取RGB值
     *
     * @param r
     * @param g
     * @param b
     */
    public void changeRGB(int r, int g, int b) {
        int mr = 0;
        int mg = 0;
        int mb = 0;
        int ar = 0;
        int ag = 0;
        int ab = 0;

        if (r < 0) {
            mr = r + 255;
            ar = 0;
        } else if (r == 0) {
            mr = 255;
            ar = 0;
        } else {
            mr = 255;
            ar = r;
        }

        if (g < 0) {
            mg = g + 255;
            ag = 0;
        } else if (g == 0) {
            mg = 255;
            ag = 0;
        } else {
            mg = 255;
            ag = g;
        }

        if (b < 0) {
            mb = b + 255;
            ab = 0;
        } else if (b == 0) {
            mb = 255;
            ab = 0;
        } else {
            mb = 255;
            ab = b;
        }
        lightingColorFilter = new LightingColorFilter(Integer.valueOf(transString(Integer.toHexString(mr)) + transString(Integer.toHexString(mg)) + transString(Integer.toHexString(mb)), 16),
                Integer.valueOf(transString(Integer.toHexString(ar)) + transString(Integer.toHexString(ag)) + transString(Integer.toHexString(ab)), 16));
        mPaint.setColorFilter(lightingColorFilter);
        invalidate();
    }

    /**
     * 处理RGB
     *
     * @param s
     * @return
     */
    public String transString(String s) {
        if (s.length() == 1) {
            return "0" + s;
        } else {
            return s;
        }
    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.zqd.rgbchanged.MainActivity">

    <com.example.zqd.rgbchanged.PictureView
        android:id="@+id/pv"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingRight="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:text="R"
                android:textSize="18sp" />

            <SeekBar
                android:id="@+id/sb_r"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="8" />

            <TextView
                android:id="@+id/tv_r"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingRight="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:text="G"
                android:textSize="18sp" />

            <SeekBar
                android:id="@+id/sb_g"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="8" />

            <TextView
                android:id="@+id/tv_g"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingRight="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:text="B"
                android:textSize="18sp" />

            <SeekBar
                android:id="@+id/sb_b"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="8" />

            <TextView
                android:id="@+id/tv_b"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center" />

        </LinearLayout>
    </LinearLayout>


</LinearLayout>





猜你喜欢

转载自blog.csdn.net/zqd1984309864/article/details/78364629