ApiDemo学习 ColorFilters ColorMatrix Compass

//1.为文字添加阴影  2.为drawable 添加滤镜
public class ColorFilters extends GraphicsActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new SampleView(this));


    }


    private static class SampleView extends View {
        private Activity mActivity;
        private Drawable mDrawable;
        private Drawable[] mDrawables;
        private Paint mPaint;
        private Paint mPaint2;
        private float mPaintTextOffset;
        private int[] mColors;
        private PorterDuff.Mode[] mModes;
        private int mModeIndex;


        private static void addToTheRight(Drawable curr, Drawable prev) {
            Rect r = prev.getBounds();
            int x = r.right + 12;
            int center = (r.top + r.bottom) >> 1;
            int h = curr.getIntrinsicHeight();
            int y = center - (h >> 1);


            curr.setBounds(x, y, x + curr.getIntrinsicWidth(), y + h);
        }


        public SampleView(Activity activity) {
            super(activity);
            mActivity = activity;
            Context context = activity;
            setFocusable(true);


            mDrawable = context.getResources().getDrawable(R.drawable.btn_default_normal);
            mDrawable.setBounds(0, 0, 150, 48);
//            mDrawable.setDither(true);


            int[] resIDs = new int[] {
                R.drawable.btn_circle_normal,
                R.drawable.btn_check_off,
                R.drawable.btn_check_on
            };
            mDrawables = new Drawable[resIDs.length];
            Drawable prev = mDrawable;
            for (int i = 0; i < resIDs.length; i++) {
                mDrawables[i] = context.getResources().getDrawable(resIDs[i]);
                mDrawables[i].setDither(true);
                addToTheRight(mDrawables[i], prev);
                prev = mDrawables[i];
            }


            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setTextSize(16);
            mPaint.setTextAlign(Paint.Align.CENTER);


            mPaint2 = new Paint(mPaint);
            mPaint2.setAlpha(64);


            Paint.FontMetrics fm = mPaint.getFontMetrics();
            mPaintTextOffset = (fm.descent + fm.ascent) * 0.5f; //计算字母的上下 超出部分居中


            mColors = new int[] {
                0,
                0xCC0000FF,
                0x880000FF,
                0x440000FF,
                0xFFCCCCFF,
                0xFF8888FF,
                0xFF4444FF,
            };


            mModes = new PorterDuff.Mode[] { //具体模式 参考http://blog.csdn.net/starfeng11/article/details/7000284
                PorterDuff.Mode.SRC_ATOP,
                PorterDuff.Mode.MULTIPLY,
            };
            mModeIndex = 0;


            updateTitle();
        }


        private void swapPaintColors() { //切换 画笔的颜色
            if (mPaint.getColor() == 0xFF000000) {
                mPaint.setColor(0xFFFFFFFF);
                mPaint2.setColor(0xFF000000);
            } else {
                mPaint.setColor(0xFF000000);
                mPaint2.setColor(0xFFFFFFFF);
            }
            mPaint2.setAlpha(64);
        }


        private void updateTitle() {
            mActivity.setTitle(mModes[mModeIndex].toString());
        }


        private void drawSample(Canvas canvas, ColorFilter filter) {
            Rect r = mDrawable.getBounds();
            float x = (r.left + r.right) * 0.5f;
            float y = (r.top + r.bottom) * 0.5f - mPaintTextOffset;


            mDrawable.setColorFilter(filter);
            mDrawable.draw(canvas);
            canvas.drawText("Label", x+1, y+1, mPaint2);//这是用来给字体设置阴影的
            canvas.drawText("Label", x, y, mPaint);


            for (Drawable dr : mDrawables) {
                dr.setColorFilter(filter);
                dr.draw(canvas);
            }
        }


        @Override protected void onDraw(Canvas canvas) {
            canvas.drawColor(0xFFCCCCCC);


            canvas.translate(8, 12);//在 8,12 位置draw
            for (int color : mColors) {
                ColorFilter filter;
                if (color == 0) {
                    filter = null;
                } else {
                    filter = new PorterDuffColorFilter(color,
                                                       mModes[mModeIndex]);//添加不同颜色的滤镜
                }
                drawSample(canvas, filter);
                canvas.translate(0, 55);//绘制完了一个 下移55px
            }
        }


        @Override
        public boolean onTouchEvent(MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    break;
                case MotionEvent.ACTION_MOVE:
                    break;
                case MotionEvent.ACTION_UP:
                    // update mode every other time we change paint colors
                    if (mPaint.getColor() == 0xFFFFFFFF) {
                        mModeIndex = (mModeIndex + 1) % mModes.length;
                        updateTitle();
                    }
                    swapPaintColors();
                    invalidate();
                    break;
            }
            return true;
        }
    }
}

