How can I draw this complex shape using iOS Quartz 2D drawing?

Question

I know how to draw simple shapes - rectangles, ellipses and lines etc. using iOS Quartz 2D drawing.

Just now I'm trying to draw a relatively complex shape though, the tail of a musical quaver:

Can anybody suggest a good way to approach this problem?

Answer 1

Can you design the quaver in a graphics program like Inkscape, export as an SVG, and then render using SVGKit? From a development level, it would be much easier to maintain something that you can visually update, rather than trying to draw a shape with code.

Answer 2

What I have learned from my designers is, that you start with a simple form and then extend and change it in single, small steps. Sometime later you arrive at the complex form. So, like answered by @Duncan C building a path. Now I know that is quite tedious. One alternative not mentioned here is PaintCode, an app that produces Cocoa code from your drawing. It is called PaintCode and should do what you want. Btw I am not affiliated with the makers of PaintCode!

Answer 3

You could draw that as a filled UIBezierPath (which is a UIKit wrapper on a CGPath).

You'd open a path, draw a sequence of straight lines and cubic or quadratic bezier curves, then close the path. Then you'd draw it as a filled path.

Once you have the path created, you could draw it with a single call.

Answer 4

A couple of alternatives, as Duncan seems to have answered this.

One option would be to dynamically scale a high resolution image.

There is one caveat with this approach: you should not scale anything below 1/2 of the original size, otherwise the interpolation tends to glitch.

So you would need to store image at say 64x64, 128x128, 256x256 etc

You could pack all of these into a single 256x512, and this is what a lot of games do.

Another option is to render a quaver unicode character http://www.fileformat.info/info/unicode/char/266a/index.htm