개념 - 시각적 좌표 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)에 있는 흰색 점과 같은 지점입니다.