A thorough understanding of position and Anchorpoint-wonderffee ' s Blog

Introduction

Believe that the first contact to Calayer people will encounter the following problems:
Why does modifying anchorpoint move the layer's position?
What is the point of Calayer's position?
What is the relationship between Anchorpoint and position?

I also puzzled, looked for online tutorials, most of them are copied and pasted, some are translated articles but there are problems, see indefinitely, or write their own code thoroughly understand, do some notes.

Each uiview is associated with a calayer, UIView has frame, bounds, and center three properties, and Calayer has similar attributes, frame, bounds, position, anchorpoint, respectively. Frame and bounds better understand, bounds can be regarded as x-coordinate and y-coordinate is 0 frame, that position, Anchorpoint is what? First look at the two prototypes, it is Cgpoint point.

@property Cgpoint Position
@property Cgpoint Anchorpoint

Anchorpoint

Generally are introduced position first, and then introduce Anchorpoint. I am here in turn, first to say anchorpoint.

Start with an example, imagine, put a A4 of white paper with a Pushpin on the desk, if not very tight, the white can be rotated clockwise or counterclockwise around the Pushpin, when the Pushpins play the role of Fulcrum. We want to explain the anchorpoint is equivalent to the white pin, its main function is used as the pivot point of transformation, rotation is a transformation, similar to the translation, scaling.

Continue to expand, it is clear that the rotation of the white paper with the position of the pin is different, the Pushpin is set in the middle of the white paper and the upper left corner respectively created two rotation patterns, which is determined by the position of the Pushpin (Anchorpoint). How to measure the position of Pushpins (Anchorpoint) in white Paper? In iOS, the value of the Anchorpoint point is determined by a relative bounds scale value, in the upper-left corner of the white paper, in the lower-right corner, the Anchorpoint is divided into (0,0), (1, 1), which means that anchorpoint is in the cell coordinate space ( is also defined in the left-hand coordinate system). Similarly, it can be concluded that the center point of the White Paper, the lower left corner and the upper right corner of the Anchorpoint is (0.5,0.5), (0,1), (1,0).

Then take a look at the following two pictures, note that the image is divided into iOS and MacOS, because the coordinate system is different, iOS use the left-handed coordinate system, the coordinates origin in the upper left corner, MacOS using the right-hand coordinate system, the origin point in the lower left corner, we look at the iOS section.

Figure 1

Figure 2

Like UIView has Superview and subview concept, Calayer also has the concept of superlayer and layer, the front of the white Paper and the diagram of the rectangle can be understood as a layer, A coordinate system other than the rectangle in the diagram can be understood as superlayer. If the upper-left corner is the origin, then there is a relative two coordinate space in the diagram.

Position

In Figure 1, Anchorpoint has two cases (0.5,0.5) and (0,0), respectively, the center point of the rectangle and the origin point. So, what are the actual positions of the two anchorpoint in the Superlayer? A simple calculation can be obtained (100, 100) and (40, 60), comparing these two values with their respective position values, and finding the exact same, which is not a coincidence?

This time can be bold speculation, position is not anchorpoint in the Superlayer position? The answer is OK, or more specifically, the position is the position coordinates of the anchorpoint point in the layer in Superlayer. Therefore, it can be said that the position point is relatively suerlayer, Anchorpoint point is a relative layer, the two are relatively different coordinate space of a coincident point.

Take a look at the original definition of position: the layer's position in its superlayer ' s coordinate space.
Chinese can be understood as position is the position of the layer relative to the superlayer coordinate space, it is clear that the position here is based on the anchorpoint to determine.

Figure 2 is the shape of the rectangle that rotates along the different anchorpoint points, which is similar to the two types of rotation that were created when the Pushpin was set in the middle of the white paper and the upper left corner.

Anchorpoint, Position, frame

The default value for Anchorpoint is (0.5,0.5), which is the anchorpoint default at the center point of the layer. By default, when you add a layer using the Addsublayer function, if you know the frame value of the layer, according to 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 inside is because Anchorpoint takes the default value, and the more general formula should be the following:

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

Here are two other questions, if unilaterally modify the position position of layer, what will be the impact on Anchorpoint? How does modifying anchorpoint affect position?
According to the code test, the two do not affect each other, the affected will only be frame.origin, that is, the layer coordinate origin relative to the superlayer will change. In other words, Frame.origin is determined by position and anchorpoint, and the formula above can be changed to 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 Anchorpoint moves the layer, because position is not affected, only frame.origin makes the corresponding change, and thus moves the layer.

Understanding and Application

In Apple Doc's description of frame, there is this sentence:

Layers has an implicit frame, which is a function of the position, bounds, anchorpoint, and transform properties.

We can see that the formula we derive is basically in line with this paragraph description, but also lacks the transform, adds the transform the words to be more complex, here does not unfold to speak.

Another description in Apple doc is this:

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

When you set the frame property of a layer, the position is determined by the value of the anchor (Anchorpoint), and when you set the Position property of the layer, bounds is determined by the anchor Point (Anchorpoint).

The first half of this translation is easy to understand according to the previous formula, the latter half of the sentence may be a bit confusing, when modifying the position, bounds width and height will be modified with it? In fact, position is the point, bounds is the rectangle, according to the anchor Point (anchorpoint) to determine only their position, not the internal properties. Therefore, the above paragraph of English translation is easy to understand:

When you set the frame property of a layer, the position of the position point (that is, the position coordinate) is determined by the value of the anchor point (Anchorpoint), and when you set the Position property of the layer, The position of the bounds (that is, the orgin coordinate of the frame) is determined by the anchor Point (Anchorpoint).

In the actual situation, there may be a need, I need to modify the Anchorpoint, but do not want to move the layer is not want to modify the Frame.origin, then according to the previous formula, you need to position to do the corresponding modification. Simply deduced, you can get the following formula:

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

But there is no need to be so troublesome in actual use. Modify anchorpoint and do not want to move the layer, after modifying the Anchorpoint and then re-set the frame can achieve the goal, then position will automatically change accordingly. The function is written as follows:

123)45

-(void)Setanchorpoint:(cgpoint)anchorpoint forview:(UIView *)view{ cgrect oldframe = View. Frame; View. Layer. Anchorpoint = anchorpoint; View. Frame = oldframe;}

Summarize

1, position is the position coordinates of the anchorpoint in the layer in the Superlayer.
2, the principle of non-impact: Individually modify position and anchorpoint any one of the properties does not affect another property.
3, frame, position and Anchorpoint have the following relationship:

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

2nd of the principle of non-impact can also be understood: position and anchorpoint are in different coordinate space in the coincident point, modify the location of the coincident point in one coordinate space does not affect the location of the coincident point in another coordinate space.

Postscript

20140323: About changing the location of the layer where the Anchorpoint moved, and a better explanation when replying to the Finder's comments just now:
or table and white paper as an example, if the fixed pushpin position on the table, that is positon unchanged, this time the Pushpin in the different places of white paper is different anchorpoint, corresponding to the different frame.
On the other hand, if the pin is placed on a white paper position (not on the table), no matter how to pan the white Paper, Anchorpoint must be unchanged, but the frame must be changed

Thoroughly understand position and Anchorpoint-wonderffee's Blog (turn)