ColorMatrix不贴代码 看这

对图像进行颜色方面的处理，通过使用颜色矩阵（ColorMatrix）来实现。从而可以达到很多特效如黑白老照片、泛黄旧照片等等。

1.颜色矩阵(ColorMatrix)

这里有详细的介绍：http://developer.android.com/reference/android/graphics/ColorMatrix.html

不过是英文的，在这里我就先导读一下。

一张位图可以转换为一个5*4的矩阵，涉及到颜色和透明度。如图1所示。在Android中，颜色矩阵M是以一维数组m=[a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t]的方式进行存储的。

   

                      图1

在一张图片中，图像的RGBA（红色、绿色、蓝色、透明度）值决定了该图片所呈现出来的颜色效果。
而图像的RGBA值则存储在一个5*1的颜色分量矩阵C中，由颜色分量矩阵C可以控制图像的颜色效果。颜色分量矩阵C如图2所示。

         

                图2

要想改变一张图片的颜色效果，只需要改变图像的颜色分量矩阵即可。通过颜色矩阵可以很方便的修改图像的颜色分量矩阵。假设修改后的图像颜色分量矩阵为C1，则有如图3所示的颜色分量矩阵计算公式。

                                                             图3

由此可见，通过颜色矩阵修改了原图像的RGBA值，从而达到了改变图片颜色效果的目的。并且，通过如图3所示的运算可知，颜色矩阵M的第一行参数abcde决定了图像的红色成分，第二行参数fghij决定了图像的绿色成分，第三行参数klmno决定了图像的蓝色成分，第四行参数pqrst决定了图像的透明度，第五列参数ejot是颜色的偏移量。
通常，改变颜色分量时可以通过修改第5列的颜色偏移量来实现，如图4所示的颜色矩阵M1，通过计算后可以得知该颜色矩阵的作用是使图像的红色分量和绿色分量均增加100，这样的效果就是图片泛黄（因为红色与绿色混合后得到黄色）。

                  图4

除此之外，也可以通过直接对颜色值乘以某一系数而达到改变颜色分量的目的。如图5所示的颜色矩阵M2，将绿色分量放大了2倍，这样的效果就是图片泛绿色。

                 图5

实例：

步骤一：我们首先自定义一个view，用来显示我们处理的图片。

ColorView.java

[java]  view plain copy

1. package com.mycolor;  
2.   
3. import android.content.Context;  
4. import android.graphics.Bitmap;  
5. import android.graphics.BitmapFactory;  
6. import android.graphics.Canvas;  
7. import android.graphics.ColorMatrix;  
8. import android.graphics.ColorMatrixColorFilter;  
9. import android.graphics.Paint;  
10. import android.util.AttributeSet;  
11. import android.widget.ImageView;  
12.   
13. public class ColorView extends ImageView {  
14.   
15.     private Paint myPaint = null;  
16.     private Bitmap bitmap = null;  
17.     private ColorMatrix myColorMatrix = null;  
18.     private float[] colorArray = {1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0};  
19.       
20.     public ColorView(Context context, AttributeSet attrs)  
21.     {  
22.         super(context, attrs);  
23.         bitmap = BitmapFactory.decodeResource(context.getResources(),R.drawable.a2);   
24.         invalidate();   
25.     }  
26.     @Override  
27.     protected void onDraw(Canvas canvas) {  
28.         super.onDraw(canvas);  
29.         //新建画笔对象  
30.         myPaint = new Paint();     
31.         //描画（原始图片）      
32.         canvas.drawBitmap(bitmap,0, 0, myPaint);        
33.         //新建颜色矩阵对象      
34.         myColorMatrix = new ColorMatrix();     
35.         //设置颜色矩阵的值  
36.         myColorMatrix.set(colorArray);             
37.         //设置画笔颜色过滤器      
38.         myPaint.setColorFilter(new ColorMatrixColorFilter(myColorMatrix));     
39.          //描画（处理后的图片）  
40.         canvas.drawBitmap(bitmap,0,0,myPaint);  
41.         invalidate();   
42.     }  
43.     //设置颜色数值  
44.     public void setColorArray(float[] colorArray){  
45.         this.colorArray = colorArray;  
46.     }  
47.     //设置图片  
48.     public void setBitmap(Bitmap bitmap){  
49.         this.bitmap = bitmap;  
50.     }  
51. }  

