程序博客网 > socket编程语言

Android自定义控件——3D画廊和图像矩阵

来源：互联网 发布：socket编程语言 编辑：程序博客网 时间：2024/05/21 22:58

1.3D画廊的实现

       我们知道Android系统已经为我们提供好了一个展示图片的“容器”——Gallery，但是这个Gallery显示的效果是平面化的，动态效果不强。这里，我们动手做一个自定义的Gallery组件，实现图片的3D效果展示，想想应该不错吧，先看看效果图：


        实现这个3D效果的Gallery该怎么做呢？首先，分析一下，

1，展示图片，系统自带Gallery组件，可以基于这个Gallery组件扩展我们所需要的效果。

2，展示效果需要进行3D成像。

3，展示的图片下方需要显示图片的倒影。

4，展示图片的倒影需要加上“遮罩”效果。

     好了，问题列好了，我们一个个来解决吧！代码量不多，直接上代码好了。

[java] view plain copy
 print?
  1. package com.example.gallery.view;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Camera;  
  5. import android.graphics.Matrix;  
  6. import android.util.AttributeSet;  
  7. import android.view.View;  
  8. import android.view.animation.Transformation;  
  9. import android.widget.Gallery;  
  10. import android.widget.ImageView;  
  11.   
  12. @SuppressWarnings("deprecation")  
  13. public class CustomGallery extends Gallery {  
  14.   
  15.     /** Gallery的中心点 */  
  16.     private int galleryCenterPoint = 0;  
  17.     /** 摄像机对象 */  
  18.     private Camera camera;  
  19.   
  20.     public CustomGallery(Context context, AttributeSet attrs) {  
  21.         super(context, attrs);  
  22.         // 启动getChildStaticTransformation  
  23.         setStaticTransformationsEnabled(true);  
  24.         camera = new Camera();  
  25.     }  
  26.   
  27.     /** 
  28.      * 当Gallery的宽和高改变时回调此方法，第一次计算gallery的宽和高时，也会调用此方法 
  29.      */  
  30.     @Override  
  31.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
  32.         // TODO Auto-generated method stub  
  33.         super.onSizeChanged(w, h, oldw, oldh);  
  34.   
  35.         galleryCenterPoint = getGalleryCenterPoint();  
  36.   
  37.     }  
  38.   
  39.     /** 
  40.      * 返回gallery的item的子图形的变换效果 
  41.      *  
  42.      * @param t 
  43.      *            指定当前item的变换效果 
  44.      */  
  45.     @Override  
  46.     protected boolean getChildStaticTransformation(View child, Transformation t) {  
  47.         int viewCenterPoint = getViewCenterPoint(child); // view的中心点  
  48.         int rotateAngle = 0; // 旋转角度，默认为0  
  49.   
  50.         // 如果view的中心点不等于gallery中心，两边图片需要计算旋转的角度  
  51.         if (viewCenterPoint != galleryCenterPoint) {  
  52.             // gallery中心点 - view中心点 = 差值  
  53.             int diff = galleryCenterPoint - viewCenterPoint;  
  54.             // 差值 / 图片的宽度 = 比值  
  55.             float scale = (float) diff / (float) child.getWidth();  
  56.             // 比值 * 最大旋转角度 = 最终view的旋转角度(最大旋转角度定为50度)  
  57.             rotateAngle = (int) (scale * 50);  
  58.   
  59.             if (Math.abs(rotateAngle) > 50) {// 当最终旋转角度 》 最大旋转角度，要改成50或-50  
  60.                 rotateAngle = rotateAngle > 0 ? 50 : -50;  
  61.             }  
  62.         }  
  63.   
  64.         // 设置变换效果前，需要把Transformation中的上一个item的变换效果清除  
  65.         t.clear();  
  66.         t.setTransformationType(Transformation.TYPE_MATRIX); // 设置变换效果的类型为矩阵类型  
  67.         startTransformationItem((ImageView) child, rotateAngle, t);  
  68.         return true;  
  69.     }  
  70.   
  71.     /** 
  72.      * 设置变换的效果 
  73.      *  
  74.      * @param iv 
  75.      *            gallery的item 
  76.      * @param rotateAngle 
  77.      *            旋转的角度 
  78.      * @param t 
  79.      *            变换的对象 
  80.      */  
  81.     private void startTransformationItem(ImageView iv, int rotateAngle,  
  82.             Transformation t) {  
  83.         camera.save(); // 保存状态  
  84.         int absRotateAngle = Math.abs(rotateAngle);  
  85.   
  86.         // 1.放大效果（中间的图片要比两边的图片大）  
  87.         camera.translate(0, 0, 100f); // 给摄像机定位  
  88.         int zoom = -250 + (absRotateAngle * 2);  
  89.         camera.translate(0, 0, zoom);  
  90.   
  91.         // 2.透明度（中间的图片完全显示，两边有一定的透明度）  
  92.         int alpha = (int) (255 - (absRotateAngle * 2.5));  
  93.         iv.setAlpha(alpha);  
  94.   
  95.         // 3.旋转（中间的图片没有旋转角度，只要不在中间的图片都有旋转角度）  
  96.         camera.rotateY(rotateAngle);  
  97.   
  98.         Matrix matrix = t.getMatrix(); // 变换的矩阵，将变换效果添加到矩阵中  
  99.         camera.getMatrix(matrix); // 把matrix矩阵给camera对象，camera对象会把上面添加的效果转换成矩阵添加到matrix对象中  
  100.         matrix.preTranslate(-iv.getWidth() / 2, -iv.getHeight() / 2); // 矩阵前乘  
  101.         matrix.postTranslate(iv.getWidth() / 2, iv.getHeight() / 2); // 矩阵后乘  
  102.   
  103.         camera.restore(); // 恢复之前保存的状态  
  104.     }  
  105.   
  106.     /** 
  107.      * 获取Gallery的中心点 
  108.      *  
  109.      * @return 
  110.      */  
  111.     private int getGalleryCenterPoint() {  
  112.         return this.getWidth() / 2;  
  113.     }  
  114.   
  115.     /** 
  116.      * 获取item上view的中心点 
  117.      *  
  118.      * @param v 
  119.      * @return 
  120.      */  
  121.     private int getViewCenterPoint(View v) {  
  122.         return v.getWidth() / 2 + v.getLeft(); // 图片宽度的一半+图片距离屏幕左边距  
  123.     }  
  124.   
  125. }  
       代码中有注释，大家可以看着注释理解代码，我在这里要是说怎么考虑的，显得特别麻烦！这里还有一个很重要的概念——矩阵，这个我留在下面去讲解，往下看吧。

