Thoroughly understand position, anchorPoint, and anchorpoint

Thoroughly understand position, anchorPoint, and anchorpoint
Introduction

I believe that people who are new to CALayer will encounter the following problems:
Why does the anchorPoint position move the layer?
What is the position of CALayer?
What is the relationship between anchorPoint and position?

I have also been confused. I have searched for online tutorials, and most of them are copied and pasted. Some of them are translated articles, but they are very difficult to understand. I am still familiar with writing code myself, take notes.

Each UIView is associated with a CALayer by default. UIView has three attributes: frame, bounds, and center. CALayer also has similar attributes: frame, bounds, position, and anchorPoint. Frame and bounds are easy to understand. bounds can be regarded as a frame where the x and y coordinates are both 0. What is position and anchorPoint? First, let's look at the prototype of the Two. We can see that they are both CGPoint points.

@ Property CGPoint position
@ Property CGPoint anchorPoint

AnchorPoint

Generally, we first introduce position and then anchorPoint. Here, let's talk about anchorPoint.

Let's start with an example. Imagine, you can place an A4 White Paper on a desk with a tops. If the order is not very tight, then the White Paper can rotate around the tops clockwise or counterclockwise, at this time, the map nail plays a pivot role. The anchorPoint we want to explain is equivalent to the graph nail on the White Paper. Its main function is to serve as the pivot of the Transformation. rotation is a kind of transformation, similar to translation and scaling.

