9.11 · Transform order, fill rules, text measurement, text containers and bitmaps

Drawing and text bugs are usually arithmetic bugs: an order of operations, a winding rule, a rounding, a scale.

Mental model. Each of these has a precise rule that you can print. Learn the rule once and the picture stops being a surprise.

Geometry rules

Affine transform order and path fill rules.

  1. In which order do CGAffineTransform operations apply, and what do scaledBy, rotated and translatedBy do differently from concatenating? 9.11.1 · L3
    A CGAffineTransform is a 2D matrix; concatenating reads left to right as “first this, then that”: T.concatenating(S) translates by 100 then scales by 2, so the…
  2. How do the non-zero and even-odd fill rules decide what is inside a path, and what does contains(_:) ignore? 9.11.2 · L3
    For a path with overlapping or nested sub-paths, “inside” needs a rule. Non-zero winding (the default) draws a ray from the point and adds one for each path…

Text and bitmaps

Measuring text, shaping its container, and what a bitmap really costs.

  1. How do you measure text correctly: font metrics, boundingRect options and rounding, and what paragraph styles add? 9.11.3 · L3
    A font has an ascender, a descender (negative) and leading (extra line gap); lineHeight is their sum (ascender − descender + leading), which the check confirms…
  2. How do exclusion paths, line limits and truncation work in an NSTextContainer, and what do UILabel’s own limits do? 9.11.4 · L5
    In TextKit the container decides where lines may go. An NSTextContainer has a size (the wrapping width), exclusionPaths (regions the text must flow around, in…
  3. What does an image cost in pixels, what does opaque change in a UIGraphicsImageRenderer, and what do resizing and rendering modes do? 9.11.5 · L3
    A UIImage has a size in points and a scale; the bitmap behind it has size × scale pixels, 4 bytes each in the usual 32-bit format, and the rows may be padded.…

More in Layout, rendering & animation