좌표 및 포지션 시스템

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입니다.

레이아웃 위치와 트랜스폼을 모두 고려하여 VisualElement의 최종 창 공간 좌표를 가져오려면 worldBound 프로퍼티를 사용합니다. 이 위치에는 창의 헤더 높이가 포함됩니다.

좌표 시스템 간의 변환

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

VisualElementExtensions 정적 클래스는 좌표 시스템 간에 점과 사각형을 변환하는 다음의 확장 메서드를 제공합니다.

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

추가 리소스

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