Coordinate and position systems

UI 툴킷은 스타일 프로퍼티의 레이아웃 파라미터를 기반으로 개별 요소의 포지션 및 크기를 자동으로 계산하는 강력한 레이아웃 시스템을 사용합니다. 이 레이아웃 시스템은 웹 레이아웃 모델인 Flexbox를 기반으로 합니다. 자세한 내용은 레이아웃 엔진을 참조하십시오.

Relative and absolute positions

UI 툴킷에는 다음과 같은 두 가지 타입의 좌표가 있습니다.

• Relative: Coordinates relative to the element’s calculated position. The layout system calculates the position of the element, then adds the coordinates as an offset. Parent elements can influence the size and position of the child elements, as the layout engine takes them into account when it calculates the element position. Child elements can only influence the size of the parent element.
• Absolute: Coordinates relative to the parent element. This circumvents the automatic layout calculation and directly sets the position of the element. Sibling elements under the same parent have no influence on the element’s position. Similarly, the element doesn’t influence the position and size of other siblings under the same parent.

Each visual element determines the coordinate system used to calculate its position. You can configure which coordinate system to use in the element stylesheet.

다음 코드는 코드를 통해 시각적 요소의 포지션 및 좌표 공간을 설정하는 방법을 보여줍니다.

    var newElement = new VisualElement();
        newElement.style.position = Position.Relative;
        newElement.style.left = 15;
        newElement.style.top = 35;

요소의 원점은 왼쪽 상단 코너입니다.

The layout system computes the VisualElement.layout property (type Rect) for each element, which includes the final position of the element. This takes the relative or absolute position of the element into account.

layout.position은 점으로 표현되며, 해당 부모의 좌표 공간을 기준으로 합니다.

각 VisualElement에는 요소의 포지션 및 회전에 로컬 오프셋을 추가하는 데 사용할 수 있는 트랜스폼 프로퍼티(ITransform)가 있습니다. 오프셋은 계산된 레이아웃 프로퍼티에 표시되지 않습니다. 기본적으로 transform은 ID입니다.

Use the worldBound property to retrieve the final window space coordinates of the VisualElement, taking into account both the layout position and the transform. This position includes the height of the header of the window.

좌표 시스템 간의 변환

VisualElement.layout.position 및 VisualElement.transform 프로퍼티는 로컬 좌표 시스템과 부모 좌표 시스템 간의 변환 방식을 정의합니다.

The VisualElementExtensions static class provides the following extension methods that transform points and rectangles between coordinate systems:

• WorldToLocal은 Vector2 또는 Rect를 Panel 공간에서 요소 내 레퍼렌셜로 변환합니다.
• LocalToWorld는 Vector2 또는 Rect를 Panel 공간 레퍼렌셜로 변환합니다.
• ChangeCoordinatesTo는 한 요소의 로컬 공간에 있는 Vector2 또는 Rect를 다른 로컬 공간으로 변환합니다.

Additional resource

• Relative and absolute positioning C# example