二话不说,先上效果图:
这个图是什么意思呢,有没有看到一直在变颜色啊,有没有很像星云变幻呢,有没有很炫,快来看看怎么实现的吧!
这是我们要被处理的原图,实现方式就是通过不断的改变这张图的色相从而达到效果:
贴布局文件:
<?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" ><ImageViewandroid:id="@+id/image"android:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/nightfall_starlight_panoramic9"android:scaleType="centerCrop" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:orientation="vertical"android:padding="10dp"android:visibility="visible" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="色相"android:textAppearance="?android:attr/textAppearanceSmall" /><SeekBarandroid:id="@+id/hue"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="10dp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="饱和度"android:textAppearance="?android:attr/textAppearanceSmall" /><SeekBarandroid:id="@+id/saturation"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="10dp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="明度"android:textAppearance="?android:attr/textAppearanceSmall" /><SeekBarandroid:id="@+id/lum"android:layout_width="match_parent"android:layout_height="wrap_content" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal" ><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="start"android:text="start"android:visibility="visible" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="reset"android:text="reset"android:visibility="visible" /><Buttonandroid: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,中间值127private 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;@Overrideprotected 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()*/@Overridepublic 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的进度控制图片的效果*/@Overridepublic 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));}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {}@Overridepublic 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
没想到安卓提供的图片处理效果这么强大,也了解到原来图片处理是通过矩阵来算的,其它知识请自行查阅。
快试一下效果吧!