좌표 및 포지션 시스템

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를 다른 로컬 공간으로 변환합니다.

추가 리소스

• 상대 및 절대 위치 지정 C# 예제