android 图片 效果代码,Android 轻松实现图片倒影效果实例代码

package com.mj.myweather.utils;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.LinearGradient;

import android.graphics.Matrix;

import android.graphics.Paint;

import android.graphics.PixelFormat;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.graphics.RectF;

import android.graphics.Bitmap.Config;

import android.graphics.PorterDuff.Mode;

import android.graphics.Shader.TileMode;

import android.graphics.drawable.Drawable;

public class ImageUtil {

/**

* 放大缩小图片

* @param bitmap

* @param w

* @param h

* @return

*/

public static Bitmap zoomBitmap(Bitmap bitmap, int w, int h) {

int width = bitmap.getWidth();

int height = bitmap.getHeight();

Matrix matrix = new Matrix();

float scaleWidht = ((float) w / width);

float scaleHeight = ((float) h / height);

matrix.postScale(scaleWidht, scaleHeight);

Bitmap newbmp = Bitmap.createBitmap(bitmap, 0, 0, width, height,

matrix, true);

return newbmp;

}

/**

* 将Drawable转化为Bitmap

* @param drawable

* @return

*/

public static Bitmap drawableToBitmap(Drawable drawable) {

int width = drawable.getIntrinsicWidth();

int height = drawable.getIntrinsicHeight();

Bitmap bitmap = Bitmap.createBitmap(width, height, drawable

.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888

: Bitmap.Config.RGB_565);

Canvas canvas = new Canvas(bitmap);

drawable.setBounds(0, 0, width, height);

drawable.draw(canvas);

return bitmap;

}

/*

* 获得圆角图片的方法

*/

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, float roundPx) {

Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),

bitmap.getHeight(), Config.ARGB_8888);

Canvas canvas = new Canvas(output);

final int color = 0xff424242;

final Paint paint = new Paint();

final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

final RectF rectF = new RectF(rect);

paint.setAntiAlias(true);

canvas.drawARGB(0, 0, 0, 0);

paint.setColor(color);

canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

canvas.drawBitmap(bitmap, rect, rect, paint);

return output;

}

/**

* 获得带倒影的图片方法

* @param originalImage

* @return

*/

public static Bitmap createReflectionImageWithOrigin(Bitmap originalImage) {

final int reflectionGap = 4;

int width = originalImage.getWidth();

int height = originalImage.getHeight();

Matrix matrix = new Matrix();

// 图片矩阵变换(从低部向顶部的倒影)// 实现图片翻转90度

matrix.preScale(1, -1);

// 创建反转后的图片Bitmap对象,图片高是原图的一半

Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0, height / 2,

width, height / 2, matrix, false);

// 创建标准的Bitmap对象,宽和原图一致,高是原图的1.5倍

Bitmap bitmapWithReflection = Bitmap.createBitmap(width,

(height + height / 2), Config.ARGB_8888);

// 创建画布对象,将原图画于画布,起点是原点位置

Canvas canvas = new Canvas(bitmapWithReflection);

canvas.drawBitmap(originalImage, 0, 0, null);

// 将反转后的图片画到画布中

Paint deafalutPaint = new Paint();

canvas.drawRect(0, height, width, height + reflectionGap, deafalutPaint);

canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);

Paint paint = new Paint();

// 创建线性渐变LinearGradient对象

LinearGradient shader = new LinearGradient(0, originalImage.getHeight(), 0,

bitmapWithReflection.getHeight() + reflectionGap, 0x70ffffff,

0x00ffffff, TileMode.CLAMP);

paint.setShader(shader);

// Set the Transfer mode to be porter duff and destination in

paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));

// Draw a rectangle using the paint with our linear gradient

// 画布画出反转图片大小区域,然后把渐变效果加到其中,就出现了图片的倒影效果

canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()

+ reflectionGap, paint);

return bitmapWithReflection;

}

}

  • 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、付费专栏及课程。

余额充值