获取图片的工具类：

[java] view plain copy
 print?
  1. package com.example.gallery.view;  
  2.   
  3. import java.lang.ref.SoftReference;  
  4. import java.util.Hashtable;  
  5.   
  6. import android.content.res.Resources;  
  7. import android.graphics.Bitmap;  
  8. import android.graphics.Bitmap.Config;  
  9. import android.graphics.PorterDuff.Mode;  
  10. import android.graphics.PorterDuffXfermode;  
  11. import android.graphics.Shader.TileMode;  
  12. import android.graphics.BitmapFactory;  
  13. import android.graphics.Canvas;  
  14. import android.graphics.LinearGradient;  
  15. import android.graphics.Matrix;  
  16. import android.graphics.Paint;  
  17. import android.util.Log;  
  18.   
  19. public class ImageUtil {  
  20.   
  21.     private static final String TAG = "ImageUtil";  
  22.     /** 缓存集合 */  
  23.     private static Hashtable<Integer, SoftReference<Bitmap>> mImageCache //  
  24.     = new Hashtable<Integer, SoftReference<Bitmap>>();  
  25.   
  26.     /** 
  27.      * 根据id返回一个处理后的图片 
  28.      *  
  29.      * @param res 
  30.      * @param resID 
  31.      * @return 
  32.      */  
  33.     public static Bitmap getImageBitmap(Resources res, int resID) {  
  34.         // 先去集合中取当前resID是否已经拿过图片，如果集合中有，说明已经拿过，直接使用集合中的图片返回  
  35.         SoftReference<Bitmap> reference = mImageCache.get(resID);  
  36.         if (reference != null) {  
  37.             Bitmap bitmap = reference.get();  
  38.             if (bitmap != null) {// 从内存中取  
  39.                 Log.i(TAG, "从内存中取");  
  40.                 return bitmap;  
  41.             }  
  42.         }  
  43.         // 如果集合中没有，就调用getInvertImage得到一个图片，需要向集合中保留一张，最后返回当前图片  
  44.         Log.i(TAG, "重新加载");  
  45.         Bitmap invertBitmap = getInvertBitmap(res, resID);  
  46.         // 在集合中保存一份，便于下次获取时直接在集合中获取  
  47.         mImageCache.put(resID, new SoftReference<Bitmap>(invertBitmap));  
  48.         return invertBitmap;  
  49.     }  
  50.   
  51.     /** 
  52.      * 根据图片的id，获取到处理之后的图片 
  53.      *  
  54.      * @param resID 
  55.      * @return 
  56.      */  
  57.     public static Bitmap getInvertBitmap(Resources res, int resID) {  
  58.         // 1.获取原图  
  59.         Bitmap sourceBitmap = BitmapFactory.decodeResource(res, resID);  
  60.   
  61.         // 2.生成倒影图片  
  62.         Matrix m = new Matrix(); // 图片矩阵  
  63.         m.setScale(1.0f, -1.0f); // 让图片按照矩阵进行反转  
  64.         Bitmap invertBitmap = Bitmap.createBitmap(sourceBitmap, 0,  
  65.                 sourceBitmap.getHeight() / 2, sourceBitmap.getWidth(),  
  66.                 sourceBitmap.getHeight() / 2, m, false);  
  67.   
  68.         // 3.两张图片合成一张图片  
  69.         Bitmap resultBitmap = Bitmap.createBitmap(sourceBitmap.getWidth(),  
  70.                 (int) (sourceBitmap.getHeight() * 1.5 + 5), Config.ARGB_8888);  
  71.         Canvas canvas = new Canvas(resultBitmap); // 为合成图片指定一个画板  
  72.         canvas.drawBitmap(sourceBitmap, 0f, 0f, null); // 将原图片画在画布的上方  
  73.         canvas.drawBitmap(invertBitmap, 0f, sourceBitmap.getHeight() + 5, null); // 将倒影图片画在画布的下方  
  74.   
  75.         // 4.添加遮罩效果  
  76.         Paint paint = new Paint();  
  77.         // 设置遮罩的颜色，这里使用的是线性梯度  
  78.         LinearGradient shader = new LinearGradient(0,  
  79.                 sourceBitmap.getHeight() + 5, 0, resultBitmap.getHeight(),  
  80.                 0x70ffffff, 0x00ffffff, TileMode.CLAMP);  
  81.         paint.setShader(shader);  
  82.         // 设置模式为：遮罩，取交集  
  83.         paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));  
  84.         canvas.drawRect(0, sourceBitmap.getHeight() + 5,  
  85.                 sourceBitmap.getWidth(), resultBitmap.getHeight(), paint);  
  86.   
  87.         return resultBitmap;  
  88.     }  
  89. }  
      这个工具类就是获取整个图片的，包括实现图片的倒影和遮罩效果，看注释！这里需要讲解的是，如果避免OOM，这是一个较复杂的概念，不是一两句话就能讲清楚的，android下加载图片很容易就处理OOM，当然了，避免OOM的方式有很多，我在这是使用了内存缓存机制来避免了，即使用Java给我们提供好的“软引用”来解决。接下来，就是怎么引用这个画廊组件了。

