自定义控件-----ReflectionImage

本文介绍了一个名为ReflectionImage的Android控件,它可以在ImageView基础上实现带有倒影效果的图片显示。通过从某个网站上获取的实现思路,作者详细解释了如何在Canvas中重新绘制原始图片,并利用Matrix反转图片,最后通过创建渐变蒙板来实现透明处理。此控件通过构造函数和setImageResource方法实现了与普通Android控件相同的使用方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ReflectionImage是一个有倒影效果的图片.先来看看长什么样子的吧...

 

 

 

ReflectionImage是从android.widget.ImageView继承而来,使用方法和其他的Android控件一样

 

实现思路是从某个网站上剽窃过来的,因为很久了记不到网站了,这里就不贴了...搜一下吧

实现起来很简单,详细的解释写到注释里面,总体思路就是在Canvas里面重新把原始图片画一次,反转图片用Matrix来做,透明处理实际上是加了一层渐变的蒙板.

 

源码如下

 

  1. package com.myview;  
  2. import android.content.Context;  
  3. import android.graphics.Bitmap;  
  4. import android.graphics.BitmapFactory;  
  5. import android.graphics.Canvas;  
  6. import android.graphics.LinearGradient;  
  7. import android.graphics.Matrix;  
  8. import android.graphics.Paint;  
  9. import android.graphics.PorterDuffXfermode;  
  10. import android.graphics.Bitmap.Config;  
  11. import android.graphics.PorterDuff.Mode;  
  12. import android.graphics.Shader.TileMode;  
  13. import android.graphics.drawable.BitmapDrawable;  
  14. import android.util.AttributeSet;  
  15. import android.widget.ImageView;  
  16. public class ReflectionImage extends ImageView {  
  17.     //是否为Reflection模式  
  18.     private boolean mReflectionMode = true;  
  19.     public ReflectionImage(Context context) {  
  20.         super(context);  
  21.     }  
  22.     public ReflectionImage(Context context, AttributeSet attrs) {  
  23.         super(context, attrs);  
  24.         //取得原始图片的bitmap并重画  
  25.         Bitmap originalImage = ((BitmapDrawable)this.getDrawable()).getBitmap();  
  26.         DoReflection(originalImage);  
  27.     }  
  28.     public ReflectionImage(Context context, AttributeSet attrs,  
  29.             int defStyle) {  
  30.         super(context, attrs, defStyle);  
  31.         Bitmap originalImage = ((BitmapDrawable)this.getDrawable()).getBitmap();  
  32.         DoReflection(originalImage);  
  33.     }  
  34.     public void setReflectionMode(boolean isRef) {  
  35.         mReflectionMode = isRef;  
  36.     }  
  37.     public boolean getReflectionMode() {  
  38.         return mReflectionMode;  
  39.     }  
  40.     //偷懒了,只重写了setImageResource,和构造函数里面干了同样的事情  
  41.     @Override  
  42.     public void setImageResource(int resId) {  
  43.         Bitmap originalImage = BitmapFactory.decodeResource(  
  44.                 getResources(), resId);  
  45.         DoReflection(originalImage);  
  46.         //super.setImageResource(resId);  
  47.     }  
  48.     private void DoReflection(Bitmap originalImage) {  
  49.         final int reflectionGap = 4;                            //原始图片和反射图片中间的间距  
  50.         int width = originalImage.getWidth();  
  51.         int height = originalImage.getHeight();  
  52.           
  53.         //反转  
  54.         Matrix matrix = new Matrix();  
  55.         matrix.preScale(1, -1);  
  56.       //reflectionImage就是下面透明的那部分,可以设置它的高度为原始的3/4,这样效果会更好些  
  57.         Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,  
  58.                 0, width, height, matrix, false);  
  59.         //创建一个新的bitmap,高度为原来的两倍  
  60.         Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height + height), Config.ARGB_8888);  
  61.         Canvas canvasRef = new Canvas(bitmapWithReflection);  
  62.           
  63.         //先画原始的图片  
  64.         canvasRef.drawBitmap(originalImage, 00null);  
  65.         //画间距  
  66.         Paint deafaultPaint = new Paint();  
  67.         canvasRef.drawRect(0, height, width, height + reflectionGap, deafaultPaint);  
  68.           
  69.         //画被反转以后的图片  
  70.         canvasRef.drawBitmap(reflectionImage, 0, height + reflectionGap, null);  
  71.         // 创建一个渐变的蒙版放在下面被反转的图片上面  
  72.         Paint paint = new Paint();  
  73.         LinearGradient shader = new LinearGradient(0,  
  74.                 originalImage.getHeight(), 0, bitmapWithReflection.getHeight()  
  75.                         + reflectionGap, 0x80ffffff0x00ffffff, TileMode.CLAMP);  
  76.         // Set the paint to use this shader (linear gradient)  
  77.         paint.setShader(shader);  
  78.         // Set the Transfer mode to be porter duff and destination in  
  79.         paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));  
  80.         // Draw a rectangle using the paint with our linear gradient  
  81.         canvasRef.drawRect(0, height, width, bitmapWithReflection.getHeight()  
  82.                 + reflectionGap, paint);  
  83.       //调用ImageView中的setImageBitmap  
  84.         this.setImageBitmap(bitmapWithReflection);  
  85.     }  

