UI 툴킷은 스타일 프로퍼티의 레이아웃 파라미터를 기반으로 개별 요소의 포지션 및 크기를 자동으로 계산하는 강력한 레이아웃 시스템을 사용합니다. 이 레이아웃 시스템은 웹 레이아웃 모델인 Flexbox를 기반으로 합니다. 자세한 내용은 레이아웃 엔진을 참조하십시오.
UI 툴킷에는 다음과 같은 두 가지 타입의 좌표가 있습니다.
각 시각적 요소는 포지션을 계산하는 데 사용되는 좌표계를 결정합니다.요소 스타일시트에서 사용할 좌표계를 구성할 수 있습니다.
다음 코드는 코드를 통해 시각적 요소의 포지션 및 좌표 공간을 설정하는 방법을 보여줍니다.
var newElement = new VisualElement();
newElement.style.position = Position.Relative;
newElement.style.left = 15;
newElement.style.top = 35;
요소의 원점은 왼쪽 상단 코너입니다.
레이아웃 시스템은 각 요소의 VisualElement.layout
프로퍼티(Rect
타입)를 계산하며, 여기에는 요소의 최종 포지션이 포함됩니다. 이때 요소의 상대 또는 절대 포지션이 고려됩니다.
layout.position
은 점으로 표현되며, 해당 부모의 좌표 공간을 기준으로 합니다.
각 VisualElement
에는 요소의 포지션 및 회전에 로컬 오프셋을 추가하는 데 사용할 수 있는 트랜스폼 프로퍼티(ITransform
)가 있습니다. 오프셋은 계산된 레이아웃 프로퍼티에 표시되지 않습니다. 기본적으로 transform
은 ID입니다.
worldBound
프로퍼티를 사용하여 레이아웃 포지션과 트랜스폼을 모두 고려한 VisualElement
의 최종 창 공간 좌표를 검색합니다.이 위치에는 창의 헤더 높이가 포함됩니다.
VisualElement.layout.position
및 VisualElement.transform
프로퍼티는 로컬 좌표 시스템과 부모 좌표 시스템 간의 변환 방식을 정의합니다.
VisualElementExtensions
정적 클래스는 좌표 시스템 간에 점과 사각형을 변환하는 다음의 확장 메서드를 제공합니다.
WorldToLocal
은 Vector2
또는 Rect
를 Panel
공간에서 요소 내 레퍼렌셜로 변환합니다.LocalToWorld
는 Vector2
또는 Rect
를 Panel
공간 레퍼렌셜로 변환합니다.ChangeCoordinatesTo
는 한 요소의 로컬 공간에 있는 Vector2
또는 Rect
를 다른 로컬 공간으로 변환합니다.