[html] view plain copy
 print?
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="@android:color/black" >  
  6.   
  7.     <com.example.gallery.view.CustomGallery  
  8.         android:id="@+id/customgallery"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent" >  
  11.     </com.example.gallery.view.CustomGallery>  
  12.   
  13. </RelativeLayout>  
[java] view plain copy
 print?
  1. package com.example.gallery;  
  2.   
  3. import com.example.gallery.view.CustomGallery;  
  4. import com.example.gallery.view.ImageUtil;  
  5.   
  6. import android.app.Activity;  
  7. import android.graphics.Bitmap;  
  8. import android.graphics.drawable.BitmapDrawable;  
  9. import android.os.Bundle;  
  10. import android.view.View;  
  11. import android.view.ViewGroup;  
  12. import android.widget.BaseAdapter;  
  13. import android.widget.Gallery.LayoutParams;  
  14. import android.widget.ImageView;  
  15.   
  16. public class MainActivity extends Activity {  
  17.   
  18.     /** 图片资源数组 */  
  19.     private int[] imageResIDs;  
  20.   
  21.     @Override  
  22.     protected void onCreate(Bundle savedInstanceState) {  
  23.         super.onCreate(savedInstanceState);  
  24.         setContentView(R.layout.activity_main);  
  25.         imageResIDs = new int[]{//  
  26.         R.drawable.imgres_01, //  
  27.                 R.drawable.imgres_02, //  
  28.                 R.drawable.imgres_03, //  
  29.                 R.drawable.imgres_04, //  
  30.                 R.drawable.imgres_05, //  
  31.                 R.drawable.imgres_06, //  
  32.                 R.drawable.imgres_07, //  
  33.                 R.drawable.imgres_08, //  
  34.                 R.drawable.imgres_01, //  
  35.                 R.drawable.imgres_02, //  
  36.                 R.drawable.imgres_03, //  
  37.                 R.drawable.imgres_04, //  
  38.                 R.drawable.imgres_05, //  
  39.                 R.drawable.imgres_06, //  
  40.                 R.drawable.imgres_07, //  
  41.                 R.drawable.imgres_08 //  
  42.         };  
  43.         CustomGallery customGallery = (CustomGallery) findViewById(R.id.customgallery);  
  44.         ImageAdapter adapter = new ImageAdapter();  
  45.         customGallery.setAdapter(adapter);  
  46.     }  
  47.   
  48.     public class ImageAdapter extends BaseAdapter {  
  49.   
  50.         @Override  
  51.         public int getCount() {  
  52.             // TODO Auto-generated method stub  
  53.             return imageResIDs.length;  
  54.         }  
  55.   
  56.         @Override  
  57.         public Object getItem(int position) {  
  58.             // TODO Auto-generated method stub  
  59.             return imageResIDs[position];  
  60.         }  
  61.   
  62.         @Override  
  63.         public long getItemId(int position) {  
  64.             // TODO Auto-generated method stub  
  65.             return position;  
  66.         }  
  67.   
  68.         @Override  
  69.         public View getView(int position, View convertView, ViewGroup parent) {  
  70.             // TODO Auto-generated method stub  
  71.             ImageView imageView;  
  72.             if (convertView != null) {  
  73.                 imageView = (ImageView) convertView;  
  74.             } else {  
  75.                 imageView = new ImageView(MainActivity.this);  
  76.             }  
  77.             Bitmap bitmap = ImageUtil.getImageBitmap(getResources(),  
  78.                     imageResIDs[position]);  
  79.             BitmapDrawable drawable = new BitmapDrawable(bitmap);  
  80.             drawable.setAntiAlias(true); // 消除锯齿  
  81.             imageView.setImageDrawable(drawable);  
  82.             LayoutParams params = new LayoutParams(240, 320);  
  83.             imageView.setLayoutParams(params);  
  84.             return imageView;  
  85.         }  
  86.     }  
  87. }  


