UIView mit Maske sodas der darunterliegende View Sichtbar wird

floxxy · 1. Juni 2011, 09:12

Hallo Forum,
Ich habe folgendes vor bzw. folgendes Problem:
In einer iPad-App ist der komplette Screen mit einem Bild gefüllt. Diese Bilder können ausgetauscht werden.
Jedes Bild hat einzelne wichtige Stellen auf welche ich hinweisen möchte (wie mit einem Scheinwerfer auf eine Bühne

).
Dazu habe ich mir vorgestellt eine leicht transparenten UIView / UIImageView über das Originale Bild zu legen und
über eine Maske einen Teil aus diesem darüberliegenden View auszuschneiden.
Im Anhang habe ich kurz einen Scrennshot gebastelt wie ich mir das ganze vorstelle.
Der Screenshot von Spiegel.de wäre hier mein Originalbild, das graue Overlay der transparente UIView / UIImageView und das ausgeschnittene Rechteck sollte die Maske sein.

Leider konnte ich keine Beispeile finden welche mir bei einer solchen Lösung helfen.
Kann mir jemand weiterhelfen wie ich das ganze angehen kann oder habe ich beim Googeln wichtige / richtige links übersehen?

Über Hilfe wäre ich sehr dankbar!

Beste Grüße

Thallius · 1. Juni 2011, 09:16

Wenn es nur um Rechtecke geht, dann mach doch einfach 4 Views um den Bereich herum den Du sichtbar haben willst. Ansonsten wirst Du Dich mit Coregraphics beschäftigen müssen denke ich.

Gruß

Claus

floxxy · 1. Juni 2011, 09:21

Das mit den vier Rechtecken würde funktionieren.
Jedoch würde ich gerne die Maske von "Hotspot" zu "Hotspot" animieren. Dann wird es schwer alle Rechtecke immer richtig zu Animieren.

Beim Googeln habe ich mich immer auf die Begriffe "UIView + mask" beschränkt. Ist das überhaupt die richtige begrifflichkeit?
Das mit der Maske kannte ich halt noch aus meinen TYPO3-Zeiten und Gifbuilder. Aber ist das hier auch die richtige begrifflichkeit?

ramo · 1. Juni 2011, 09:44

Probiere einmal mit einem "übergroßen PNG-Bild dass einen transparenten Bereich hat, vielleicht finde ich mein Beispiel dann poste ich es.

longW · 1. Juni 2011, 09:55

floxxy schrieb:

Hallo Forum,
Ich habe folgendes vor bzw. folgendes Problem:
In einer iPad-App ist der komplette Screen mit einem Bild gefüllt. Diese Bilder können ausgetauscht werden.
Jedes Bild hat einzelne wichtige Stellen auf welche ich hinweisen möchte (wie mit einem Scheinwerfer auf eine Bühne ).
Dazu habe ich mir vorgestellt eine leicht transparenten UIView / UIImageView über das Originale Bild zu legen und
über eine Maske einen Teil aus diesem darüberliegenden View auszuschneiden.
Im Anhang habe ich kurz einen Scrennshot gebastelt wie ich mir das ganze vorstelle.
Der Screenshot von Spiegel.de wäre hier mein Originalbild, das graue Overlay der transparente UIView / UIImageView und das ausgeschnittene Rechteck sollte die Maske sein.

Leider konnte ich keine Beispeile finden welche mir bei einer solchen Lösung helfen.
Kann mir jemand weiterhelfen wie ich das ganze angehen kann oder habe ich beim Googeln wichtige / richtige links übersehen?

Über Hilfe wäre ich sehr dankbar!

Beste Grüße

Du kannst auch mit einem UIBezierPath einen Bereich 'clippen', am besten mit einem CALayer.

Thallius · 1. Juni 2011, 09:55

Das geht aber auch nur wenn der Bereich nicht allzu sehr sich in der Größe ändert. Nimm mal an er müßte von einem Rechteck das fast bildschirmfüllend ist auf ein 10x10 Pixel großes runterskalieren. Da kannste jetzt man anfangen auszurechnen wie "Übergroß" das View sein müßte damit es noch das ganze Bild abdeckt

Also geht es höchstens anders herum. Du brauchst ein UIView mit einem PNG Bild mit einem ganz kleinen Rechteck in der Mitte. Dieses muss dann schon 4x so groß sein wie der Bildschirm. Das kann er dann verschieben und großskalieren wie er will. Ich weiß nur nicht wie groß man eigentlich skalieren kann mit CGAffineTRansformScale. Gibt es da eine Beschränkung oder wird es irgendwann so langsam das gar nichts mehr geht ?

Gruß

Claus

floxxy · 1. Juni 2011, 11:03

@longW kannst du mir das genauer Beschreiben? Leider verstehe ich nicht genau was du meinst.

@Thallius das mit dem Rechteck könnte Funktionieren...
Gerne würde ich es aber über eine Maske lösen. Aber für den Notfall ist das sicher ein guter Vorschlag

Edit: Eigentlich brauch ich sowas wie hier unter "Masking an Image by Clipping the Context" beschrieben. Nur eben mit zwei UIViews. Argh
developer.apple.com/library/io…TP30001066-CH212-CJBHDDBE

longW · 1. Juni 2011, 11:12

floxxy schrieb:

@longW kannst du mir das genauer Beschreiben? Leider verstehe ich nicht genau was du meinst.

@Thallius das mit dem Rechteck könnte Funktionieren...
Gerne würde ich es aber über eine Maske lösen. Aber für den Notfall ist das sicher ein guter Vorschlag

Eine Variante wäre:
CAShapeLayer.
Du müsstedt dann nur den Pfad bestimmen, etwa so:

Quellcode

UIBezierPath *path = [UIBezierPath bezierPath];
...// draw the shape
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = path.CGPath;
theView.layer.mask = maskLayer;

Quellcode

Tags