android 图片倒影效果

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader;
import android.view.View;

public class InvertedImageView extends View {
private Paint mPaint;
private Bitmap mSrcBitmap,mRefBitmap;
private PorterDuffXfermode mXfermode;
private Context mContext;
public InvertedImageView(Context context) {
super(context);
mContext = context;
initRes();
}
private void initRes()
{
mSrcBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.gril);
Matrix matrix= new Matrix();
matrix.setScale(1F, -1F);
mRefBitmap = Bitmap.createBitmap(mSrcBitmap, 0, 0, mSrcBitmap.getWidth(), mSrcBitmap.getHeight(), matrix, true);
mPaint = new Paint();
///< 倒影的渐变遮盖
mPaint.setShader(new LinearGradient(0, mSrcBitmap.getHeight(), 0, mSrcBitmap.getHeight() +mSrcBitmap.getHeight(), 0XDD000000,
0X10000000, Shader.TileMode.CLAMP));
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLACK);
canvas.drawBitmap(mSrcBitmap, 0, 0, null);
///< 倒影图片向下偏移图片的高度
canvas.drawBitmap(mRefBitmap, 0, mSrcBitmap.getHeight(), null);
///< 设置
mPaint.setXfermode(mXfermode);
///< 绘制渐变效果矩形
canvas.drawRect(0, mSrcBitmap.getHeight(), mSrcBitmap.getWidth(), mSrcBitmap.getHeight() * 2, mPaint);
mPaint.setXfermode(null);
}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现图片倒影效果,可以使用CSS中的 transform 和 gradient 属性。 首先,在 HTML 中添加一个包含图片的容器,例如: ```html <div class="image-container"> <img src="your-image-url" alt="your-image"> </div> ``` 然后,在 CSS 中设置容器的样式,包括宽度、高度、相对定位和背景颜色: ```css .image-container { position: relative; width: 300px; height: 300px; background-color: #f2f2f2; } ``` 接着,使用伪元素 `::before` 创建一个半透明的黑色遮罩层,并通过 transform 属性将其翻转: ```css .image-container::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); transform: scaleY(-1); transform-origin: bottom; } ``` 这里使用了渐变色来实现遮罩层的透明度渐变,从上到下逐渐变为全透明。同时,通过 transform: scaleY(-1) 和 transform-origin: bottom 来将遮罩层垂直翻转,并以底部为轴心进行翻转。 最后,将图片相对于容器进行绝对定位,并设置 z-index 属性使其在遮罩层之上: ```css .image-container img { position: absolute; top: 0; left: 0; z-index: 1; } ``` 完成以上步骤后,就可以实现图片倒影效果了。完整代码如下: ```html <div class="image-container"> <img src="your-image-url" alt="your-image"> </div> ``` ```css .image-container { position: relative; width: 300px; height: 300px; background-color: #f2f2f2; } .image-container::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); transform: scaleY(-1); transform-origin: bottom; } .image-container img { position: absolute; top: 0; left: 0; z-index: 1; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值