Question

I’m looking for some direction to help achieve a specific capability in my app.

It’s a little hard to explain, but here goes. Although I’m visualizing my goal using a multi-layer metaphor (a la Photoshop), this is just to explain my vision – I realize that may not be reasonable in practice.

I envision 3 “layers”

1. A bottom layer that contains an image
2. Another layer on top – say a 50% gray – but at reduced opacity so the original layer is still visible but de-emphasized.
3. Then two square objects on the top layer, each acting as a “window” through the gray layer, down to the original layer and so –
   through these windows, you get to see part of the original image at
   full opacity.

Finally, need to be able to drag each window around the screen with a finger, to independently reposition each one.

Extra credit would be if each window could be adjusted in size (not shape – still square) ideally using a finger gesture of some kind.

I’m not looking for code (although I wouldn’t object). I’m looking for an approach to doing this in Objective-C that ideally doesn’t require me digging into advanced topics such as some of the graphics frameworks.

Thanks!
Tony.

Answer 1

Here’s a rough outline of what I would try.

I would use 2 view (not layers). The bottom most view would be the image view.

The top view would be a custom view. This custom view would have two other views as subviews. These two subviews would represent the two “holes”. Setup both subviews with their own gesture recognizers to handle panning and zooming. Give both of the subviews (and the container view) a clear background and possibly a border. The main view of this custom view would need to have its drawRect: method implemented. The implementation would draw the partially transparent grey background. It would use the position and size of the two subviews to setup clipping regions before drawing the grey color.

Every time the 2 subviews are sized or moved you would need to call setNeedsDisplay on the container view so the drawRect: method is called to refresh the grey background with the holes.