步骤二：自定义我们的布局

main.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/colorView_layout"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:orientation="vertical" >  
7.   
8.     <com.mycolor.ColorView  
9.         android:id="@+id/myColorView"  
10.         android:layout_width="480dp"  
11.         android:layout_height="180dp"/>  
12.     <LinearLayout  
13.         android:id="@+id/colorlayout1"  
14.         android:layout_width="fill_parent"  
15.         android:layout_height="wrap_content"  
16.         android:orientation="horizontal" >  
17.   
18.         <EditText  
19.             android:id="@+id/Edit1"  
20.             android:layout_width="50dp"  
21.             android:layout_height="40dp"  
22.             android:layout_weight="1"  
23.             android:text="1" />  
24.   
25.         <EditText  
26.             android:id="@+id/Edit2"  
27.             android:layout_width="50dp"  
28.             android:layout_height="40dp"  
29.             android:layout_weight="1"  
30.             android:text="0"   
31.             />  
32.   
33.         <EditText  
34.             android:id="@+id/Edit3"  
35.             android:layout_width="50dp"  
36.             android:layout_height="40dp"  
37.             android:layout_weight="1"  
38.             android:text="0" />  
39.   
40.         <EditText  
41.             android:id="@+id/Edit4"  
42.             android:layout_width="50dp"  
43.             android:layout_height="40dp"  
44.             android:layout_weight="1"  
45.             android:text="0" />  
46.   
47.         <EditText  
48.             android:id="@+id/Edit5"  
49.             android:layout_width="50dp"  
50.             android:layout_height="40dp"  
51.             android:layout_weight="1"  
52.             android:text="0" />  
53.     </LinearLayout>  
54.   
55.     <LinearLayout  
56.         android:id="@+id/colorlayout2"  
57.         android:layout_width="fill_parent"  
58.         android:layout_height="wrap_content"  
59.         android:orientation="horizontal" >  
60.   
61.         <EditText  
62.             android:id="@+id/Edit6"  
63.             android:layout_width="50dp"  
64.             android:layout_height="40dp"  
65.             android:layout_weight="1"  
66.             android:text="0" />  
67.   
68.         <EditText  
69.             android:id="@+id/Edit7"  
70.             android:layout_width="50dp"  
71.             android:layout_height="40dp"  
72.             android:layout_weight="1"  
73.             android:text="1" />  
74.   
75.         <EditText  
76.             android:id="@+id/Edit8"  
77.             android:layout_width="50dp"  
78.             android:layout_height="40dp"  
79.             android:layout_weight="1"  
80.             android:text="0" />  
81.   
82.         <EditText  
83.             android:id="@+id/Edit9"  
84.             android:layout_width="50dp"  
85.             android:layout_height="40dp"  
86.             android:layout_weight="1"  
87.             android:text="0" />  
88.   
89.         <EditText  
90.             android:id="@+id/Edit10"  
91.             android:layout_width="50dp"  
92.             android:layout_height="40dp"  
93.             android:layout_weight="1"  
94.             android:text="0" />  
95.     </LinearLayout>  
96.   
97.     <LinearLayout  
98.         android:id="@+id/colorlayout3"  
99.         android:layout_width="fill_parent"  
100.         android:layout_height="wrap_content"  
101.         android:orientation="horizontal" >  
102.   
103.         <EditText  
104.             android:id="@+id/Edit11"  
105.             android:layout_width="50dp"  
106.             android:layout_height="40dp"  
107.             android:layout_weight="1"  
108.             android:text="0" />  
109.   
110.         <EditText  
111.             android:id="@+id/Edit12"  
112.             android:layout_width="50dp"  
113.             android:layout_height="40dp"  
114.             android:layout_weight="1"  
115.             android:text="0" />  
116.   
117.         <EditText  
118.             android:id="@+id/Edit13"  
119.             android:layout_width="50dp"  
120.             android:layout_height="40dp"  
121.             android:layout_weight="1"  
122.             android:text="1" />  
123.   
124.         <EditText  
125.             android:id="@+id/Edit14"  
126.             android:layout_width="50dp"  
127.             android:layout_height="40dp"  
128.             android:layout_weight="1"  
129.             android:text="0" />  
130.   
131.         <EditText  
132.             android:id="@+id/Edit15"  
133.             android:layout_width="50dp"  
134.             android:layout_height="40dp"  
135.             android:layout_weight="1"  
136.             android:text="0" />  
137.     </LinearLayout>  
138.   
139.     <LinearLayout  
140.         android:id="@+id/colorlayout4"  
141.         android:layout_width="fill_parent"  
142.         android:layout_height="wrap_content"  
143.         android:orientation="horizontal" >  
144.   
145.         <EditText  
146.             android:id="@+id/Edit16"  
147.             android:layout_width="50dp"  
148.             android:layout_height="40dp"  
149.             android:layout_weight="1"  
150.             android:text="0" />  
151.   
152.         <EditText  
153.             android:id="@+id/Edit17"  
154.             android:layout_width="50dp"  
155.             android:layout_height="40dp"  
156.             android:layout_weight="1"  
157.             android:text="0" />  
158.   
159.         <EditText  
160.             android:id="@+id/Edit18"  
161.             android:layout_width="50dp"  
162.             android:layout_height="40dp"  
163.             android:layout_weight="1"  
164.             android:text="0" />  
165.   
166.         <EditText  
167.             android:id="@+id/Edit19"  
168.             android:layout_width="50dp"  
169.             android:layout_height="40dp"  
170.             android:layout_weight="1"  
171.             android:text="1" />  
172.   
173.         <EditText  
174.             android:id="@+id/Edit20"  
175.             android:layout_width="50dp"  
176.             android:layout_height="40dp"  
177.             android:layout_weight="1"  
178.             android:text="0" />  
179.     </LinearLayout>  
180.   
181.     <Button  
182.         android:id="@+id/Button"  
183.         android:layout_width="fill_parent"  
184.         android:layout_height="wrap_content"  
185.         android:layout_marginBottom="0dp"  
186.         android:text="提交" />  
187.   
188. </LinearLayout>  

