View 添加毛玻璃效果

第一种方法:

UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect]; effectView.alpha = 0.9;
effectView.frame = CGRectMake(0, 0, bgImageView.frame.size.width, bgImageView.frame.size.height);
[bgImageView addSubview:effectView];

第二种方法:

UIToolbar *toolbar = [[UIToolbaralloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
toolbar.barStyle = UIBarStyleDefault;
[_backImg addSubview:toolbar];

 

在图像处理中实现毛玻璃效果(又称高斯模糊或背景虚化效果)通常涉及对图像进行模糊处理,使其看起来更加柔和,从而突出前景内容。实现毛玻璃效果的方法因平台而异,但核心思想是相似的:通过模糊算法对图像进行处理。以下将分别介绍在 **Flutter** 和 **Android** 平台上实现毛玻璃效果的代码示例。 ### Flutter 实现毛玻璃效果 在 Flutter 中,可以通过 `CustomPaint` 和 `ImageFilter` 来实现毛玻璃效果。`ImageFilter.blur` 方法可以创建一个模糊滤镜,并将其应用于绘制的图像上。 ```dart import 'dart:ui' as ui; import 'package:flutter/material.dart'; class FrostedGlassEffect extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SizedBox( width: 300, height: 300, child: CustomPaint( painter: FrostedGlassPainter(), ), ), ), ); } } class FrostedGlassPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final rect = Offset.zero & size; // 创建模糊图像滤镜 final imageFilter = ui.ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0); // 创建画笔并应用滤镜 final paint = Paint()..imageFilter = imageFilter; // 绘制一个矩形并应用模糊效果 canvas.drawRect(rect, paint..color = Colors.grey.withOpacity(0.5)); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } } ``` 上述代码使用 `ImageFilter.blur` 创建了一个模糊效果,并将其应用到一个灰色矩形上,从而模拟毛玻璃效果[^1]。 ### Android 实现毛玻璃效果 在 Android 中,可以通过自定义 `View` 或使用系统提供的类来实现毛玻璃效果。以下是一个使用 `RenderScript` 实现高斯模糊的示例: ```java import android.content.Context; import android.graphics.Bitmap; import android.renderscript.Allocation; import android.renderscript.Element; import android.renderscript.RenderScript; import android.renderscript.ScriptIntrinsicBlur; public class BlurBuilder { private static final float BITMAP_SCALE = 0.4f; public static Bitmap blur(Context context, Bitmap image) { return blur(context, image, 25); } public static Bitmap blur(Context context, Bitmap image, int radius) { if (radius < 1) { radius = 1; } Bitmap bitmap = Bitmap.createScaledBitmap(image, (int) (image.getWidth() * BITMAP_SCALE), (int) (image.getHeight() * BITMAP_SCALE), false); Bitmap outputBitmap = Bitmap.createBitmap(bitmap); RenderScript rs = RenderScript.create(context); ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); Allocation tmpIn = Allocation.createFromBitmap(rs, bitmap); Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap); blurScript.setRadius(radius); blurScript.setInput(tmpIn); blurScript.forEach(tmpOut); tmpOut.copyTo(outputBitmap); rs.destroy(); return outputBitmap; } } ``` 使用该类时,只需传入上下文和原始图像即可获得模糊后的图像。你可以在 `ImageView` 中显示模糊后的图像以实现毛玻璃背景效果[^2]。 此外,如果使用 `DynamicBlurView`(如引用中提到的),可以直接在布局文件中声明并使用: ```xml <com.example.testapplication.DynamicBlurView android:id="@+id/imageView4" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` ### 总结 - Flutter 中使用 `CustomPaint` 和 `ImageFilter.blur` 实现毛玻璃效果- Android 中可通过 `RenderScript` 和 `ScriptIntrinsicBlur` 实现高斯模糊。 - 可通过自定义控件(如 `DynamicBlurView`)简化实现过程。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值