### 图像处理中的倒影效果实现方法 在 Android 平台上实现图片的倒影效果,通常涉及以下几个核心步骤: #### 1. 创建双倍大小的目标画布 为了生成倒影效果,需要创建一个新的图像对象,其宽度保持不变,而高度则扩展为原始图像的高度的两倍。这可以通过 `Bitmap.createBitmap` 方法来完成。 ```java int width = originalImage.getWidth(); int height = originalImage.getHeight(); Bitmap resultImage = Bitmap.createBitmap(width, height * 2, originalImage.getConfig()); Canvas canvas = new Canvas(resultImage); ``` 上述代码片段展示了如何初始化目标画布并准备绘制操作[^1]。 --- #### 2. 绘制原图到目标画布上部区域 将原始图像放置于新画布的顶部位置,这是通过简单的绘图命令完成的。 ```java canvas.drawBitmap(originalImage, 0f, 0f, null); ``` 此代码负责将原始图像复制到最终结果的上半部分。 --- #### 3. 制作翻转版本作为倒影 利用矩阵变换技术可以轻松获得垂直反转后的图像副本。具体来说,就是构建一个具有负比例因子的 `Matrix` 对象,并应用它来进行转换。 ```java Matrix flipMatrix = new Matrix(); flipMatrix.preScale(1, -1); // 只需改变y轴方向即可得到上下颠倒的结果 Bitmap flippedImage = Bitmap.createBitmap(originalImage, 0, 0, width, height, flipMatrix, false); // 将翻转后的图像置于底部相应的位置 canvas.drawBitmap(flippedImage, 0f, (float)height, null); ``` 这里的关键在于调整 y 轴的比例系数至 `-1` 来达到镜像的目的[^2]。 --- #### 4. 添加透明渐变过渡层增强真实感 为了让倒影显得更加自然逼真,在实际开发过程中往往还会加入一条由浅入深逐渐消失的蒙版条带覆盖整个倒影区段之上。这种做法能够模拟光线透过水面散射的现象从而提升视觉体验质量。 ```java Paint paint = new Paint(); LinearGradient shader = new LinearGradient( 0, height, 0, height * 2, Color.TRANSPARENT, Color.argb(128, 0, 0, 0), Shader.TileMode.CLAMP ); paint.setShader(shader); canvas.drawRect(0, height, width, height * 2, paint); ``` 以上脚本定义了一个从完全透明过度到半透黑色(alpha=128)的线性梯度遮罩,并将其应用于倒影区域内以制造柔和消退的感觉。 --- #### 完整示例代码 以下是综合运用前述各环节所构成的一个完整的解决方案实例: ```java public static Bitmap createReflection(Bitmap originalImage){ int width = originalImage.getWidth(); int height = originalImage.getHeight(); // Create a bitmap twice the height of the source image. Bitmap resultImage = Bitmap.createBitmap(width, height*2, originalImage.getConfig()); Canvas canvas = new Canvas(resultImage); // Draw the original image at top part. canvas.drawBitmap(originalImage, 0f, 0f, null); // Flip matrix setup and draw reflected version below. Matrix flipMatrix = new Matrix(); flipMatrix.preScale(1,-1); Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0, 0, width, height, flipMatrix, false); canvas.drawBitmap(reflectionImage, 0f, (float)height, null); // Add gradient overlay to fade out reflection towards bottom edge. Paint paint = new Paint(); LinearGradient shader = new LinearGradient( 0, height, 0, height*2, Color.TRANSPARENT, Color.argb(128, 0, 0, 0), Shader.TileMode.CLAMP ); paint.setShader(shader); canvas.drawRect(0, height, width, height*2, paint); return resultImage; } ``` 这段程序封装成了单一函数形式以便调用者可以直接传入任意尺寸类型的位图参数获取对应的带有反射特效的新版本输出物^. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值