步骤三：完成我们的Activity

[java]  view plain copy

1. package com.mycolor;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.view.View.OnClickListener;  
7. import android.widget.Button;  
8. import android.widget.EditText;  
9.   
10. public class ColorActivity extends Activity  implements OnClickListener{  
11.       
12.       
13.     private Button button = null;  
14.     private ColorView colorView = null;  
15.     private EditText[] editTextArray = null;  
16.     private float colorArray[] = null;  
17.     private int[] EditTextID = {R.id.Edit1,R.id.Edit2,R.id.Edit3,R.id.Edit4,R.id.Edit5,  
18.                                 R.id.Edit6,R.id.Edit7,R.id.Edit8,R.id.Edit9,R.id.Edit10,  
19.                                 R.id.Edit11,R.id.Edit12,R.id.Edit13,R.id.Edit14,R.id.Edit15,  
20.                                 R.id.Edit16,R.id.Edit17,R.id.Edit18,R.id.Edit19,R.id.Edit20};  
21.     @Override  
22.     public void onCreate(Bundle savedInstanceState) {  
23.         super.onCreate(savedInstanceState);  
24.         setContentView(R.layout.main);  
25.           
26.           
27.         button = (Button)findViewById(R.id.Button);  
28.         button.setOnClickListener(this);  
29.           
30.         editTextArray = new EditText[20];  
31.         colorArray = new float[20];  
32.         for(int i = 0;i < 20;i++){  
33.             editTextArray[i] = (EditText)findViewById(EditTextID[i]);  
34.         }  
35.           
36.         colorView = (ColorView)findViewById(R.id.myColorView);  
37.     }  
38.     @Override  
39.     public void onClick(View v) {  
40.         for(int i = 0;i < 20;i++){  
41.             colorArray[i] = Float.valueOf(editTextArray[i].getText().toString().trim());  
42.             System.out.println("i = " + i + ":" + editTextArray[i].getText().toString().trim());  
43.         }  
44.         colorView.setColorArray(colorArray);  
45.     }  
46. }  

