圆形 UIVisualEffectView

Round UIVisualEffectView

我有一张地图。在地图上,我想画一个模糊的小圆圈。我已经实现了这样的东西:

UIVisualEffect *visualEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
self.visualEffectView = [[UIVisualEffectView alloc] initWithEffect:visualEffect];
[self addSubview:self.visualEffectView];

然后在 layoutSubviews:

[self.visualEffectView setFrame:CGRectMake(0.f, 0.f, 20.f, 20.f];

现在的问题是如何使这个视图变圆。我试过:

[self.visualEffectView.layer setCornerRadius:10.f];

然而什么也没有发生。另一个尝试是(基于 SOF question):

CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = [UIBezierPath bezierPathWithOvalInRect:self.visualEffectView.bounds].CGPath;
self.visualEffectView.layer.mask = mask;

但在这种情况下,visualEffectView 是圆的但不模糊 :/。有什么办法让它工作吗?

顺便说一句:我已经尝试过 FXBlurView,但是它的运行速度非常慢,我不能接受我的应用程序在 iPhone 上仅加载地图 + 模糊约 1 分钟 5.

试用:

self.visualEffectView.clipsToBounds = YES;

在设置cornerRadius之后放这个。应该是这样。您可以省略 BezierPath 内容。希望这有帮助:)

编辑:

我刚刚在自己的项目中尝试了类似的东西。保持圆角模糊的一个好方法就是将视觉效果视图作为与视觉效果视图具有相同框架的新视图的子视图。您现在只需设置这个新父对象 UIView 的角半径并将其 clipsToBounds 属性 设置为 YES。然后它会自动为其子视图提供角半径,因为它会裁剪到它的边界。

试一试,我的情况很有效。

嗯,所以可以像在普通 UIView 上一样应用圆角。但是 UIVisualEffectView 看起来不太好,因为圆的弯曲 'sides' 附近的区域没有正确模糊。因为它看起来有缺陷且丑陋,所以我不建议四舍五入 UIVisualEffectView

如果有人想知道怎么做,我已经弄明白了,不需要代码:

  1. 创建一个视图并在属性编辑器中将其背景设置为 "Clear Color"(必须是清晰的颜色,而不是默认颜色。

  2. 将另一个视图拖到第一个视图之上,将其调整为您希望视觉效果视图的大小,并在属性编辑器中将其背景设置为 "Clear Color",然后检查 "Clip Subviews"。

    同样在此视图中,转到身份检查器并在 "User Defined Runtime Attributes" 下添加一个名为 "layer.cornerRadius" 的新密钥路径,将其键入 "Number",并将其值设置为 9 或更高以获得体面的圆角边缘。 (Xcode 中有一个错误,一旦您更改类型,它会将密钥路径更改回默认值,如果发生这种情况,请务必返回并重新输入 layer.cornerRadius)。

  3. 将带有模糊效果的视觉效果视图拖到步骤 3 中的视图顶部。

  4. 现在 运行 您的程序。您将拥有圆润的边缘、模糊且没有伪影。

现在,我使用 segue 创建了我的 links,如果你需要它与 segue 一起工作,你的 segue 必须设置为 Modal,并且演示文稿必须设置为 OVER Full Screen (不仅仅是全屏)。

这里有一个 link 项目文件来演示它。注意第二个视图控制器中视图的层次结构:Project File on Dropbox

编辑:我的照片不见了所以我重新添加了它。

要画圆角半径必须相等width/2 在你的例子中 width = 30 那么 CornerRadius = 30/2 = 15;

自最初的问题以来,情况显然发生了变化,但我只需在视觉效果视图本身的 "User Defined Runtime Attributes" 中选择 "Clip to Bounds" 并设置 "layer.cornerRadius" 即可实现。

这对我有用

@IBOutlet weak var blurView: UIVisualEffectView!

并且在 viewDidLoad()

blurView.layer.cornerRadius = 10;
blurView.clipsToBounds  =  true

您可以根据自己的喜好更改转角半径。