개념 - 항목 내의 시각적 좌표 Qt Quick

항목 좌표

Qt Quick 에서 사용되는 기본 시각 좌표계는 항목 좌표계입니다. 이는 항목의 왼쪽 상단 모서리를 (0,0)으로 하는 직교 좌표계입니다. x축은 오른쪽으로, y축은 아래쪽으로 뻗어 있으므로, 항목의 오른쪽 하단 모서리는 (너비, 높이) 좌표에 위치합니다.

개별 항목의 위치는 상위 항목의 좌표계를 기준으로 지정됩니다. 즉, 형제 항목이 아닌 항목에서 x, y 값을 읽을 때는 동일한 좌표계로 변환해야 할 수 있습니다. 이러한 경우, 종종 씬 좌표계가 중간 좌표계로 사용됩니다.

씬 좌표

씬 좌표는 (0,0)이 현재 씬이 렌더링되고 있는 창의 왼쪽 상단 모서리에 해당하는 좌표입니다. 씬 좌표는 일반적으로 창 내 루트 아이템의 아이템 좌표와 동일합니다.

관심 있는 좌표계를 가진 항목의 함수를 사용하여 항목 좌표에서 장면 좌표로 변환할 수 있습니다. 장면 좌표나 다른 항목의 좌표로 변환하는 방법은 Item::mapFromItem 및 Item::mapToItem 를 참조하십시오.

실습 예제

아래 QML 코드는 정사각형 배열을 생성하며, 각 점을 식별할 수 있도록 점을 추가합니다:

Rectangle {
    width: 200
    height: 200
    color: "red"

    Rectangle {
        x: 100
        y: 100
        width: 100
        height: 100
        color: "blue"

        Rectangle {
            width: 50
            height: 50
            color: "green"
        }
    }
}

이 이미지에서 검은색 점은 빨간색 사각형의 항목 좌표계 내에서 (0,0) 위치에 있습니다. 만약 빨간색 사각형이 장면의 루트 항목이라면, 검은색 점은 장면 좌표계에서도 (0,0) 위치에 있게 됩니다.

파란색 사각형은 빨간색 사각형의 왼쪽 상단 모서리를 기준으로 흰색 점인 (100, 100) 위치에 있습니다.

녹색 사각형은 x, y 좌표가 지정되지 않았으므로 위치가 기본적으로 (0,0)으로 설정됩니다. 부모 항목인 파란색 사각형의 좌표계에서 (0,0)에 위치하므로, 해당 사각형의 왼쪽 상단 모서리에 배치됩니다. 이는 빨간색 사각형의 좌표계에서 (100, 100)에 위치한 흰색 점과 같은 지점입니다.