[UGUI Study Notes] Rect Transform

Rect Transform

Anchors and pivots

Insert image description here
In the picture above, the blue concentric circles in the center represent the pivot point , and the four-corner petals represent the anchor points of the object .

Attribute meaning
Pivot point Pivot By default, it is at the geometric center of the object. The axis represents the coordinate point of the object in space. The position of the axis can be set.
Anchors By default, the anchor point represents the object at the geometric center of the parent object.

pivot point

Insert image description here

The pivot point represents the physical center of the object. When moving the pivot point, we will find that the coordinate axes for operations such as rotation, scaling, and movement have been moved to the pivot point. When the pivot point is moved, the Pivot attribute, Anchor Position attribute, and Local Positon attribute will change accordingly.


anchor point

Insert image description here

There are two types of adjustment attributes of the anchor point, as shown in the figure above (when holding down Shift, a blue dot will appear, indicating that the anchor point and the pivot point are adjusted together)

The parts without blue lines and the parts with blue lines in the above figure represent two different anchoring modes:

  • Select the four corners of the anchor point without the blue line to move at the same time.
  • The parts with blue lines represent the different movement directions of the four corners.

The pivot point position of the anchor point is the center of the geometry connected by four lines. (Note that the four-corner movement of the anchor point is symmetrical)
Hold down Shift while moving the anchor point to deform the sub-object at the same time to keep the relative offset between the original anchor point and the sub-object vertices unchanged.
Anchors Min represents the distance between the lower left corner of the anchor point and the lower left corner of the parent object, and Anchors Max represents the distance between the upper right corner of the anchor point and the upper right corner of the parent object.

Insert image description here

When we switch between different modes of the anchor point, we will find that the properties of the anchor point have changed. The key is whether two of the four corners are connected. An axis is fixed at every two intersections, as shown in the blue line in the figure above. This axis represents the coordinate axis when calculating the position (Positon) of the child object relative to the parent object. For example, the upper left and upper right are connected, and the lower left and right are connected. The connection can fix a Y-axis for calculating the offset of the sub-object's pivot point relative to the anchor point . (In the first mode, the coordinate offset of the sub-object's pivot point in the axis direction with the anchor point as the origin, Weigh and Heigh represent the height and width attributes of the sub-object)
Insert image description here

In the second mode, although the four anchor points are not connected, the four lines connected by the four anchor points form a quadrilateral. At this time, the pivot point of the anchor point is the pivot point of the quadrilateral. Observing the attributes in Inspact, we found that all the attributes become the coordinate offsets of the four sides of the sub-object relative to the four sides corresponding to the quadrilateral formed by the anchor points (the sides formed by the anchor points are used as the coordinate axis, and the The closer these four values ​​are to the anchor point, the smaller they are).

Insert image description here
After trying to change the four corners of the four anchor points, we then stretched and deformed the parent object. We observed the attributes in Inspact and found that there were four attributes representing the position of the pivot point of the child object and the pivot point of the anchor point. Left, Top, Right and Bottom have not changed. So we understand that in fact, the coordinate offset between the four corner vertices of the sub- , so the relative position of the real pivot point of the sub-object and the anchor point pivot point is constant . It means that the parent object deforms by a certain percentage in a certain axis direction, and the child object will deform accordingly. This is the essence of the adaptive change of the child object with the anchor point. The Min Max sub-attribute under the Anchors attribute represents the deformation ratio of the sub-object.

Insert image description here
Insert image description here

When using the second mode, the calculation method of SizeDelta in Debug mode (originally determined by the Height and Weight properties of the sub-object, but there are no properties in the second mode) will become (-Top) +(-Bottom),(-Left)+(-Right). This is because these four attributes only represent the position of the real axis of the sub-object relative to the anchor point, so such calculations are performed.


Insert image description here
Finally, pay attention to the two attributes of the picture above. One is the blueprint mode represented by the dotted box. In the blueprint mode, no matter how you choose to zoom, the original frame surrounding the sub-object will not change.

The other is the original editing mode represented by R, which acts on the current anchor point and pivot point. When the anchor point is moved, the object will automatically deform to adapt to the original relative position of the pivot point to the object.


Guess you like

Origin blog.csdn.net/milu_ELK/article/details/131598902