It is obvious that the rotation form of White Paper varies with the position of the map nail. The figure nail creates two rotation forms in the middle of the White Paper and in the upper left corner, this is determined by the position of the anchorPoint. How can we measure the position of anchorPoint in White Paper? In iOS, The anchorPoint value is determined by a ratio value relative to the bounds. in the upper left and lower right corner of the White Paper, anchorPoint is divided into (0, 0), (1, 1), that is, anchorPoint is defined in the Unit coordinate space (also left-hand coordinate system. Similarly, the anchorPoint in the center, lower left, and upper right corner of the White Paper is (0.5, 0.5 ).

Then let's take a look at the following two figures. Note that iOS and MacOS are shown in the figure. Because the two coordinate systems are different, iOS uses the left-hand coordinate system, the coordinate origin is in the upper left corner, and MacOS uses the right-hand coordinate system, the origin is in the lower left corner. Let's take a look at the iOS part.
Figure 1

 
Figure 2

Like the concept of a superView and a subView in a UIView, CALayer also has the concept of a superLayer and a layer. The White Paper mentioned earlier and the rectangle in the figure can be understood as a layer, the coordinate system except the rectangle in the desk and graph can be understood as a superLayer. If the upper left corner is used as the origin, there are two relative coordinate spaces in the graph.

Position

In Figure 1, anchorPoint has two conditions: (0.5, 0.5) and (), which are the center point and origin point of the rectangle, respectively. So what are the actual locations of the two anchorpoints in the superLayer? After a simple calculation, we can get the values (100,100) and (40, 60). We can compare these two values with their respective position values and find that they are exactly the same. Isn't that a coincidence?

At this time, you can guess whether the position is the position of the anchorPoint in the superLayer? The answer is yes. More specifically, position is the coordinate of the anchorPoint point in the layer in the superLayer. Therefore, the position point is relative to the suerLayer, And the anchorPoint is relative to the layer. The two are a coincidence point of a relatively different coordinate space.

Let's take a look at The original definition of position: The layer's position in its superlayer's coordinate space.
It can be understood in Chinese that the position is the coordinate space of the layer relative to the superLayer. Obviously, the position here is determined based on anchorPoint.

In Figure 2, the rectangle is rotated along different anchorPoint points. This is similar to the figure above, which is written in the middle of the White Paper and in the upper left corner of the White Paper.

AnchorPoint, position, frame

The default value of anchorPoint is (0.5, 0.5), that is, anchorPoint is in the center of the layer by default. By default, when you use the addSublayer function to add a layer, if you know the frame value of the layer, based on the above conclusion, the position value can be calculated using the following formula:

12	position.x = frame.origin.x + 0.5 * bounds.size.width； position.y = frame.origin.y + 0.5 * bounds.size.height；

The 0.5 clause indicates that anchorPoint takes the default value. The more general formula is as follows:

12	position.x = frame.origin.x + anchorPoint.x * bounds.size.width； position.y = frame.origin.y + anchorPoint.y * bounds.size.height；

Next, let's look at the other two questions. If we modify the position of a layer unilaterally, what will happen to anchorPoint? How does one modify the anchorPoint to affect the position?
According to the Code test, the two do not affect each other. Only frame. origin is affected, that is, the layer coordinate origin is changed relative to the superLayer. In other words, frame. origin is jointly determined by position and anchorPoint. the above formula can be transformed into the following:

12	frame.origin.x = position.x - anchorPoint.x * bounds.size.width； frame.origin.y = position.y - anchorPoint.y * bounds.size.height；

This explains why modifying the anchorPoint will move the layer. Because the position is not affected, only frame. origin can be changed accordingly, so the layer will be moved.

Understanding and Application

The description of frame in Apple doc includes the following sentence:

Layers have an implicit frame that is a function of the position, bounds, anchorPoint, and transform properties.

We can see that the formula we derived basically conforms to this section, but there is still a lack of transform. In addition, transform is complicated and will not be discussed here.

The following is a description in the Apple doc:

When you specify the frame of a layer, position is set relative to the anchor point. When you specify the position of the layer, bounds is set relative to the anchor point.

When you set the frame attribute of a layer, position is determined based on the anchorPoint value. When you set the position attribute of a layer, bounds is determined by anchorPoint.

The first half of this translation is easy to understand according to the previous formula, and the last half may be a bit confusing. When the position is modified, will the width and height of bounds be modified? In fact, position is a vertex and bounds is a rectangle. According to anchorPoint, only their positions are determined, not internal attributes. Therefore, the above English translation is easy to understand:

When you set the frame attribute of the layer, the position (that is, the position coordinate) of the position point is determined based on the anchorPoint value, when you set the position attribute of the layer, the bounds position (that is, the orgin coordinate of the frame) is determined according to the anchorPoint.

In actual situations, there may be another requirement. I need to modify the anchorPoint, but I do not want to move the layer or modify the frame. according to the previous formula, the position must be modified accordingly. After simple derivation, the following formula is obtained:

12	positionNew.x = positionOld.x + (anchorPointNew.x - anchorPointOld.x) * bounds.size.width positionNew.y = positionOld.y + (anchorPointNew.y - anchorPointOld.y) * bounds.size.height

However, in actual use, there is no need to be so troublesome. Modify the anchorPoint instead of moving the layer. After modifying the anchorPoint, You can reset the frame again to achieve the goal. Then, the position will automatically change accordingly. Writing a function is as follows:

12345

- (void) setAnchorPoint:(CGPoint)anchorpoint forView:(UIView *)view{ CGRect oldFrame = view.frame; view.layer.anchorPoint = anchorpoint; view.frame = oldFrame;}

Summary

1. position is the coordinate of the anchorPoint in the layer in the superLayer.
2. Mutual influence principle: modifying either position or anchorPoint does not affect the other attribute.
3. frame and position have the following relationships with anchorPoint:

12	frame.origin.x = position.x - anchorPoint.x * bounds.size.width； frame.origin.y = position.y - anchorPoint.y * bounds.size.height；

The 2nd principle of mutual influence can also be understood as follows: position and anchorPoint are the focal points in different coordinate spaces, modifying the position of a point in one coordinate space does not affect the position of the point in another coordinate space.

Postscript

20140323: I thought of a better explanation about why the modified anchorPoint moved the layer position when I replied to the finder's comment:
Take the table and White Paper as an example. If the position of the fixed graph is fixed on the table, that is, the position of the positon remains the same, at this time, the graph is in different places of the White Paper as different anchorPoint, it is also a different frame.
On the other hand, if you fix the position of the graph nail on the White Paper (not on the table), no matter how you translate the White Paper, the anchorPoint will certainly remain unchanged, but the frame will certainly change accordingly.

Reprinted: http://wonderffee.github.io/blog/2013/10/13/understand-anchorpoint-and-position/
What is the difference between Anchor Point and Position in After Effects?

AnchorPoint refers to the position of the anchor, that is, the position of the point in the graph relative to the position of the graph. If it is 0, it is in the upper left corner of the graph.
Position indicates the Position of the anchor relative to the stage (that is, the merging). If it is 0 or 0, the anchor Position should be in the upper left corner of the merging.
At this time, if you change the AnchorPoint, the image will be moved, but the Position does not change.

Do you understand?

Why do I add a position: absolute; In The Middle Of The div label after float: left?

Float: left; is left in the outer div, position: absolute; is an absolute position of the position, usually with left: 50px; top: 50px; bottom: 50px; right: 50px; these attributes are linked together to achieve absolute positioning.