Drawing a gradient on a path programmatically

Question

I have been trying to draw a gradient on a path similar to how it is done in the image below using either CALayers or CGContexts.

The path does not need to have a variable thickness or outline. It just needs the gradient on the path.

_{(source: sethtaylor.com)}

I have been using the solution in the following answer Draw gradient along a curved UIBezierPath when my line was near straight. Now the line curves back on itself like in the image above and needs the stroke to be drawn along the path programmatically.

I am not quite sure where to start looking for this. What would you try?

There is no built in support for this. It will be a lot of work. — David Rönnqvist, Apr 28 '15 at 17:40
I'm thinking one could trace the path one pixel at a time and draw a circle, interpolating manually between the colors. — nevyn, Apr 28 '15 at 17:47
Another possible approach would be to approximate the curve as arcs ([something like this](http://itc.ktu.lt/itc354/Riskus354.pdf)) and drawing an angular gradient for each arc. I think it could work. I haven't tested it though. — David Rönnqvist, Apr 28 '15 at 17:50

score 0 · Answer 1 · edited May 23 '17 at 12:18

0

@saniul on Twitter pointed out to Gradient Polyline with MapKit ios, which has the code for stepping through a path and drawing each segment differently. Should have all the building blocks you need!

edited May 23 '17 at 12:18

Community

1
1

answered Apr 28 '15 at 17:58

nevyn

7,052
3
32
43

Looks promising, will have a go at this tomorrow! – Pruthvikar Apr 28 '15 at 18:12

Drawing a gradient on a path programmatically

1 Answers1