2015-03-01 13 views
11

Ich habe eine Karte. Auf der Karte möchte ich einen kleinen unscharfen Kreis zeichnen. Ich habe so etwas wie dies umgesetzt:Runde UIVisualEffectView

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

und dann in layoutSubviews:

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

Jetzt ist das Problem dieser Ansicht Runde macht. Ich habe es versucht:

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

Nichts passiert jedoch. Ein weiterer Versuch wurde mit (gründend auf SOF question):

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

Aber in diesem Fall ist die visualEffectView ist rund, aber nicht verwischen: /. Gibt es eine Möglichkeit, es zum Laufen zu bringen?

BTW: Ich habe FXBlurView versucht, aber es funktioniert sehr langsam, ich kann nicht meine app akzeptiere nur Karte + blur für ~ 1 Minute auf dem iPhone 5.en

Antwort

-1

Nun, so gibt es eine Möglichkeit, abgerundete Ecken wie auf normalen UIView anzuwenden. Die UIVisualEffectView wird jedoch nicht gut aussehen, weil der Bereich in der Nähe der gekrümmten "Seiten" des Kreises nicht richtig unscharf ist. Weil es buggy und hässlich aussieht, ich disadvise zu Runde UIVisualEffectView.

+0

Vielleicht möchten Sie diesen Blog-Beitrag lesen, um Kanten besser aussehen zu lassen: https://medium.com/@imho_ios/avoid-artifacts-on-uiblureffect-edges-c30e737c21fb#.sz26mo1sv – Jay

24

Tryout zu laden:

self.visualEffectView.clipsToBounds = YES; 

Setzen Sie dies, nachdem Sie den cornerRadius festgelegt haben. Das sollte es sein. Du kannst das BezierPath-Zeug weglassen. Hoffe, das hilft :)

EDIT:

Ich habe gerade versucht, etwas Ähnliches in meinem eigenen Projekt. Und eine gute Möglichkeit, die Unschärfe mit runden Ecken zu erhalten, besteht einfach darin, die visuelle Effektansicht als Kind einer neuen Ansicht mit demselben Rahmen wie Ihre visuelle Effektansicht darzustellen. Sie können jetzt einfach den Eckenradius dieses neuen übergeordneten Objekts UIView festlegen und seine clipsToBounds-Eigenschaft auf YES setzen. Es gibt dann automatisch seinen Unteransichten den Eckenradius, wenn es an seine Grenzen klammert.

Probieren Sie es aus, es funktioniert in meinem Fall.

+2

Bereits versucht dies, gibt das gleiche Ergebnis als Einstellmaske - es gibt keine Unschärfe. – Vive

+0

Aber dein Blick ist rund? Nur die Unschärfe fehlt? – croX

+0

Ja. In diesem Fall ist die Ansicht rund, aber Unschärfe fehlt. Wenn ichClipsToBounds: NO setze, ist die Ansicht nicht rund, aber ich kann Unschärfe sehen. – Vive

6

ich dies herausgefunden, wenn jemand wissen will, wie es zu tun, kein Code benötigt:

  1. eine Ansicht erstellen und setzen Sie den Hintergrund zu „Clear Color“ im Editor Attribut (es muss klar sein,

  2. Ziehen Sie eine andere Ansicht über die erste Ansicht, legen Sie sie auf die Größe Ihrer visuellen Effektansicht fest, und legen Sie im Attributeditor den Hintergrund auf "Clear Color" fest, und aktivieren Sie " Clip Subviews ".

    Auch auf dieser Ansicht, gehen Sie Fügen Sie im Identity Inspector unter "User Defined Runtime Attributes" einen neuen Key Path mit dem Namen "layer.cornerRadius" hinzu, geben Sie "Number" ein und setzen Sie den Wert auf 9 oder höher für eine dezente abgerundete Kante. (Es gibt einen Fehler in Xcode, der den Schlüsselpfad wieder in den Standardzustand zurückversetzt, sobald Sie den Typ ändern. Falls dies passiert, gehen Sie einfach zurück und geben Sie in layer.cornerRadius erneut ein).

  3. Ziehen Sie ein Visuellen Effekte anzeigen mit Unschärfe auf dem Blick in Schritt 3

  4. Jetzt Ihr Programm ausführen. Sie werden abgerundete Kanten, Unschärfe und keine Artefakte haben.

Nun, habe ich mein wo es eine segue Links verwenden, wenn Sie diese brauchen, um mit einem Übergang zu arbeiten, um Ihre segue zu Modal werden muss eingestellt und die Präsentation muss eingestellt werden, um über den vollen Bildschirm (nicht nur Vollbild).

Hier ist ein Link zu einer Projektdatei, die es veranschaulicht. Beachten Sie die Hierarchie der Ansichten in der zweiten Ansicht Controller: Project File on Dropbox

EDIT: Mein Bild verschwand, so dass ich es neu eingab. Example

0

Um den Kreis zu zeichnen muss der CornerRadius gleich breit sein/2 in Ihrem Beispiel Breite = 30 dann der CornerRadius = 30/2 = 15;

+0

Das war nur ein Beispiel für SOF-Anforderungen und haben nichts mit der Frage zu tun. Wie auch immer, du hast bemerkt, aktualisierte Frage. – Vive