Cocoa Different text color in the same letter

What i need is a bit difficult to explain. Let's try...

I need to write a text in my app, and that text will gradually change color from left to right. I think i could say it's a simi开发者_如何学JAVAlar effect to what you see in a karaoke screen.

For instance. I draw a text line, in blue color, and gradually, using a timer, the color from left to right changes to red. But i don't want it to change letter by letter, but gradually. That would require that at some moment, the same letter can have a part in red and a part in blue.

I've been reading about core drawing, and maybe it's the solution, but i really don't know how to start. I was thinking about using a background layer and in top of it draw a transparent text (only with border), but i am not very sure how to do it.

any ideas would be appreciated.

You can probably do the job with a CGLayer.

Best of all you should be able to use your existing code to draw the characters (or anything else) in to the CGLayer.

Here's some rough code:

// first, make a CGLayer...

CGLayerRef yourDrawingPad = 
    CGLayerCreateWithContext(UIGraphicsGetCurrentContext(),etc..
CGContextRef yourRef = CGLayerGetContext(yourDrawingPad);

// now, draw to yourRef .. draw your various typography (or anything)
// use your current drawing code.

// all done drawing, now make an image mask...

UIGraphicsBeginImageContext(CGLayerGetSize(yourDrawingPad));
  CGContextRef temp = UIGraphicsGetCurrentContext();
  CGContextDrawLayerAtPoint(temp, CGPointZero, yourDrawingPad);
  CGImageRef anAlphaMask = CGBitmapContextCreateImage(temp);
UIGraphicsEndImageContext();

You now have a nice mask you can use:

CGContextSaveGState(UIGraphicsGetCurrentContext()) ...
CGContextClipToMask(UIGraphicsGetCurrentContext(), self.frame, anAlphaMask);

So just mask it in to an image of a gradient, or whatever works.

(Conceivably: perhaps you will have to construct a bitmap image offscreen, and then use that as the mask?)

Footnote: Don't forget it is very likely you will have to paint upside down! Fortunately that is simple to deal with. Where it says "now, draw to yourRef" before drawing save your state and add the two lines of code:

CGContextTranslateCTM(refForMask, 0, self.frame.size.height);
CGContextScaleCTM(refForMask, 1.0, -1.0);

Hope it helps

I have an idea of how this could be done, but it is kind of complex. You could create an NSBezierPath and add the glyphs for each character. Then, set that as the clip and draw a NSGradient. Then you would just have to change the offset of the colors in the NSGradient to move the color along.