圆形UIVisualEffectView

Question

圆形UIVisualEffectView

17

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

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问题）：

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

但是在这种情况下，visualEffectView 是圆形的，但是没有模糊效果 :/。有什么方法可以让它正常工作吗？

另外：我尝试过使用FXBlurView，但它的工作速度非常慢，我不能接受我的应用程序在iPhone 5上加载地图和模糊效果需要 ~1分钟。

- Nat

6个回答

8

如果有人想知道如何做到这一点，我已经弄清楚了，不需要编写代码：

创建一个视图，在属性编辑器中将其背景设置为“Clear Color”（必须是透明的颜色而不是默认的颜色）。
将另一个视图拖动到第一个视图上方，将其大小调整为所需的可视效果视图大小，并在属性编辑器中将其背景设置为“Clear Color”，并勾选“Clip Subviews”。

还要在此视图上，转到标识检查器，在“用户定义的运行时属性”下添加一个名为“layer.cornerRadius”的新键路径，将其类型设置为“Number”，并将其值设置为大于或等于9的合适圆角值。（Xcode中存在一个错误，会在您更改类型后将键路径更改回默认值，如果发生这种情况，请确保返回并重新输入layer.cornerRadius）。
将带模糊效果的可视效果视图拖到第3步中的视图上方。
现在运行程序。您将获得圆角、模糊和无伪影效果。

现在，我创建了我的链接使用segue，如果你需要这个与segue一起工作，你的segue必须设置为Modal，演示必须设置为OVER Full Screen（不仅仅是Full Screen）。

这里是一个演示它的项目文件链接。请注意第二个视图控制器中视图的层次结构：Dropbox上的项目文件编辑：我的图片消失了，所以我重新添加了它。

- SN81

1

这对我很有帮助，尽管现在（或者至少在我的情况下）只需将 Clip to Bounds 应用于 Visual Effect View 本身并设置 layer.cornerRadius 即可。 - Oded

@Oded的回答帮了我很多。只需为包含UIVisualEffectView的视图添加cornerRadius并设置clipsToBounds = true即可。不需要添加任何东西来模糊视图，只需处理它所包含的视图即可。 - Koder 228

5

自原问题提出以来，显然已经发生了变化，但我只需选择“剪切到边界”并在“用户自定义运行时属性”中设置“layer.cornerRadius”即可在视觉效果视图本身上实现此目的。

- Oded

没错。在其他答案下面的评论中已经说过，现在只需设置“cornerRadius”就可以正常工作了。另一部分是特定于Interface Builder的，因此仅适用于使用该工具的人。我会接受这个答案——时间已经改变，现在像这个答案一样容易，所以人们不需要再去搜索它。 - Nat

0

绘制圆形时，CornerRadius必须等于宽度的一半。例如，在您的示例中，宽度=30，则CornerRadius = 30/2 = 15;

- Obadah Shatnawi

那只是一个关于SOF需求的例子，与问题无关。无论如何，很高兴你注意到了，已经更新了问题。 - Nat

0

这对我有效

@IBOutlet weak var blurView: UIVisualEffectView!

在viewDidLoad()中

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

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

- Arjun

-2

好吧，就像在普通的 UIView 上一样，有可能应用圆角。但是 UIVisualEffectView 的效果不好，因为圆形附近的“边缘”处的区域没有正确地模糊化。由于它看起来很不自然和丑陋，我建议不要对 UIVisualEffectView 进行圆角处理。

- Nat

你可能想查看这篇关于如何让边缘更美观的相关博客文章：https://medium.com/@imho_ios/avoid-artifacts-on-uiblureffect-edges-c30e737c21fb#.sz26mo1sv - Jay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- croX · Accepted Answer

试用：

self.visualEffectView.clipsToBounds = YES;

在设置圆角后，将此代码放置在下面即可。您可以省略贝塞尔路径内容。希望这可以帮到您 :)

编辑:

我刚刚在自己的项目中尝试了类似的东西。一个保持模糊和圆角的简单方法是将视觉效果视图作为具有相同框架的新视图的子视图。现在，只需设置此新父UIView对象的角半径并将其clipsToBounds属性设置为YES即可。它会自动将其子视图裁剪为边界，并给出了圆角。

试试看，这在我的情况下有效。