2

I need to alter specific substrings in a UILabel, using a CIFilter. A simple example might look like this:

enter image description here

Is there a way to access and modify (i.e., use a CIFilter on) individual UILabel glyphs? Or will I need to simulate this effect by pasting together multiple one-or-more-glyph labels?

Clever answers are always appreciated.

Optimalist
  • 313
  • 2
  • 11
  • While it sounds like a major amount of effort is needed, maybe you could try to work with the answer to this question - https://stackoverflow.com/questions/11583581/how-to-keep-2-different-fonts-within-the-same-uitextfield-or-uitextview#11583805 - that uses `NSAttributedString` and `CoreText`, along with (and here's the major effort) creating a new font that *is* blurred. Then it's just a matter of changing the font where you need to. –  Nov 07 '17 at 15:50
  • Thanks, dfd. My current UILabel.attributedText property is set to an NSAttributedString. I'll have to read up on Core Text to see how I might exploit it. Regarding creating a (specifically) blurred font, unfortunately I can't do that. I need to be able to set and alter CIFilters and their properties at will. – Optimalist Nov 07 '17 at 16:58
  • You may be out of luck. Since the output of any `CIFilter` is a `CIImage`, turning that "image recipe" into text could be a major stumbling block. Do you have an example of any app that does this? Maybe in *that* context reverse-engineering could illuminate how it was accomplished. –  Nov 07 '17 at 17:07
  • Using a CIFilter on the UILabel.layer (CALayer) property to alter the whole label is easy. But somehow, I need to access and filter _individual_ glyphs. I don't need to turn the rendered, filtered, attributed text image back into text. (And I'm not sure why I'd want to.) The app I used to create the above sample image was Apple Keynote. I screen captured an animation mid-stream. I'm sure that this effect is doable, at some level. I'm just hoping that it won't require Cocoa Touch programming skills far greater than than mine! (I'm not a programmer by profession.) – Optimalist Nov 07 '17 at 19:01
  • Now you are talking way deeper than my skills. (It's only been since Swift in 2014 I really worked with UIKit or any flavor of Cocoa.) I agree, you *don't want to render anything. Detail *what* you did (used Keynote for what? captured how?) for the effect. Also, since you need to be able to *"... set and alter CIFilters at will..."* - detail some of this too. I've found in my nearly 35 years I can handle the technicals once I understand things I'm not grasping on the functional. Sure, you can parse something by text, change it, and re-insert it into the original text... but is it efficient? –  Nov 07 '17 at 20:00
  • If we competed for who knows the least, I'm sure I'd win hands down. :-) I only just really figured out delegation last week. That being said, I don't let a lack of knowledge get in my way. About Apple's Keynote presentation program, I placed two text boxes, one on top of the other, on a slide and animated one with a blur effect. Then I played it and did a few screen captures to catch the right amount of blur. About this problem, I am building something more complicated, but if I can get a UILabel, or perhaps single-character labels or glyph subviews, to work as in the picture, then I'm set. – Optimalist Nov 08 '17 at 00:14
  • We'd be about even. Programming since 1984, with a focus on Swift and UIKit since 2014 - and I just found out the reason to *use* delegation last week! About 18 months ago I dabbled a bit in glyphs and `UIFont` (including the major amount of data tables behind each font) and it sounds like your on the right track. The largest issue with "overlaying" something on top of a "base" label that I see is how most characters are not evenly spaced. Hope you figure it out. –  Nov 08 '17 at 01:14
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158509/discussion-between-optimalist-and-dfd). – Optimalist Nov 08 '17 at 12:39

1 Answers1

0

I provided an answer for similar UILabel CIFilter type processing here:

Make emoji symbols grayscale in UILabel

There they wanted the entire label greyscale, but you could substitute the CIFilter and use the Blur Filter to blur the entire label.

Depending on how your view is laid out, you may want to break out the text before the blurred area into a separate UILabel, then the blurred UILabel, and lastly the text after the blur in a UILabel. Put them all in a UIStackView and then apply the blur only to the center label?

That may be less than ideal though depending on what you are trying to do. So the alternative is to use the code in my other answer as a starting point and then do something like this:

  1. Find the x offset for where the character is that you want to start the blur.
  2. Do the same for the last character.
  3. When you apply the CIFilter, use a mask for just the region where you want the blur applied.

That is how I would chase this down, if the UIStackView approach doesn't work for you. I hope that helps.

Brian Trzupek
  • 4,982
  • 1
  • 16
  • 19