Line smoothing in Cocoa Touch

Question

How would I smooth a line (UIBeizerPath) or a set of points? Right now it draws it jagged. I read about spline interpolation, could anyone point me to an implementation of this in cocoa or C or give me an alternate line smoothing algorithm.

Answer 1

Quartz (which UIKit uses for drawing, and in many places makes you use directly for drawing) has anti-aliasing support built-in. Most contexts have it turned on already, so you should not have aliased (jagged) drawing unless you're turning anti-aliasing off. So, stop doing that. :-)

The contexts that don't have it turned on by default are mostly those where it isn't appropriate, such as PDF contexts and CGLayer contexts. The documentation implies that those contexts don't even support anti-aliasing, which makes some amount of sense.

CGContext provides a couple of functions for turning anti-aliasing on and off, but you should never need to call them except when you want aliasing, which you don't. You could try turning it on using those functions; if that works, then you should investigate why it was ever off in the first place.

Are you drawing the path from within a CALayer? That may be why it's off; there's an Info.plist key you have to turn on to get anti-aliasing turned on by default in such contexts.

Answer 2

I don't think you need to do Bezier paths with curves. You can keep drawing straight line segments but add more data points with interpolation. This is especially important because I'm assuming you want to smooth only on one axis so you don't end up with odd things like loops in your graph.

So you want to add more points to your source data, between the existing points, and use an interpolation algorithm that's more sophisticated than a linear interpolation. There are many to choose from. Quadratic? Sine-based? Many, and it depends on what kind of data you're using.

Answer 3

I've found that if you draw a line or an image on the edge of your frame that it will appear jagged. Move the line in a few (or grow your frame) and it should appear nice and crisp. Again, not sure if that's your question or not but it has bit me a few times.

For instance if you are displaying an image inside a CALayer, make sure there is space between the image and the frame if you are doing anything but 90 degree angles.