===========================================华丽丽的分割线=============================================


2.Android的矩阵基础

UI开发过程中，我们经常需要对图片进行处理，常见的如贴图，复杂一些的还有位置变换、旋转、滤镜特效等，下面简单介绍一下关于图片处理的一些基本知识和原理。

1 基本概念
        对于图片的处理，最常使用到的数据结构是Bitmap，它包含了一张图片所有的数据，这些数据数据包括那些内容呢？简单说来就是由点阵和颜色值组成的，所谓点阵就是一个在概念上是Width * Height的矩阵，每一个元素对应着图片的一个像素，也就是说，点阵保存着图片的空间位置信息；而颜色值即ARGB，分别对应透明度、红、绿、蓝这四个通道分量，每个通道用8比特定义，所以一个颜色值就是一个int整型，可以表示256*256*256种颜色值。

       Android中我们常用到这么几个常量：ARGB_8888、ARGB_4444、RGB_565。这几个常量其实就是告诉系统如何对图片的颜色值进行处理，例如ARGB_8888是告诉系统透明度、R、G、B在颜色值中分别用8bit表示，这时颜色值为32bit，这样的定义能够表示最多的颜色值，图片质量也是最好的；ARGB_4444则是每个通道用4bit表示，这样颜色值只用16bit，节省了空间，但是却只能表示16*16*16种颜色，也就是说图片很失去很多彩色信息；RGB_565类型的颜色值同样是16bit，但是它丢弃了透明度信息，可以表示32*64*32种颜色值。

