iOS Drawing: Practical UIKit Solutions (2014)

---

Converting Between Coordinate Systems

The iOS SDK offers several methods to move between coordinate systems. For example, you might want to convert the position of a point from a view’s coordinate system to its parent’s coordinate system to determine where a drawn point falls within the parent view. Here’s how you do that:

CGPoint convertedPoint =
[outerView convertPoint:samplePoint fromView:grayView];

You call the conversion method on any view instance. Specify whether you want to convert a point into another coordinate system (toView:) or from another coordinate system (fromView:), as was done in this example.

The views involved must live within the same UIWindow, or the math will not make sense. The views do not have to have any particular relationship, however. They can be siblings, parent/child, ancestor/child, or whatever. The methods return a point with respect to the origin you specify.

Conversion math applies to rectangles as well as points. To convert a rectangle from a view into another coordinate system, use convertRect:fromView:. To convert back, use convertRect:toView:.

Key Structures

iOS drawing uses four key structures to define geometric primitives: points, sizes, rectangles, and transforms. These structures all use a common unit, the logical point. Points are defined using CGFloat values. These are type defined as float on iOS and double on OS X.

Unlike pixels, which are inherently integers, points are not tied to device hardware. Their values refer to mathematical coordinates, offering subpixel accuracy. The iOS drawing system handles the math on your behalf.

The four primitives you work with are as follows:

CGPoint—Points structures are made up of an x and a y coordinate. They define logical positions.

CGSize—Size structures have a width and a height. They establish extent.

CGRect—Rectangles include both an origin, defined by a point, and a size.

CGAffineTransform—Affine transform structures describe changes applied to a geometric item—specifically, how an item is placed, scaled, and rotated. They store the a, b, c, d, tx, and ty values in a matrix that defines a particular transform.

The next sections introduce these items in more depth. You need to have a working knowledge of these geometric basics before you dive into the specifics of drawing.

Points

The CGPoint structure stores a logical position, which you define by assigning values to the x and y fields. A convenience function CGPointMake() builds a point structure from two parameters that you pass:

struct CGPoint {
CGFloat x;
CGFloat y;
};

These values may store any floating-point number. Negative values are just as valid as positive ones.

Sizes

The CGSize structure stores two extents, width and height. Use CGSizeMake() to build sizes. Heights and widths may be negative as well as positive, although that’s not usual or common in day-to-day practice:

struct CGSize {
CGFloat width;
CGFloat height;
};

Rectangles

The CGRect structure is made up of two substructures: CGPoint, which defines the rectangle’s origin, and CGSize, which defines its extent. The CGRectMake() function takes four arguments and returns a populated rect structure. In order, the arguments are x-origin, y-origin, width, and height. For example, CGRectMake(0, 0, 50, 100):

struct CGRect {
CGPoint origin;
CGSize size;
};

Call CGRectStandardize() to convert a rectangle with negative extents to an equivalent version with a positive width and height.

Transforms

Transforms represent one of the most powerful aspects of iOS geometry. They allow points in one coordinate system to transform into another coordinate system. They allow you to scale, rotate, mirror, and translate elements of your drawings, while preserving linearity and relative proportions. You encounter drawing transforms primarily when you adjust a drawing context, as you saw in Chapter 1, or when you manipulate paths (shapes), as you read about in Chapter 5.

Widely used in both 2D and 3D graphics, transforms provide a complex mechanism for many geometry solutions. The Core Graphics version (CGAffineTransform) uses a 3-by-3 matrix, making it a 2D-only solution. 3D transforms, which use a 4-by-4 matrix, are the default for Core Animation layers. Quartz transforms enable you to scale, translate, and rotate geometry.

Every transform is represented by an underlying transformation matrix, which is set up as follows:

This matrix corresponds to a simple C structure:

struct CGAffineTransform {
CGFloat a;
CGFloat b;
CGFloat c;
CGFloat d;
CGFloat tx;
CGFloat ty;
};

Creating Transforms

Unlike other Core Graphics structures, you rarely access an affine transform’s fields directly. Most people won’t ever use or need the CGAffineTransformMake() constructor function, which takes each of the six components as parameters.

Instead, the typical entry point for creating transforms is either CGAffineTransformMakeScale(), CGAffineTransformMakeRotation(), or CGAffineTransformMakeTranslation(). These functions build scaling, rotation, and translation (position offset) matrices from the parameters you supply. Using these enables you to discuss the operations you want to apply in the terms you want to apply them. Need to rotate an object? Specify the number of degrees. Want to move an object? State the offset in points. Each function creates a transform that, when applied, produces the operation you specify.

Layering Transforms

Related functions enable you to layer one transform onto another, building complexity. Unlike the first set of functions, these take a transform as a parameter. They modify that transform to layer another operation on top. Unlike the “make” functions, these are always applied in sequence, and the result of each function is passed to the next. For example, you might create a transform that rotates and scales an object around its center. The following snippet demonstrates how you might do that:

CGAffineTransform t = CGAffineTransformIdentity;
t = CGAffineTransformTranslate(t, -center.x, -center.y);
t = CGAffineTransformRotate(t, M_PI_4);
t = CGAffineTransformScale(t, 1.5, 1.5);
t = CGAffineTransformTranslate(t, center.x, center.y);

This begins with the identity transform. The identity transform is the affine equivalent of the number 0 in addition or the number 1 in multiplication. When applied to any geometric object, it returns the identical presentation you started with. Using it here ensures a consistent starting point for later operations.

Because transforms are applied from their origin, and not their center, you then translate the center to the origin. Scale and rotation transforms always relate to (0, 0). If you want to relate them to another point, such as the center of a view or a path, you should always move that point to (0, 0). There, you perform the rotation and scaling before resetting the origin back to its initial position. This entire set of operations is stored in the single, final transform, t.

Exposing Transforms

The UIKit framework defines a variety of helper functions specific to graphics and drawing operations. These include several affine-specific functions. You can print out a view’s transform via UIKit’s NSStringFromCGAffineTransform() function. Its inverse isCGAffineTransformFromString(). Here’s what the values look like when logged for a transform that’s scaled by a factor of 1.5 and rotated by 45 degrees:

2013-03-31 09:43:20.837 HelloWorld[41450:c07]
[1.06066, 1.06066, -1.06066, 1.06066, 0, 0]

This particular transform skips any center reorientation, so you’re only looking at these two operations.

These raw numbers aren’t especially meaningful. Specifically, this representation does not tell you directly exactly how much the transform scales or rotates. Fortunately, there’s an easy way around this, a way of transforming unintuitive parameters into more helpful representations. Listing 2-1 shows how. It calculates x- and y-scale values as well as rotation, returning these values from the components of the transform structure.

There’s never any need to calculate the translation (position offset) values. These values are stored for you directly in the tx and ty fields, essentially in “plain text.”

Listing 2-1 Extracting Scale and Rotation from Transforms