8

I'm trying to subclass (because thats probably the easiest way to do it) UILabel so it's text color is negative to the part of the background image it overlays. I also have an approximate idea how to do that, but cannot transform it into code.

Figure 1

Parameters to pass the subclass

  • Background image
  • Position of the UILabel within the background image (probably CGRect as it needs to know the x, y, w, h of the background image the UILabel will cover) - this could also be just the UILabel's rect, as the UILabel will be the subview of an UIImageView containing the background image.

Logic while drawing the label

  1. Create a mask with the text - the content of the mask would only be the text itself, not the background.
  2. Crop out the specific part (rect) of the Background image which is overlaid by the label.
  3. Delete (or make transparent) all of the image outside the text mask -> that way you would only be left with the image where the text is, the rest would be gone.
  4. Invert the image's colors (with this method probably) or use kCGBlendModeDifference in some way perhaps?
  5. Draw all that in one of the methods UILabel's drawRect or drawTextInRect methods.

Usage

The usage of this would probably be something like

  1. Alloc an UIImage
  2. Display it in an UIImageView
  3. Create the UILabel subclass with the inverted text color relative to the part of the image the UILabel will be placed in
  4. Add the UILabel as a subview of the UIImageView

Issues this might have

I can't approximate how quick this will be while scrolling, however this could be solved by drawing the text right into the UIImage, as it will be static. If the UIImageView holding the label would be put into a UIScrollView, would it be redrawn upon every scroll?

Thank you a lot in advance!

Community
  • 1
  • 1
Martin Herman
  • 888
  • 13
  • 34
  • I dunno if `UILabel` is the way to go on this. You'll probably do better to copy the section of the original image within the bounds of where the text would go (a rectangular area), apply filters as you please (sounds like you want to invert the image) then create draw a mask with the visible area being the text. Check out this link for info on creating an alpha mask from text: http://tinyurl.com/m3ufrvo – James Sep 23 '13 at 02:37

1 Answers1

0

Check out the answer for my question: drawRect drawing 'transparent' text?

There's a number of answer including a great open-source project you can use from Robin Senior.

Enjoy!

Community
  • 1
  • 1
runmad
  • 14,846
  • 9
  • 99
  • 140
  • I've already seen that answer - however, it doesn't really help me further. I don't know how to use the text mask created there to mask the image as I want it - at a specific CGPoint + so the area outside the text will be transparent/deleted (probably invert the mask?) – Martin Herman Sep 24 '13 at 16:15