2 颜色矩阵
颜色矩阵是一个5*4的矩阵，用来对图片颜色值进行处理。定义颜色矩阵和颜色值如下如下：


进行如下矩阵运算：


结果R为4*1的矩阵，这个矩阵就是新的颜色值，R中每个通道的值分别如下：
R’ = a*R + b*G + c*B + d*A + e;
G’ = f*R + g*G + h*B + i*A + j;
B’ = k*R + l*G + m*B + n*A + o;
A’ = p*R + q*G + r*B + s*A + t;

这样看起来或许很抽象，很难理解颜色矩阵和结果R直接的关系，我们假设颜色矩阵值如下所示：


那么结果为：
R’ = R;
G’ = G;
B’ = B;
A’ = A;
也就是说，新的颜色值跟原先的一样！再看一个例子，颜色矩阵取值为：


结果为：
R’ = R + 100;
G’ = G + 100;
B’ = B;
A’ = A;
新的颜色值中，红色通道值和绿色通道值分别增加了100，此时图片会泛黄(因为R + G = Yellow)。

从上面的几个例子我们很容易就能明白颜色矩阵中的每个分量(每一列)的意义：
第一行决定红色，
第二行决定绿色，
第三行决定蓝色，
第四行决定了透明度，
第五列是颜色的偏移量。
至此我们应该能理解如何通过颜色矩阵来改变颜色值的各个分量了。

下面是用于Android的一段代码，用于将图片处理成泛黄的效果：

[java] view plain copy
 print?
  1. public static Bitmap testBitmap(Bitmap bitmap){  
  2.        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),  
  3.                bitmap.getHeight(), Config.RGB_565);  
  4.   
  5.        Canvas canvas = new Canvas(output);  
  6.   
  7.        Paint paint = new Paint();          
  8.        ColorMatrix cm = new ColorMatrix();  
  9.        float[] array = {1,0,0,0,100,  
  10.                0,1,0,0,100,  
  11.                0,0,1,0,0,  
  12.                0,0,0,1,0};  
  13.        cm.set(array);  
  14.        paint.setColorFilter(new ColorMatrixColorFilter(cm));  
  15.   
  16.        canvas.drawBitmap(bitmap, 0, 0, paint);  
  17.        return output;  
  18.    }  
3 坐标变换矩阵
对图片的操作除了颜色值的处理外，最常用的就是空间坐标的变换了，常见的效果有平移、旋转、拉伸等，这其实也是通过一个矩阵来完成的。坐标变换矩阵是一个3*3的矩阵，通过与一个类似(X,Y,1)的坐标值的矩阵乘法运算，能够将这个坐标值转换成一个新的坐标值，计算过程如下：

