二话不说,先上效果图:
这个图是什么意思呢,有没有看到一直在变颜色啊,有没有很像星云变幻呢,有没有很炫,快来看看怎么实现的吧!
这是我们要被处理的原图,实现方式就是通过不断的改变这张图的色相从而达到效果:
贴布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/nightfall_starlight_panoramic9"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="10dp"
android:visibility="visible" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="色相"
android:textAppearance="?android:attr/textAppearanceSmall" />
<SeekBar
android:id="@+id/hue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="饱和度"
android:textAppearance="?android:attr/textAppearanceSmall" />
<SeekBar
android:id="@+id/saturation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="明度"
android:textAppearance="?android:attr/textAppearanceSmall" />
<SeekBar
android:id="@+id/lum"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="start"
android:text="start"
android:visibility="visible" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="reset"
android:text="reset"
android:visibility="visible" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="stop"
android:text="stop"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
贴实现代码:
package com.sahadev;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import com.lidroid.xutils.view.annotation.ViewInject;
public class MainActivity3 extends Activity implements OnSeekBarChangeListener, Runnable {
@ViewInject(R.id.hue)
SeekBar hue;
@ViewInject(R.id.saturation)
SeekBar saturation;
@ViewInject(R.id.lum)
SeekBar lum;
@ViewInject(R.id.image)
ImageView image;
// 颜色的最大值255,中间值127
private final static int MAX_VALUE = 255, MID_VALUE = 127;
// 临时 色相,饱和度,明度
private float mHue, mSaturation, mLum;
// 被处理的图像
private Bitmap bitmap;
// 临时变换值
private int tempValue = MID_VALUE;
// 运行标志位
private boolean runFlag;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.primary_color);
com.lidroid.xutils.ViewUtils.inject(this);
// 将图片缩放到屏幕的适合尺寸
bitmap = MainActivity.scaleImage(this, R.drawable.nightfall_starlight_panoramic9);
// 事件绑定
hue.setOnSeekBarChangeListener(this);
saturation.setOnSeekBarChangeListener(this);
lum.setOnSeekBarChangeListener(this);
// 进行初始化状态
hue.setMax(MAX_VALUE);
saturation.setMax(MAX_VALUE);
lum.setMax(MAX_VALUE);
reset(null);
image.setImageBitmap(bitmap);
}
/*
* 进行循环任务
*
* @see java.lang.Runnable#run()
*/
@Override
public void run() {
hue.setProgress(tempValue++);
if (tempValue == MAX_VALUE) {
tempValue = 0;
}
if (!runFlag) {
return;
}
image.postDelayed(this, 10);
}
/**
* 停止循环
*
* @param view
*/
public void stop(View view) {
runFlag = false;
}
/**
* 开始循环滚动
*
* @param view
*/
public void start(View view) {
runFlag = true;
image.postDelayed(this, 100);
}
/**
* 重置
*
* @param view
*/
public void reset(View view) {
hue.setProgress(MID_VALUE);
saturation.setProgress(MID_VALUE);
lum.setProgress(MID_VALUE);
tempValue = MID_VALUE;
}
/*
* 根据Seekbar的进度控制图片的效果
*/
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
switch (seekBar.getId()) {
case R.id.hue:
mHue = (progress - MID_VALUE) * 1.0f / MID_VALUE * 180;
break;
case R.id.saturation:
mSaturation = progress * 1.0f / MID_VALUE;
break;
case R.id.lum:
mLum = progress * 1.0f / MID_VALUE;
break;
default:
break;
}
image.setImageBitmap(ImageHelper.handleImageEffect(bitmap, mHue, mSaturation, mLum));
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
public static class ImageHelper {
/**
* 处理图像
*
* @param bitmap
* 原图
* @param degrees
* 色相值
* @param sat
* 饱和度值
* @param lum
* 明度值
* @return 处理后的图像
*
*/
public static Bitmap handleImageEffect(Bitmap bitmap, float degrees, float sat, float lum) {
Bitmap temp = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(temp);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
// 设置色相
ColorMatrix hueMatrix = new ColorMatrix();
hueMatrix.setRotate(0, degrees);
hueMatrix.setRotate(1, degrees);
hueMatrix.setRotate(2, degrees);
// 设置饱和度
ColorMatrix saturationMatrix = new ColorMatrix();
saturationMatrix.setSaturation(sat);
// 设置明度
ColorMatrix lumMatrix = new ColorMatrix();
lumMatrix.setScale(lum, lum, lum, 1);
// 融合
ColorMatrix imageMatrix = new ColorMatrix();
imageMatrix.postConcat(lumMatrix);
imageMatrix.postConcat(saturationMatrix);
imageMatrix.postConcat(hueMatrix);
// 给paint设置颜色属性
paint.setColorFilter(new ColorMatrixColorFilter(imageMatrix));
// 绘制
canvas.drawBitmap(bitmap, 0, 0, paint);
return temp;
}
}
}
在onCreate方法里刚开始会调用一个scaleImage的方法,该方法可以出门左转参见如何适配APP引导页的文章,有详细介绍。
地址:http://blog.csdn.net/sahadev_/article/details/48475217
没想到安卓提供的图片处理效果这么强大,也了解到原来图片处理是通过矩阵来算的,其它知识请自行查阅。
快试一下效果吧!