👨 🏻 💻 making Demo

Easy to remember:

  • Nature: to deal with the deformation of the class, through the “affine transformation matrix” control translation, scaling, rotation
  • Methods:
    • CGAffineTransformMakeTranslation: based on the initial position, on the x axis translation unit, the x y translation unit in the y direction
    • CGAffineTransformMakeScale: based on the initial position, the scaling of x in x axis direction, zooming in the y direction y times
    • CGAffineTransformMakeRotation: based on the initial position, will coordinate system counterclockwise Angle radian (radians = PI / 180 x point of view, M_PI radian Angle 180)
    • CGAffineTransformTranslate: based on an existing deformation, on the x axis translation unit, the x y translation unit in the y direction
    • CGAffineTransformScale: Scales x in the x direction and y in the y direction based on an existing deformation
    • CGAffineTransformRotate: Rotates the coordinate system counterclockwise based on an existing deformation (radian =π/180 x Angle,M_PI radian represents 180 angles)
    • CGAffineTransformIdentity: transform property defaults to CGAffineTransformIdentity, this value can be set after deformation to restore to the original state

An overview of the

A structure for holding an affine transformation matrix.

CGAffineTransform is a class used to deal with deformation, which can change the translation, scaling, rotation and so on of the control. Its coordinate system adopts a two-dimensional coordinate system, that is, to the right is the positive direction of the X axis, and to the down is the positive direction of the Y axis.

The relationship between the matrix and the coordinates is as follows:

struct CGAffineTransform { CGFloat a; CGFloat b; CGFloat c; CGFloat d; CGFloat tx; CGFloat ty; }; 
typedef struct CGAffineTransform CGAffineTransform;
Copy the code

We use UIImageView’s Transform method to demonstrate this feature. Note that by default, User Interaction of UIImageView is non-interactive and needs to be set:

Methods to introduce

  • CGAffineTransformMakeTranslation

CGAffineTransformMakeTranslation implementation based on the initial position, x unit on the x axis translation, the unit of translation in the y direction y.

CGAffineTransform transform = CGAffineTransformMakeTranslation(- 100..150);
imageView.transform = transform;
Copy the code
  • CGAffineTransformMakeScale

CGAffineTransformMakeScale implementation based on the initial position, the scaling of x in x axis direction, zooming in the y direction y times

CGAffineTransform transform = CGAffineTransformMakeScale(2.2);
imageView.transform = transform;
Copy the code
  • CGAffineTransformMakeRotation

CGAffineTransformMakeRotation implementation based on the initial position, will coordinate system counterclockwise Angle radian (radians = PI / 180 x point of view, M_PI radian Angle 180)

CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI);
imageView.transform = transform;
Copy the code
  • CGAffineTransformTranslate

CGAffineTransformTranslate implementation based on an existing deformation, on the x axis translation unit, the x y translation unit in the y direction

CGAffineTransform transform = CGAffineTransformMakeTranslation(50.50);
imageView.transform = CGAffineTransformTranslate(transform, 50.50);
Copy the code
  • CGAffineTransformScale

The CGAffineTransformScale implementation scales x times in the x direction and y times in the y direction based on an existing deformation

CGAffineTransform transform = CGAffineTransformMakeScale(2.0.5);
imageView.transform = CGAffineTransformScale(transform, 2.1);
Copy the code
  • CGAffineTransformRotate

CGAffineTransformRotate Implements a counterclockwise rotation of the coordinate system based on an existing deformation (radian =π/180 x Angle,M_PI radian represents 180 angles)

CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI*0.25);
imageView.transform = CGAffineTransformRotate(transform, M_PI*0.25);
Copy the code
  • CGAffineTransformIdentity

The transform property defaults to CGAffineTransformIdentity, this value can be set after deformation to restore to the original state

imageView.transform = CGAffineTransformIdentity;
Copy the code

CGAffineTransform principle

CGAffineTransform deformation is controlled by “affine transformation matrix”

  • Translation is matrix addition
  • Rotation and scaling are matrix multiplications

In order to combine addition and multiplication in matrix operation, the concept of homogeneous coordinate is introduced.

Homogeneous coordinates provide an efficient way to transform a set of points in two-dimensional, three-dimensional or even higher-dimensional space from one coordinate system to another by matrix operations.

CGAffineTransform deformation is the two-dimensional deformation using a three dimensional matrix, in which the third column is (0, 1), the deformation control through the first two columns, the system provides CGAffineTransformMake structure to control the deformation.

CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)
Copy the code

The three-dimensional transformation matrix is as follows

To transform a set of points in space from one coordinate system to another coordinate system by multiplying the transformation matrix by a vector, the calculation is as follows

The calculation results

As can be seen from the above:

  • Tx is used to control translation in the x direction
  • Ty is used to control translation in the y direction
  • A is used to control scaling in the x direction
  • D is used to control scaling in the y direction
  • Abcd co-controls rotation

Corresponding code implementation:

1) translation CGAffineTransformMakeTranslation principle

self.demoImageView.transform = CGAffineTransformMakeTranslation(100.100);
self.demoImageView.transform = CGAffineTransformMake(1.0.0.1.100.100);
Copy the code

2) scaling CGAffineTransformMakeScale principle

self.demoImageView.transform = CGAffineTransformMakeScale(2.0.5);
self.demoImageView.transform = CGAffineTransformMake(2.0.0.0.5.0.0);
Copy the code

3) rotation CGAffineTransformMakeRotation principle

self.demoImageView.transform = CGAffineTransformMakeRotation(M_PI*0.5);
self.demoImageView.transform = CGAffineTransformMake(cos(M_PI * 0.5), sin(M_PI * 0.5), -sin(M_PI * 0.5), cos(M_PI * 0.5), 0.0);
Copy the code

4) the initial state CGAffineTransformIdentity principle

self.demoImageView.transform = CGAffineTransformIdentity;
self.demoImageView.transform = CGAffineTransformMake(1.0.0.1.0.0);
Copy the code

Above post since: https://www.jianshu.com/p/ca7f9bc62429