版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zqd1984309864/article/details/78364629
首先看一下效果:
通过来给RGB改变不同的值,图片出现不同的变化,其中负值代表削弱相应的颜色,正值代表加强相应的颜色。下面给出主要步骤,下边会贴源码
主要步骤:
1.创建一个类继承自View,重写onDraw方法
2.创建画笔
3.下面给画笔创建着色器:
什么是着色器,在通常情况下,我们会给画笔设置颜色setColor,现在我们不想给画笔设置单一的颜色,想设置更炫酷的效果,那么就用到Paint.setShader方法,
setShader的第二个参数是模式,我们这里使用镜面模式(还有另外两种模式),当然shader的种类很多,我们这里用到BitmapShader,顾名思义是用一个Bitmao设置Paint代码如下:
扫描二维码关注公众号,回复:
4873355 查看本文章
/**
* 初始化画笔,抗锯齿
*/
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>