Ugui-pivot and Anchor detail and localPosition and anchoredPosition

The pivot axis.

Rotation, size, and scaling changes are made around the pivot, so the pivot affects the results of the rotation, size, and scaling changes. When the toolbar pivot button is set to pivot mode, the pivot of the rectangular transformation can be moved in the scene view.

Note: the Pivot is relative to itself, X controls the Pivot to move left and right, Y controls the Pivot to move up and down, (0,0) is its lower left corner, (1,1) is its upper right corner, as shown in the figure below:

rotating

• When pivot is set to (0.5,0.5), the object rotates around its center point, as shown in the figure:

• When pivot is set to (0,0), the rotation effect is as follows:

The size of the

We know that when we change the size, we can change the size symmetrically by holding down Alt.

• When pivot is set to (0.5,0.5), the size of the object changes symmetrically around its center point, as shown in the figure:

• When pivot is set to (0.2,0.2), change the size as shown below:

The zoom

• When pivot is set to (0.5,0.5), the object scales around its center point, as shown here:

• When pivot is set to (0,0), the scale looks like this:

The anchor anchor

Anchors are a layout concept included in the RectTransform. They are displayed as four small triangular handles. The anchor information is also in the Inspector. If the parent of a rectangle transform is also a RectTransform, then the child rectangle transform can be anchored to the parent rectangle transform in various ways.

• Anchor is composed of four small triangular control handles, where the X of Min(bottom left) controls the movement of the left two control handles on the X-axis, while Y controls the movement of the following two control handles on the Y-axis; The X of Max(top right) controls the movement of the right two handles along the X axis, and the Y controls the movement of the top two handles along the Y axis. Moves relative to the parent object in the range of values [0,1], if shown:

• When all the anchor handles are together, the fields displayed are POSX, POxy, height, and width, where POSx, poxy indicate the anchor position of the parent object of the axis distance of the object itself.

• When the anchors are separated, the fields may be partially or completely left, right, top, and bottom. The anchor points appear left and right if they are separated horizontally, and top and bottom if they are separated vertically. Left represents the distance between the left two handles of the object itself and its left border; “Right” represents the distance between the two handles on the right of the object itself and the border on the right of the object itself; Top represents the distance between the two upper handles and their own upper border; Bottom represents the distance between the two handles below the object itself. As shown in figure:

Difference between localPosition and anchoredPosition

RectTransform inherits from Transform and describes the Position, Size, anchor, pivot, and other information of a rectangle. This component is automatically generated for each element of the 2D layout. When dealing with UI components, it’s easy to confuse the concept and usage of localPosition and anchoredPosition(3D).

The test case

• Identify two rectangles, parent: red rectangle 200 * 200, child: white rectangle 100 * 100. First, set the center point Pivot of the two rectangles to (0.5, 0.5) and the Anchor point to overlap (0.5, 0.5). At this time, the localPosition of the subrectangle is (0.0, 0.0, 0.0) and the anchoredPositon is (0.0, 0.0), as shown in the figure:

• Test 1: Leave the parent rectangle unchanged and set the Anchor point of the child rectangle to the upper left corner of the parent node. In this case, the localPosition of the subrectangle is (0.0, 0.0, 0.0), and the anchoredPositon is (100.0, -100.0), as shown in the figure:

• Test 2: The parent rectangle is unchanged, and the Anchor of the child rectangle is set to the lower left and right vertices of the parent node. In this case, the localPosition of the subrectangle is (0.0, 0.0, 0.0), and the anchoredPositon is (0.0, 100.0), as shown in the figure:

Test summary 1: localPosition is independent of its own anchor point. AnchoredPosition changes depending on the anchor point Settings.

• Test 3: The parent node is unchanged, the anchor point of the child node is unchanged, and the center point is set to the lower left corner (0, 0). In this case, the localPosition of the subrectangle is (-50.0, -50.0, 0.0), and the anchoredPositon is (-50.0, -50.0), as shown in the figure:

• Test 4: Parent node unchanged, anchor point of child node unchanged, center point set to right center position (1, 0.5). In this case, the localPosition of the subrectangle is (50.0, 0.0, 0.0), and the anchoredPositon is (50.0, 0.0), as shown in the figure:

Test summary 2: localPosition is related to its center point. AnchoredPosition is also related to its own midline point.

AnchoredPosition compute source code:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class NewBehaviourScript1 : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        RectTransform rect = GetComponent<RectTransform>();
        Debug.Log(rect.rect.min);
        Debug.Log(rect.rect.max);
        RectTransform parentRect = transform.parent.GetComponent<RectTransform>();
        // Connect anchoredPosition to localPosition by OffsetMin and OffsetMax
        Vector2 localPosition2D = newVector2(rect.localPosition.x, rect.localPosition.y); Vector2 anchorMinPos = parentRect.rect.min + Vector2.Scale(rect.anchorMin, parentRect.rect.size); Vector2 rectMinPos = rect.rect.min + localPosition2D; Vector2 offsetMin = rectMinPos - anchorMinPos; Vector2 anchorMaxPos = parentRect.rect.max - Vector2.Scale(Vector2.one - rect.anchorMax, parentRect.rect.size); Vector2 rectMaxPos = rect.rect.max + localPosition2D; Vector2 offsetMax = rectMaxPos - anchorMaxPos; Vector2 sizeDelta = offsetMax - offsetMin; Vector2 anchoredPosition = offsetMin + Vector2.Scale(sizeDelta, rect.pivot); Debug.Log(anchoredPosition); }}Copy the code

conclusion

• LocalPositon is the coordinates of pivot with respect to its parent, piovt, independent of its anchor point

• AnchoredPositon is related to the coordinates of the pivot of the object itself and the center of its anchor. The calculation method is:

  • AnchoredPositon = the lower left point of its rectangle relative to the parent node axis coordinates – the lower left point of its anchor relative to the parent node axis coordinates + sizeDelta* its axis
  • Where sizeDelta = (width of self rectangle – width of anchor point, height of self rectangle – height of anchor point)

  For example:

Parent:

Child nodes:

AnchoredPostition = (-50.0, -50.0) – (0.0, 50.0) + (0.0, 50) * (0.8,0.2) = (-50.0, -50.0) -100.0) + (0.0, 10.0) = (-50.0, -90.0)

• When the child’s Anchor coincides with the parent’s pivot, the values of localpositon and anchoredPosition are equal.

Refer to the reference

# RectTransform localPosition and anchoredPosition(3D