这样就可以了。

效果图：

改变值可以呈现不同的效果：

原文参考：点击打开链接

代码：点击下载

public class Compass extends GraphicsActivity {

    private static final String TAG = "Compass";

    private SensorManager mSensorManager;
    private Sensor mSensor;
    private SampleView mView;
    private float[] mValues;

    private final SensorEventListener mListener = new SensorEventListener() {
        public void onSensorChanged(SensorEvent event) {
            if (Config.DEBUG) Log.d(TAG,
                    "sensorChanged (" + event.values[0] + ", " + event.values[1] + ", " + event.values[2] + ")");
            mValues = event.values; //旋转的值,
            if (mView != null) {
                mView.invalidate();
            }
        }

        public void onAccuracyChanged(Sensor sensor, int accuracy) {
        }
    };

    @Override
    protected void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        mSensorManager = (SensorManager)getSystemService(Context.SENSOR_SERVICE);
        mSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION);
        mView = new SampleView(this);
        setContentView(mView);
    }

    @Override
    protected void onResume()
    {
        if (Config.DEBUG) Log.d(TAG, "onResume");
        super.onResume();

        mSensorManager.registerListener(mListener, mSensor,
                SensorManager.SENSOR_DELAY_GAME);
    }

    @Override
    protected void onStop()
    {
        if (Config.DEBUG) Log.d(TAG, "onStop");
        mSensorManager.unregisterListener(mListener);
        super.onStop();
    }

    private class SampleView extends View {
        private Paint   mPaint = new Paint();
        private Path    mPath = new Path();
        private boolean mAnimate;

        public SampleView(Context context) {
            super(context);

            // Construct a wedge-shaped path
            //绘制一个箭头
            mPath.moveTo(0, -50);
            mPath.lineTo(-20, 60);
            mPath.lineTo(0, 50);
            mPath.lineTo(20, 60);
            mPath.close();
        }

        @Override protected void onDraw(Canvas canvas) {
            Paint paint = mPaint;

            canvas.drawColor(Color.WHITE);

            paint.setAntiAlias(true);
            paint.setColor(Color.BLACK);
            paint.setStyle(Paint.Style.FILL);

            int w = canvas.getWidth();//居中
            int h = canvas.getHeight();
            int cx = w / 2;
            int cy = h / 2;

            canvas.translate(cx, cy);
            if (mValues != null) {
                canvas.rotate(-mValues[0]);
            }
            canvas.drawPath(mPath, mPaint);
        }

        @Override
        protected void onAttachedToWindow() {
            mAnimate = true;
            if (Config.DEBUG) Log.d(TAG, "onAttachedToWindow. mAnimate=" + mAnimate);
            super.onAttachedToWindow();
        }

        @Override
        protected void onDetachedFromWindow() {
            mAnimate = false;
            if (Config.DEBUG) Log.d(TAG, "onDetachedFromWindow. mAnimate=" + mAnimate);
            super.onDetachedFromWindow();
        }
    }
}