结果为：
x’=a*x+b*y+c
y’=d*x+e*y+f
同颜色矩阵一样，如果坐标变换矩阵如下，则新的坐标值X、Y增加50，也就是说图片的每一点都平移了(50,50)的距离，即图片整体平移到了(50,50)坐标处。


如果坐标变换矩阵如下，则所有的X、Y坐标都增大两倍，也就是说图片被放大了两倍，其他缩放效果原理类似。


更复杂一点的还有旋转效果，一个旋转变换矩阵如下：

结果为x’ = xcosθ – ysinθ 与 y’ = xsinθ + ycosθ，这个结果的效果是绕原点逆时针旋转θ度角。

下面是用于Android的一段示例代码，用于将图片平移，也就是裁剪的效果，其他效果可以参照对应坐标变换矩阵修改即可：

[java] view plain copy
 print?
  1. public static Bitmap test1Bitmap(Bitmap bitmap){  
  2.        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),  
  3.                bitmap.getHeight(), Config.RGB_565);  
  4.   
  5.        Canvas canvas = new Canvas(output);  
  6.   
  7.        Paint paint = new Paint();          
  8.        Matrix cm = new Matrix();  
  9.   
  10.        float[] array = {1,0,50,  
  11.                0,1,50,  
  12.                0,0,1};  
  13.        cm.setValues(array);  
  14.        canvas.drawBitmap(bitmap, cm, paint);  
  15.        return output;  
  16.    }  

下面将介绍几种常用的变换矩阵：
1.旋转


绕原点逆时针旋转θ度角的变换公式是 x' = xcosθ − ysinθ 与 y' = xsinθ + ycosθ
2. 缩放

变换后长宽分别放大x'=scale*x;y'=scale*y.
3.切变

4.反射

5.正投影

        Android的图像矩阵绝对不止这些，这是一个很复杂的知识，涉及到大学相关数学的课程，能了解大学线性代数里的矩阵知识，对学习Android下的图像矩阵有很好的帮助，在这里限于篇幅，我只做了简单的基础讲解，基本可以理解，可以使用即可，如果想深入学习一下的话，请查看下方的资料链接，去下载我今天上传到CSDN资源库里面的资料。


Android图像矩阵基础与详解资料

源码请在这里下载

0 0
socket编程语言 socket编程语言
原创粉丝点击
热门IT博客
宜家家装设计软件宜家家装设计软件
淘宝 正义哥淘宝 正义哥
淘宝直播怎么入驻
遗传算法与svm
mac windows 无法启动
vscode c 智能提示
游族网络最新消息
天刀男捏脸数据下载
数据库中修改语句
软件需求 功能需求
linux shell root
kmeans聚类算法数据集
凯驰吸尘器 知乎
编发软件
手机怎样修改淘宝密码
云南管家婆软件总代理
淘宝联盟旧版本5.2
知乎 好奇心诊所
一直打电话的软件
淘宝上最贵的东西
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 匀称读音 匀称的近义词 匀称的意思是什么 呼吸均匀还是匀称 匀质保温板厂家 水泥基匀质板 匀质改性防火保温板 轻匀质防火保温板 匀速 匀速直线运动 匀速圆周运动 匀速圆周运动公式 匀速直线运动图像 匀速直线运动公式 匀速直线运动的特点 匀速圆周运动的条件 匀速运动的图像 匀速运动的公式 匀速圆周运动公式大全 匀速圆周运动绳杆模型 匀速圆周运动是匀变速运动吗 匀速圆周运动是什么运动 匀速直线运动位移公式 匀速直线运动所有公式 匀速圆周运动周期公式 什么叫匀速直线运动 什么是匀速直线运动 匀速直线运动的定义 匀速奔跑阅读答案 科目二车速控制匀速技巧 匀酒全系列价格 匀酒价格表和图片 匀酒 友酒 方包 买包 洗包 多包 穿成福气包小闺女 福气包小闺女 我太难表情包

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里