Chapter 13. 13h30 - Tutorial: How to recognize ugly graphics, and what you can do about them. A tutorial on cairo

Tutorial: How to recognize ugly graphics, and what you can do about them. A tutorial on cairo

Carl D. Worth

project: http://cairographics.org/

tutorial: http://cairographics.org/snapshots/tutorial.tar.gz

Carl gave a great tutorial on graphics in general (especially examples of bad graphics) and then moved onto describing the cairo library and how much more beautiful its output is compared to anything else. Despite the fact that Carl's been working on Cairo for the better part of the last 2 years, it's humorous to see that he is still very excited about this project and he enjoys talking about it at length. To this day Carl enjoys showing very short, concise snippets of code, and then showing what wonderful, correct, graphics result from it.

Some of the nuggets of wisdom I extracted from this talk are:

• With the advent of anti-aliasing it became necessary to be aware of our alignment when drawing lines. Note that the coordinate system runs along the grid lines of our output device, but that strokes occur in the boxes in between coordinate lines. If all your strokes are aligned on even coordinates then straight lines will never be stroked with solid black lines, but rather you'll end up with two boxes of 50% black. Therefore it's a good rule of thumb to always offset your results by 0.5 to make sure it falls fully in the boxes and not on top of the grid lines.

• In cairo the consumption of the path in the stroke operation is optional (depending on which function calls you make). Be aware of this when pushing your current path when you need to both stroke and fill your path.

• When performing affine transforms, always make sure to perform them in the following order:

  1. translate

  2. scale

  3. rotate

  If you try to scale your coordinate space first and then try to translate, you probably won't end up with what you wanted.

• cairo_paint() is a poorly-named function. In Java the paint() method usually means you want the drawing to appear on the screen. For some reason the cairo developers thought it would make sense to use this name for a function that erases everything in your drawable.

• The toy text API in cairo was not meant to look good or to be exceptionally functional. It is expected that a "real" application would substitute the toy font with "real" system fonts before going out the door.