Graphics Reference
In-Depth Information
5
Unfortunately, no one can be told what the Matrix is. You have to see it for yourself.
Morpheus,
The Matrix
In Chapter 4, “Visual Effects,” we looked at some techniques to enhance the appearance of
layers and their contents. In this chapter, we investigate
CGAffineTransform
, which
can be used to rotate, reposition, and distort our layers, and at
CATransform3D
, which
can change boring flat rectangles (albeit rounded rectangles with drop-shadows) into three-
dimensional surfaces.
In Chapter 3, “Layer Geometry,” we made use of the
UIView
transform
property to
rotate the hands on a clock, but we didn't really explain what was going on behind the
scenes. The
UIView
transform
property is of type
CGAffineTransform
, and is
used to represent a two-dimensional rotation, scale, or translation.
CGAffineTransform
is a 2-column-by-3-row matrix that can be multiplied by a 2D row-vector (in this case a
CGPoint
) to transform its value (see the boldface values in Figure 5.1).
This multiplication is performed by taking the values in each column of the
CGPoint
vector, multiplying them by the values in each row of the
CGAffineTransform
matrix,
then adding the results together to create a new
CGPoint
. This explains the additional
values shown in gray in the figure; for matrix multiplication to work, the matrix on the left
must have the same number of columns as the matrix on the right has rows, so we have to
pad out the matrices with so-called
identity
values—numbers that will make the sums work,
but without changing the result. We don't actually need to store those additional values
because they never change, but they are required for the calculation.